[How to] Insert banner ads on the image viewer

[ChainKiller]

Open app/themes/Peafowl/image.php and find the following code:

<div class="top-bar-placeholder background-black"></div>


<div id="image-viewer" class="image-viewer full-viewer margin-bottom-10">

Between these divs add another div that will contain you banner code.
Now you have your banner ad above the image, but the image will be pushed below a little (only if the image height is bigger than the viewport) and wont fit the height of the screen.
To fix this find (in the same file):

height: window.innerHeight - (typeof top !== "undefined" ? top.clientHeight : 0),

and add " - 90" before the comma, where 90 is the height of your div. You can find the height with the built in developer tool of your browser or by trying it out.
Request to Rodolfo: can you show me how to get the height with javascript, so if the height of the div changes the we wont have to edit it twice.

For the ads below the image search for:

<h1 class="viewer-title" data-text="image-description"><?php echo get_image()["description"]; ?></h1>

<div class="header">

Between the h1 and div add you ad codes.

To center them give the containing div a class rhen go to style.css and add this

.class-of-ad-div{
text-align: center;
}

End result:

 

[okayman]

awesome!

 

[qaz6412]

sorry
i am new user in coding
can you tell me
my ad code is

<a href="http://xxx..com/"><img src="http://www.xxx.com/images/AV-b-728x90_120k.th.gif" alt="AV-b-728x90_120k.gif" border="0" /></a>

then my div code is ?
thank you

 

[ChainKiller]

<div>ad code here</div>

If you want to style it add a class to it.
http://htmldog.com/guides/css/intermediate/classid/

 

[jiajieit]

I think this can also

 

[freebits]

Hi Jiajieit,

Thats actually very nice, I love the Disqus box next to the Google add on your site.
Do you mind sharing the code?
I know the solution is somewhere above this post but useually when I start fiddeling myself I end up with an broken page 🙂

Edit: I see the Disqus box also in the Chevereto demo, is this a standard option I haven't found yet?
Did I missed the manual on all the functions in Chevereto?

 

[tosR]

Hi guys, I add some ads to top of image, but when I added this ads I see some "white strip" (screnshot), can someone please tell me where and how can I repair it ? thanks for answer. U can see it too at my site iphotos.nl

 

[ChainKiller]

Put them in a div and give that div a black background and auto margin:

.class{
background: #000;
margin: 0 auto;
}

 

[tosR]

I did this:
Added to themes/peaflow/style.css

.ads-google {
background: #000;
margin: 0 auto;
}

this to themes/peaflow/image.php

<div class="ads-google"> Ads Code </div>

And nothing happend.

 

[ChainKiller]

Site link?

 

[tosR]

Solved, I finally decided that I will put ads below image. But thanks for your reply and help 🙂

 

[Rodolfo]

I'm adding ad manager for 3.2.3 guys, including banners for the fullscreen image viewer (for image viewer it will work perfect for 468x60 banners.

 

[Robinus]

Awesome Rodolfo, srsly keep this good work up, best man!