Issue with WP4.4 and responsive images

[thisisbbc]

Since the latest WP4.4 update we are having issues with WooCommerce featured images.

The new srcset attribute seems to be affected by WP Offload somehow. More specifically, the srcset attribute of the featured image on single-product page. It is somehow related to WooCommerce, but so far it has not been identified as a problem from WooCommerce or the new responsive image library integrated in WP core as we've already explored these possibilities with the rightful developers on github and through the WP trac system (https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/issues/266 and https://core.trac.wordpress.org/ticket/34998)

This is also not related to our theme, as the problem persist even on Twenty Fifteen.

Our images are square, however when WP Offload is activated, the featured image tries to load a cropped image. If you change the variation color, the appropriate image will show, only the product featured image seems to be affected by this issue.

URL : http://goo.gl/zhzIV9

Waiting for your feedback.

Regards, B

[polevaultweb]

@thisisbbc can you post your diagnostic info from AWS > S3 & CloudFront > Support please

[polevaultweb]

@thisisbbc are your images still on your server? Can you turn off 'Rewrite File URLs' or better still disable the plugin, and let me know so I can view the page.

[thisisbbc]

@polevaultweb sure thing, here you go...

site_url(): http://nationhats.staging.wpengine.com
home_url(): http://nationhats.staging.wpengine.com
Database Name: snapshot_nationhats
Table Prefix: wp_
WordPress: 4.4
Web Server: Apache
PHP: 5.5.9-1ubuntu4.14
MySQL: 5.6.27-76.0-log
ext/mysqli: yes
PHP Memory Limit: 256M
WP Memory Limit: 256M
Blocked External HTTP Requests: None
WP Locale: en_US
Debug Mode: No
WP Max Upload Size: 50 MB
PHP Time Limit: 360
PHP Error Log: /var/log/apache2/staging-nationhats.error.log
WP Cron: Enabled
fsockopen: Enabled
OpenSSL: OpenSSL 1.0.1f 6 Jan 2014
cURL: Enabled
Zlib Compression: Enabled
PHP GD: 2.1.1-dev
Imagick: Enabled

Media Files: 4,849
Media Files on S3: 4,849
Number of Image Sizes: 12

Bucket: nationhats
Region: 
Copy Files to S3: On
Rewrite File URLs: On

URL Preview: https://dsfrc4icyn4oa.cloudfront.net/wp‑content/uploads/2015/12/18103846/photo.jpg

Domain: cloudfront
Enable Path: On
Custom Path: wp-content/uploads/
Use Year/Month: On
SSL: https
Remove Files From Server: On
Object Versioning: On
Far Future Expiration Header: On
Copy HiDPI (@2x) Images: Off

Active Plugins:
Affiliates Enterprise (v2.13.3) by itthinx
Affiliates Formidable Integration (v1.1.0) by itthinx
Affiliates Permanent (v1.3.0) by itthinx
Affiliates Products (v1.5.1) by itthinx
Affiliates WooCommerce Integration (v1.6.0) by itthinx
Akismet (v3.1.6) by Automattic
Alpine PhotoTile for Instagram (v1.2.7.7) by the Alpine Press
Amazon Web Services (v0.3.4) by Delicious Brains
Cornerstone (v1.0.11) by Themeco
Design Approval System (v4.1.0) by SlickRemix
Duplicate Post (v2.6) by Enrico Battocchi
Easy Social Share Buttons for WordPress (v3.2.5) by CreoApps
Essential Grid (v2.0.9.1) by ThemePunch
Fancy Product Designer (v2.2.4) by Rafael Dery | radykal.de
Formidable (v2.0.18) by Strategy11
Formidable AWeber (v1.0.03) by Strategy11
Formidable Locations (v2.0.01) by Strategy11
Global Content Blocks (v2.1.5) by Dave Liske
Groups (v1.9.1) by itthinx
Groups Notifications (v1.1.1) by itthinx
Itthinx Updates (v1.2.0) by itthinx
NH Donations (v1.0.0) by ThemePlugger
Ninja Popups (v4.2.6) by ArsCode
Plugin Organizer (v6.0.4) by Jeff Sterup
Pretty Link Pro (v1.6.8) by Caseproof
Query Monitor (v2.8.1) by John Blackbourn
Slider Revolution (v5.1.5) by ThemePunch
UberMenu 3 - The Ultimate WordPress Mega Menu (v3.2.2.1) by Chris Mavricos, SevenSpark
Ultimate Addons for Visual Composer (v3.14.1) by Brainstorm Force
Visual Composer Extension - Groups (v1.0) by Max Ziebell
WP Offload S3 (v0.9.10) by Delicious Brains
WPBakery Visual Composer (v4.8.1) by Michael M - WPBakery.com
White Label Login for WordPress (v1.1.2.64295) by (RightHere LLC)
WooCommerce (v2.4.12) by WooThemes
WooCommerce Canada Post (v2.4.1) by WooThemes
WooCommerce Custom Product Designer (v3.2.4) by tshirtecommerce.com
WooCommerce Dynamic Pricing & Discounts (v1.0.18) by RightPress
WooCommerce Instagram (v1.0.7) by WooThemes
WooCommerce Magic Grid (v4.2) by Proword
WooCommerce Print Invoice & Delivery Note (v4.1.5) by Triggvy Gunderson
WooCommerce Product Image Flipper (v0.2.1) by jameskoster
WooCommerce Smart Coupons (v3.0.6) by WooThemes
WooCommerce Stripe Gateway (v2.6.1) by Mike Jolley
WooCommerce TM Extra Product Options (v4.2.3) by themecomplete
WooCommerce WooCart Pro (v2.0.0) by Festi
WordPress Importer (v0.6.1) by wordpressdotorg
X – Facebook Comments (v1.0.0) by Themeco
X – Google Analytics (v1.0.0) by Themeco
X – Olark Integration (v1.0.0) by Themeco
Yoast SEO (v3.0.6) by Team Yoast

Must-use Plugins:
Force Strong Passwords - WPE Edition (v1.6.4) by Jason Cosper
Plugin Organizer MU (v6.0.4) by Jeff Sterup
Stop long comments (v0.0.4) by WPEngine
WP Engine System (v2.2.7) by WP Engine

Unfortunately the images are not on our server anymore, I'm thinking about moving back all the files though as I've learned the hard way not all plugins support this (most importantly Fancy Product Designer in our case but that's another story).

I told you that this was not related to our theme but that's not entirely true as the 470px height image we can see when WP Offload is enabled is a default image size defined by our theme (see https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057). This image size should be disabled though and was not displayed prior to WP4.4. I have a ticket here : https://community.theme.co/forums/topic/problem-with-wp4-4-responsive-images-and-woocommerce/#post-712572.

I still believe something weird is going on with WP Offload as when it is disabled, the featured image return an error 404 but to the appropriate square image, not the cropped one. Also, I can't see in the srcset attribute any reference to the 470px image or 662px one. When WP Offload is on, you can see that the 1000_662px image is added in the srcset attribute. Our theme has a default 450_470px image size defined that you can override and our settings are 710*710px.

To be as thorough as possible I moved back a set of images on our server for one product, and when WP Offload is disabled, the square image was loading. Even if a 1000_662px image is present on the server and that the "entry-cropped" and "entry-cropped-fullwidth" image size meta are available (the 1000_662px image is NOT in the srcset attributes when WP Offload is deactivated though) which explains why it is not loaded. I'm not sure why this attribute is added with WP Offload.

I'm sorry for the long message I wanted to provide as much details as possible as this is a pretty weird bug. WP Offload is currently deactivated but let me know when you've checked it since it makes it pretty hard to work on the site.

Thank you!

Regards, B

[polevaultweb]

@thisisbbc Thanks for all this. I have managed to recreate and we will be release a fixed version of the plugin shortly.

[polevaultweb]

Version 0.9.11 has just been released with this fix :)

[ZE3kr]

I notice that 0.9.11 still have this bug, the srcset miss the photo URL(in feature photo), and in the page, it miss the srcset.

site_url(): https://ze3kr.com
home_url(): https://ze3kr.com
Database Name: wp
Table Prefix: wp_2_
WordPress: 4.4.1 Multisite
Web Server: Apache/2.2.15 (Red Hat)
PHP: 5.4.40
MySQL: 5.5.45
ext/mysqli: no
PHP Memory Limit: 256M
WP Memory Limit: 64M
Blocked External HTTP Requests: None
WP Locale: zh_CN
Debug Mode: No
WP Max Upload Size: 64 MB
PHP Time Limit: 300
PHP Error Log: 
WP Cron: Enabled
fsockopen: Enabled
OpenSSL: OpenSSL 1.0.1e-fips 11 Feb 2013
cURL: Enabled
Zlib Compression: Enabled
PHP GD: bundled (2.1.0 compatible)
Imagick: Enabled

Media Files: 123
Media Files on S3: 123
Number of Image Sizes: 5

Bucket: [this is a private name]
Region: 
Copy Files to S3: On
Rewrite File URLs: On

URL Preview: https://media.landcement.com/sites/2/20160130203511/photo.jpg

Domain: cloudfront
Enable Path: Off
Custom Path: 
Use Year/Month: Off
SSL: request
Remove Files From Server: On
Object Versioning: On
Far Future Expiration Header: Off
Copy HiDPI (@2x) Images: Off

Active Plugins:
Amazon Web Services (v0.3.4) by Delicious Brains
Autoptimize (v2.0.0) by Frank Goossens (futtta)
Crayon Syntax Highlighter (v2.8.0) by Aram Kocharyan
WP Offload S3 (v0.9.11) by Delicious Brains
WP-Piwik (v1.0.6) by André Bräkling
XML Sitemap & Google News feeds (v4.5.1) by RavanH

[ZE3kr]

And I tried disable all other plugins, and it still not work.

[polevaultweb]

@ZE3kr apologies for this, it is an issue with srcset and our object versioning. It will be fixed in the next version.

[joshbrw]

@polevaultweb any ideas when the next version will be released? Also having issues with srcset over here.

[joshbrw]

Just a sidenote, we're using the_post_thumbnail() and it's not returning any srcset information.