Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using this http://www.ghosthorses.co.uk/production-diary/removing-inline-img-dimensions-for-responsive-wordpress-websites/ to remove the height and width attributes of images. Everything works fine except that it messes up the masonry container because of the images have no height. How could I apply this filter only to a determined div id/class?

share|improve this question
1  
That article links back to this Stack: wordpress.stackexchange.com/a/29886/12615 –  brasofilo Nov 15 '12 at 23:16

2 Answers 2

You might have better luck using wp_get_attachment_url( $id ) rather than wp_get_attachment_image(). Take a look at the WordPress codex for the call.

share|improve this answer
    
I tried it but it doesn't seem to work within the instant gallery plugin wp.tutsplus.com/tutorials/plugins/… –  pepe Nov 16 '12 at 14:05
    
I just want the main image to have dynamic height, but it creates a fixed width and height image to be replaced. If I use the function to remove width and height it works perfectly but masonry stops working fine –  pepe Nov 16 '12 at 14:08

As I guess what you're after (and which is off topic here), I'll briefly explain what is...

The problem

IE (versions 6, 7, and 8 and under its “compatibility mode”) will not render an image when that image has blank width and height attributes (...)

So this code will produce no images in IE:

<img src="logo.png" alt="company logo" width="" height="" />

But this will:

<img src="logo.png" alt="company logo" width="200" height="50" />

Source

The "Solution"

Here is a spreadsheet of all currently available techniques. From this spreadsheet you can read that the idea of Harry Roberts seems to be the "best" (currently).

Summed up briefly: The idea is to set one image and surround it with a div that has a background image.

<!-- HTML -->
<div class="r-img" style="background:url(link/to/large/version); width:[width-of-image]px; height:[height-of-image]px;">
    <img src="link/to/small/version" alt="" />
</div>

/* CSS */
.r-img img{
    /* Hide image off-screen on larger devices, but leave it accessible to screen-readers */
    position:absolute;
    left:-9999px;
}

/*--- RESPONSIVE ---*/
@media(max-width:480px){
.r-img{
    /* Remove styling from the div */
    background:none!important;
    width:auto!important;
    height:auto!important;
}
.r-img img{
    /* Bring smaller image back into view */
    position:static;
    max-width:100%;
}

Unfortunately, users on larger screens will still download both images…

That's the only contra with this solution.

share|improve this answer
    
Could you not use wp_get_attachment_image_src and set the source, width and height of a parent div and child div with background image and hide one from the other based on media queries? –  userabuser Nov 15 '12 at 23:36
    
@userabuser I'm not aware of any technique avoid that an imges src would be loaded. display, visibility both don't help. And as you can see in this test, the images even load when their src is removed (aside from having actually invalid markup and broken img tags). Maybe one could use wp_is_mobile() to avoid the img (or other user agent sniffing tricks), but that wouldn't cover all cases. That would be just an improvement to above answer. –  kaiser Nov 16 '12 at 1:26
1  
@userabuser Found an interesting idea/addition: "Store the URLs somewhere else, then set all image URLs to some dummy image (empty, transparent, "loading data...", whatever). When an image should be displayed, use JS to set the src attribute and the browser will fetch it." –  kaiser Nov 16 '12 at 1:28
1  
Funny you mention that, exactly what I did on horizontal theme I Was working on mentioned in chatroom. I did it for lazy loading. You place a 1x1px transparent gif in the src and the real src in a data attribute and detect based on proximity or viewport before swapping out. So your suggestion/idea does work, in fact if you go JS route then you can set height/width attributes dynamically too which solves OP issue. Without JS intervention it won't be possible as you previously showed... +1 add this to your answer IMO. –  userabuser Nov 16 '12 at 1:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.