peter.morris

Sorry to reopen this older thread, but I had the exact same issue. The breakpoints in the media code were correct, but the image associated with the breakpoint was always one breakpoint larger than it should have been.

I opened up the hammy.php code to see this:

if ( ! preg_match( $ignorelist, $class ) ) {
                    // Get Sizes
                    $sizes = explode( ",", $options['hammy_breakpoints'] );
                    // Render Sizes
                    $i = 0;
                    $breakpoint = null;
                    // Output & Replace Strings
                    $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;
                    }

I moved the $breakpoint = $size; from below $i++; to the beginning of the foreach block and the correct image is now associated with the breakpoint.

I’m sure this is a dirty hack. My knowledge of PHP and this code is very, very limited but it appears to work. Is there a reason why the breakpoint was set AFTER it was used in the loop?