Problem with responsive images

[thisisbbc]

Hi,

As reported here : ​https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/issues/266

We have some issues with Chrome and Edge to display our single-product images with the right dimensions. The single-product image does display like it should with Firefox and Safari.

Not sure what's going on or how to fix this.

[joemcgill]

Hi @thisisbbc,

Thanks again for the report. As stated elsewhere, it looks like there may be another plugin or something in play that is affecting the image markup. The issue you're experiencing is happening because there is an image in the srcset that shouldn't be there, but there are also various data- attributes being added as well, which makes me think something else might be in play.

If this issue is still reproducible after turning off plugins and switching to a default theme, then it would be interesting to see what is saved in the attachment metadata for those images, (e.g., the output of wp_get_attachment_metadata).

Since this is potentially and issue affecting WordPress itself, let's keep the rest of the conversation going here rather than on the old plugin support repos.

Thanks,
Joe

[thisisbbc]

Hi Joe,

Thank you for the information you provided. I have made some further tests without plugins (only WooCommerce since the single-product pages are affected) and with Twenty Fifteen and the non-square image was still picked over the available square images. I have tried to find a setting somewhere that would refer to 662px height but couldn't find any.

Kind regards,
Bastien

[thisisbbc]

Quote from Jasper De Groot :

The data-o_* attributes are added by the WooCommerce plugin in case of variable products where each variation has its own image. These data- attributes contain the values for the general product image. JavaScript is used to replace the values of the image attributes by the ones of their data-o_ equivalent in case the general image needs to be shown.
The srcset is added by WooCommerce with a call to wp_get_attachment_image_srcset() so the fact that the 1000px width non-square image is included in there seems to be a bug in WordPress. I have to debug more though to figure out what goes wrong.

[jaspermdegroot]

@thisisbbc - Hi Bastien,

Can you tell me what you use as image sizes in Settings > Media for Thumbnail (+ hard cropped or not), Medium, and Large? And the same for your product images in WooCommerce > Settings > tab Products > Display for Catalog, Single product, and Product thumbnail (+ hard cropped or not for all three sizes).
I will test with TwentyFifteen. Has your WooCommerce plugin been updated to 2.4.12?

Thanks!

[thisisbbc]

Hey Jasper,

Sure thing, here you go :

Thumbnail Size -> 150 x 150 (Crop Thumbnail is checked)
Medium Size -> 300 x 300
Large Size -> 1024 x 1024

In WooCommerce :

Catalog Images -> 300 x 300 (Hard Crop is checked)
Single Product Images -> 710 x 710 (Hard Crop is checked)
Product Thumbnails -> 100 x 100 (Hard Crop is checked)

And yes we are running the latest version 2.4.12

Thank you!

[joemcgill]

Thanks @thisisbbc and @jaspermdegroot. Somewhere, a 1000x662px image is being created. Can you paste the output of wp_get_attachment_metadata( $id ), where the ID is the attachment ID for one of the images affected?

[thisisbbc]

Hello Joe,

I added a small function to output the array below the "Configure" block on variable products.

Here's the result for this product : ​http://nationhats.staging.wpengine.com/shop/hats/6-panel/classic-snapback-cap-custom-text/

Array
(
    [width] => 899
    [height] => 899
    [file] => 2015/10/Classic-Snapback-Cap-Black-Blank.jpg
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-150x150.jpg
                    [width] => 150
                    [height] => 150
                    [mime-type] => image/jpeg
                )

            [medium] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-300x300.jpg
                    [width] => 300
                    [height] => 300
                    [mime-type] => image/jpeg
                )

            [shop_thumbnail] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-100x100.jpg
                    [width] => 100
                    [height] => 100
                    [mime-type] => image/jpeg
                )

            [shop_catalog] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-300x300.jpg
                    [width] => 300
                    [height] => 300
                    [mime-type] => image/jpeg
                )

            [shop_single] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-710x710.jpg
                    [width] => 710
                    [height] => 710
                    [mime-type] => image/jpeg
                )

            [post-thumbnail] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-100x100.jpg
                    [width] => 100
                    [height] => 100
                    [mime-type] => image/jpeg
                )

            [entry-cropped] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-899x662.jpg
                    [width] => 899
                    [height] => 662
                    [mime-type] => image/jpeg
                )

            [entry-cropped-fullwidth] => Array
                (
                    [file] => Classic-Snapback-Cap-Black-Blank-899x662.jpg
                    [width] => 899
                    [height] => 662
                    [mime-type] => image/jpeg
                )

        )

    [image_meta] => Array
        (
            [aperture] => 0
            [credit] => 
            [camera] => 
            [caption] => 
            [created_timestamp] => 0
            [copyright] => 
            [focal_length] => 0
            [iso] => 0
            [shutter_speed] => 0
            [title] => 
            [orientation] => 1
        )

    [filesize] => 94264
)

[jaspermdegroot]

Ok, this explains where the 1000x662px image comes from. "entry-cropped" and "entry-cropped-fullwidth" are image sizes that are added by the theme that you are using. When you switch to TwentyFifteen those are still available.
I will add those two image sizes to TwentyFifteen to see if I can reproduce.

[jaspermdegroot]

I added those two image sizes in TwentyFifteen:

add_image_size( 'entry-cropped', 960, 662, true );
add_image_size( 'entry-cropped-fullwidth', 9999, 662, true );

Still I can't reproduce the issue, whatever I do to try to break things.

[jaspermdegroot]

@thisisbbc - Hi Bastien,

Like I said in my previous comment, I tested this with the two additional image sizes and your 899x899px images. So the image meta data was the same as you posted here, but the 899x662px image wasn't included in the srcset. I also tested with your 1000x1000px images and again the 1000x662px image wasn't included.

Since it can't be reproduced with WooCommerce and a default theme while using exactly the same image sizes, I can only conclude that it's not a bug in WordPress and I think we should close this ticket. I suggest that you open a ticket at the support forum of your theme author.

Thanks!