20

Note: I've already mentioned this issue in a comment on Meta.CodeReview, but I thought I'd document it here on the main Stack Exchange meta.

I love the new 300px community ads format.

a Code Review community ad post

Problem is, the stats page that's showing ads with 6+ upvotes is still showing the ads in the old 220px format, which looks... odd.

Squished ducks of Code Review

  • Looks like this has just been fixed. – alexwlchan Jan 18 '16 at 7:53
  • On mobile at least, the last ad on a row is bleeding off the edge of the white area of the page, which doesn't look right either. New bug? – Mathieu Guindon Jan 18 '16 at 12:51
6

Well, we fixed it briefly, but we had to revert it back because it turns out the stats page uses the same ad code as the running ads, and the change was causing the old ads to be stretched. When the 2016 ads go live, we'll switch the code back and the stats page will pick up the change as well.

The page also probably will need to be adjusted to only put three on a single row. We'll worry about that when the time comes.

  • 1
    When are 2016 ads scheduled to go live? I thought they were already! – Mathieu Guindon Jan 18 '16 at 19:04
  • @Mat'sMug it's Grace Note's decision: meta.stackexchange.com/questions/273255/… – Bret Copeland Jan 18 '16 at 19:06
  • 2
    That's really unfortunate. I would have loved to be able to take a look at how the new ads look in their final version (especially since the meta answer doesn't scale retina-optimized ads down to the proper size) before they go live. – Chris says Reinstate Monica Jan 18 '16 at 19:25
  • 1
    It should be possible to make this work with both the new and the old ad dimensions, simply by omitting the height attribute from the HTML and letting the browser determine it based on the image file's aspect ratio. See my answer for details. – Ilmari Karonen Feb 21 '16 at 18:53
2

A simple fix that works with both the new and the old ad dimensions would be to simply omit the height attribute from the <img> tags, and only specify the width. This way, browsers will scale the images to the desired width, while keeping their aspect ratio.

In fact, I even found a way to override the height attributes using CSS, like this:

a[href*="/ads/ct/"] img {
    height: auto;
}

I've included this CSS patch in the current stable version (v1.44) of my Stack Overflow Unofficial Patch (SOUP) user script. It even works on sites that currently have ads with mixed dimensions, like this:

Screenshot

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .