Images not showing in Internet Explorer 9 or 8

[gtrias]

I've found that the plugin works very well excepting in Internet Explorer 8 and 9. I guess the picture tag is not recognized and the noscript img is not loaded.

What I've done to solve this is add the "img" tag with no "noscript" tag (hammy.php line 155), so that way is loaded in browsers that doesn't support picture tag and it works as expected in browsers that supports the picture tag. I've found the solution reading this article http://www.w3.org/community/respimg/

I hope it helps. thanks

[noeltock]

Thank you! Could you copy paste that part of the code so I'm understanding correctly? Thanks :)

[gtrias]

I'va changed the output of the images

        $newimage = '<picture class="hammy-responsive ' . $class . '" alt="' . $alt . '" title="' . $title . '">';

                    foreach ( $sizes as $size ) {

                        if ( $i == 0 ) {

                            $media = null;

                        } else {

                            $media = ' media="(min-width:' . $breakpoint . 'px)"';

                        }

                        if ( $size <= $width ) {

                            $resized_image = wpthumb( $original, 'width=' . $size . '&crop=0' );

                            $newimage .= '<source src="' . $resized_image . '"' . $media . '>';

                        }

                        $i++;
                        $breakpoint = $size;

                    }

                    $newimage .= '<noscript><img src="' . $original . '" alt="' . $alt . '" title="' . $title . '"></noscript></picture>';

For this code

                   $newimage = '<figure class="responsive hammy-responsive ' . $class . '" data-media="'.$original.'" alt="' . $alt . '" title="' . $title . '"';

                    foreach ( $sizes as $size ) {

                        if ( $i == 0 ) {

                            $media = null;

                        } else {

                            $media = ' media="(min-width:' . $breakpoint . 'px)"';

                        }

                        if ( $size <= $width ) {

                            $resized_image = wpthumb( $original, 'width=' . $size . '&crop=0' );

                            $newimage .= 'data-media'.$breakpoint.'="' . $resized_image . '" ';

                        }

                        $i++;
                        $breakpoint = $size;

                    }

                    $newimage .= '><noscript><img src="' . $original . '" alt="' . $alt . '" title="' . $title . '"></noscript></figure>';

And in the hammy.js I added the next line:

    $('figure.hammy-responsive').picture();

Thanks for this great plugin!

[ipnetxyz]

Thanks for adding this hack here, but somehow for me it's not working properly.

What I achieved after applying the hack:

• the images are displayed also on IE

What it got broken:

• on all browser the image appear in wrong place, like moved to the right, not centered, etc (CSS issue maybe?)
• on all browser resize does not work anymore (the reason why I'm struggling with this blog).

I did check the code and tried to understand it, carefully copy / paste several times...no luck :(

If somebody has any idea I'm willing to try.

Thanks!