Issue with WooCommerce 3.0 new Gallery

[philschoefer]

How can this bug be reproduced?

1. Install a brand new WordPress with WooCommerce 3.0 and FoundationPress
2. Add theme support for new WooCommerce 3.0 Galleries
3. Create a product, add a couple of images and look at it in the front-end

What did you expect to happen?
Once I click on a thumbnail WooCommerces' photoswipe.js should open a large version of the image in some type of lightbox. If I use the arrows to the left and right, I should see all thumbnails that were presented on the product detail page.

What happened instead?
Some of the images seem to work. Some don't show in the lightbox and some clicks on thumbnails cause photoswipe to break with the error message:

Uncaught TypeError: Cannot read property 'x' of undefined

Please List the Following:

• OS & version: MacOSX Sierra 10.12.5
• FoundationPress version (see line 3 in package.json): 1.7.2
• Foundation version (see dependencies in package.json) : 6.3.0

I debugged the issue and it's with the responsive-images.php on line 62, function remove_thumbnail_dimensions().

The regex triggers on one of the WooCommerce data attributes. It looks like the one is data-large_image because after the function runs it ends up being data-large_image_data-large_image_srcset. WooCommerce now doesn't understand which large image to load and photoswipe.js ends up breaking down.

The regex needs to be adapted. It's triggering in situations where it shouldn't which causes a WooCommerce conflict.

I'm not sure why the function exists. I don't see harm in having initial width and height attributes on the image. It helps the browser to guess the size of the images before they have been loaded. Maybe a solution is just to remove the function remove_thumbnail_dimensions() altogether?

[philschoefer]

Thanks for fixing! :)