WordPress.org

Ready to get started?Download WordPress

Forums

AdRotate
Adrotate and Responsive Design (18 posts)

  1. gavinwebb
    Member
    Posted 1 year ago #

    Hi - this is just a question really. I've been reading a fair bit about responsive design and wonder how Adrotate would work with the concept of HTML5 banner ads, a discussed here?

    Thanks.

    http://wordpress.org/extend/plugins/adrotate/

  2. gavinwebb
    Member
    Posted 1 year ago #

    From my understanding so far, with the decision to add fixed widths to the add in a recent update, this is now making it difficult to make banner ad 'images' (as opposed to the HTML5 option above) responsive using the max-width:100%; css rule.

    I might be wrong by the way, still getting my head around this :)

  3. Arnan de Gans
    Member
    Plugin Author

    Posted 1 year ago #

    Fixed width changes nothing about making ad images and if anything makes it easier because you stake out an area for the image now.

    This has no influence on responsive themes which prefer preset boxes, such as AdRotate blocks now makes.

    However, this change in AdRotate wasn't to support responsive themes better. But it's a welcome 'side effect'.

  4. gavinwebb
    Member
    Posted 1 year ago #

    Hi again Arnan - another question. What if I don't want ads to be fixed in size, but change in size depending on the screen resolution/device? The problem with fixed width ads is that when a sidebar (which is styled in percentages to allow for flexibility) the ad doesn't resize to the width of the sidebar.

    I can't figure out how to ensure that the image inside the container responds to the img {max-width:100%} rule.

    Thanks.

  5. gavinwebb
    Member
    Posted 1 year ago #

    It looks as though images resize for single ads using the Single Ad and Group of Ads widget options, but not using the Block of Ads option.

  6. Arnan de Gans
    Member
    Plugin Author

    Posted 1 year ago #

    Images do not resize with resolution either. So even if AdRotate allowed for a flexible width. The image still remains the same size at all times. 100px is 100px.

    Maybe I'm missing something?

  7. gavinwebb
    Member
    Posted 1 year ago #

    That's right. If I were to determine the image as 100px wide it would remain the 'fixed' width of 100px.

    However, with responsive design, as well as fixed width images, we can set it so that an image is always 100% the width of it containing element.

    This is a useful article on how to build a responsive website, but particularly relevant to this discussion, the part on flexible images.

    In relation to Ad Blocks, it would be helpful if, as an option, images could become flexible (as they are as Single Ads or Ad Groups) so that there is no chance of either excessive white space or clipping occurring.

    I've created a little demonstration of what I mean regards the differences between Single, Group and Block. As you can see when you resize the width of the browser, the Single and Group Ads resize to the breaking point, and then revert to their original size. The Block Ads however don't because we've identified a fixed pixel width of the default 125px or, in the case on the demo, 180px.

    I'm wondering if there was an option to be able to add a percentage instead of a pixel measurement whether or not this would achieve the desired result of flexibility?

    Thanks.

  8. Arnan de Gans
    Member
    Plugin Author

    Posted 1 year ago #

    It CSS handles image scaling, and it seems it does, this certainly is an interesting option to add. If not for responsiveness. It will make things easier for the end user.

    Perhaps we can have a chat about this sometime so we can share our views on this.

  9. gavinwebb
    Member
    Posted 1 year ago #

    That's fine - look forward to speaking soon.

  10. Arnan de Gans
    Member
    Plugin Author

    Posted 1 year ago #

    Gavin, You can reach me at info@ajdg.net - I didn't see a way to contact you on your profile.

  11. gavinwebb
    Member
    Posted 1 year ago #

    Hi Arnan - I've just emailed you so look forward to speaking soon. All the best.

  12. tarnya
    Member
    Posted 1 year ago #

    AdRotate WordPress Plugin making mobile responsive I wrote a post about how I made the advert blocks mobile responsive in the sidebar.

  13. Remco Stoffer
    Member
    Posted 1 year ago #

    Any news on this ... responsive widgets and blocks ?? I would certainly need it for my website. Thanks guys !!

  14. C G
    Member
    Posted 1 year ago #

    Ditto on @remstoffer's comment.

  15. brianj
    Member
    Posted 1 year ago #

    Another nice option in AdRotate would be to allow for a different ad image to display at certain break points. For example, a wide horizontal banner ad of say 750px on a small screen is going to shrink and the content in the image will be barely visible.....it would be awesome to be able to upload a second image for a banner ad that would be displayed at certain break points, that way the ad could be something like 450 x 350 when the screen size is smaller...and from there down it could just shrink with the container if the screen size is any smaller than 450px.

    Right now, I'm probably going to try and write a javascript action to replace the banner image when the screen gets smaller.

  16. 25knots
    Member
    Posted 1 year ago #

    Have any of the suggestions above for adding responsive capabilities been added to the Ad Rotate plugin? I am surprised so many of the advertisement solutions are this far behind the curve.

  17. Arnan de Gans
    Member
    Plugin Author

    Posted 1 year ago #

    What curve? AdRotate for the most part works fine with Responsive themes.

    http://www.adrotateplugin.com/2013/01/adrotate-on-responsive-themes/

  18. brianj
    Member
    Posted 1 year ago #

    If anyone is interested in making AdRotate allow you to do an image replacement for long horizontal banners to show a more square banner on smaller screens , let me know and I'll
    Put the code in pastebin.
    I just did this with a bit of jquery and it works really .

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic