How to add Google Adsense code to Gallery 3

I already presented Gallery 3 in a previous post. I just upgraded gal.patheticcockroach.com to Gallery 3.0.2, so I had to place the stat tracking code again, as well as to replace the .htaccess with my modified version for pretty URLs. And in the process I decided to add some Adsense ads, too. After some thinking I figured that a good place to put them would be at the top, just below the menu and above the gallery titles.

More precisely, the place we want to reach is just between <div id="yui-main"> and <div class="yui-b">. First problem: there’s not Adsense ad that matches the available space: the 768×90 leaderboard is just a bit too wide. I picked a simple solution: I placed 2 ads side by side: a 468×60 banner plus a 234×60 half-banner. It just fits the available width (in the default theme, Wind, at least) and compared to the big leaderboard it also uses 33% less height (I’ve always thought that 90 pixels is starting to get a bit too big).

Let’s get started then; once again the file to edit is /themes/wind/views/page.html.php.
Find:
<div id="yui-main">
<div class="yui-b">
…and between those two add your Adsense units. You need to place them in a few divs so that they lay side by side instead of stacking on each other. Here’s a full code sample (NB: I wrote the divs added for layout in bold):

<div id=”yui-main”>
<div style=”width:702px;height:60px;border:1px solid #bbb;margin-left:10px;”>
<div style=”float:left;”><script type=”text/javascript”><!–
google_ad_client = “ca-pub-9471398824076666”;
/* 468×60 for pcr gallery */
google_ad_slot = “8724036694”;
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>
<div style=”float:left;”><script type=”text/javascript”><!–
google_ad_client = “ca-pub-9471398824076666”;
/* 234×60 for pcr gallery */
google_ad_slot = “2196553125”;
google_ad_width = 234;
google_ad_height = 60;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>
</div>
<div class=”yui-b”>

That’s all 🙂 You can see the result there.
Note that the reason why there’s a border here is because I used it to find the proper dimensions. It actually looks nice too IMO, however it will spoil the layout a bit for people with ad-blocking software… so you may want to remove the height as well as the border for the div containing the ads. That’s what I did on my gallery indeed.

NB: if you’re not the I-modify-files-by-hand type, you can use a plugin/module such as this one, too. Personally I’m always a bit afraid of those Gallery modules, they don’t seem to be regularly maintained yet…