1

I'm trying to change the width of my ad image from pixels to percentages. I'm using Google DoubleClick or "DFP". It automatically puts your ad image inside an iframe, making it very hard to change the actual dimensions of the image.

So, the way I've gone about changing the images width from pixels to percentage is, I made a div (that is 90% of the webpage) wrapped around the image ad and then set the image's width to 100% so when the wrappers width changes on browser width resize, the image within it will always fill up the wrapper. But I don't know how to make this all work since the image is within an iframe (stupid DFP!!!)

Here is the CSS codes for... the wrapper:

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

then the iframe which is in the wrapper:

iframe {width:100%;}

then finally the actual image in which i tried a few CSS selectors and different div classes:

.img_ad, a#aw0, iframe>.img_ad, iframe>#google_image_div>.img_ad {width:100%; display:block; border:1px solid red !important;}

If you inspect element in Google Chrome on the ad image, you will see that the CSS isn't being applied to the image. All I'd like to do is change the images width into a percentage.. and also the height to auto. Should it really be this hard? Is this even possible since the image is in an iframe? Is DFP setting me up for failure? I just don't know... But, how would I alter the image ad's code? Any help would truly truly truly be appreciated guys! :)

Here is the jsFiddle: http://jsfiddle.net/EptwH/3/

Improve this question
9
  • you're not supposed to resize DFP creatives, supposedly someone is paying to have his creative shown at a predefined dimention. I know for one, I don't want the creatives I pay for (which are 300x250) to be shrunk down to fit the needs of the site that displays them. Commented Mar 11, 2013 at 22:15
  • @hexblot my whole site revolves around my thumbnails and ads slightly changing in dimensions for different browser widths / screen resolutions, this is something that my advertisers would be informed on before advertising with me. The shrinkage is minimal, lol. Commented Mar 11, 2013 at 22:18
  • Are you trying to target elements from a page to an inner outter-source <iframe> ?? Commented Mar 11, 2013 at 22:18
  • @Dyck the "proper" way to do this is to define multiple sizes for creatives, and have them reload via Javascript, not touch the creatives. Commented Mar 11, 2013 at 22:20
  • @hexblot my websites thumbnails widths are in percentages, that would not work becasuse my thumbnails would be changing size on browser width change but my creatives would not. I feel like there must be a way to change the image width into a percentage, hmmm.... Commented Mar 11, 2013 at 22:22

3 Answers 3

Reset to default
3

I found that I could use the synchronous loading, in junction with the "smart iframe" Google touts, that I could rip the link out of their iframe and place it in my DOM.

Note that I pass the same id for the dfp code to my AdjustGoogleAd method. I'm messing with the width/height attributes because we're on a responsive site.

<script type='text/javascript'>
    (function () {
        var useSSL = 'https:' == document.location.protocol;
        var src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
</script>
<script type='text/javascript'>
    googletag.defineSlot('{AD SLOT HERE}', [WIDTH, HEIGHT], 'dfp-div-id').addService(googletag.pubads());
    googletag.pubads().enableSyncRendering();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();

    $(function () {
        AdjustGoogleAd('dfp-div-id');
    });

    function AdjustGoogleAd(bannerId) {
       var banner = $('#' + bannerId);
       var contents = $('#' + bannerId + ' iframe').contents();

       contents.find('a').clone().attr('id', bannerId + '_a').appendTo('#' + bannerId);
       var newLink = $('#' + bannerId + '_a');
       newLink.siblings().remove();
       newLink.find(".img_ad").removeAttr('height').removeAttr('width');
    }

</script>

With HTML:

<div id='dfp-div-id'>
     <script type='text/javascript'>
         googletag.display('dfp-div-id');
     </script>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Here is a jsfiddle with an example of what I am pretty sure you want to do... so yes it is possible... whether it violates the terms of DFP is another question!

http://jsfiddle.net/e3dUT/ (resize the panes to see it working, only working 100% in chrome at the moment, but that should just be a matter of tweaking it some more.)

$.dfp({
    dfpID: '12589173',
    afterAllAdsLoaded: function ($adUnits) {
        $('iframe').attr('width', '100%').attr('height', '100%');
        $adUnits.each(function () {
            $contents =  $(this).find('iframe:first').contents();
            $contents.find('img').width('100%').height('auto');
        });
    }
});

It uses the jQuery DFP plugin I created, but with a bit of work you could implement this in stock javascript as well.

Improve this answer

Comments

1

The iframe here is on a different domain. You can't modify it's contents with CSS or JS.

Improve this answer

5 Comments

it is generated from google for my own website, would i be able to modify it through my own website and some JS?
Assuming you could use JS, it would still be delayed until after the page is loaded. Therefore, any positioning would not be changed until after the initial load, causing a repaint and other performance problems. Why do you want to change the contents?
The contents of the iframe is essentially the image ad, that is exactly and only what it is, an image which is an ad. And I uploaded these images with DFP (a google ad program) and then DFP gives me codes to put in my website. The code generates the image that is in an iframe. I need to change the width of the image ad from pixels to percentage. So yeah, I guess there is no way to fix this right?
Correct. That's part of the point of an iframe: it can't be edited by the site.
DFP iframes are slightly different and you can edit them, see my jsfiddle answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.