Responsive Image height and width

[wahidnory]

Heya,
I'm currently trying to setup a woocommerce shop with the foundationpress theme. Since a few days there is an issue regarding the new lightbox (photoswipe) wich woocommerce implemented in version 3.
Now the photoswipe plugin is trying to determine height and width of images on the single-product page.
What happens is when you enable the following theme support the zoom function breaks and the user is stuck in the zoom mode because no buttons work on the overlay.

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

This happens because inside the repsonsive-images.php there is this function wich removes the height and the width.
This one to be more specific:

// Remove inline width and height attributes for post thumbnails
function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
	$html = preg_replace( '/(width|height)=\"\d*\"\s/', '', $html );
	return $html;
}
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

This raises an error in the console with the following message:
Uncaught TypeError: Cannot read property 'x' of undefined

Wich is really fague and frustrating to deal with. After debugging and trying to locate the error I found out that in woocommerce assets (/js/frontend/single-product.js) the ProductGallery is trying to locate the width and height of the through attributes. Here is the snippet doing it. Can be found on line 219 in single-product.js

ProductGallery.prototype.getGalleryItems = function() {
	var $slides = this.$images,
	items   = [];
	if ( $slides.length > 0 ) {
		$slides.each( function( i, el ) {
			var img = $( el ).find( 'img' ),
				large_image_src = img.attr( 'data-large_image' ),
				large_image_w   = img.attr( 'data-large_image_width' ),
				large_image_h   = img.attr( 'data-large_image_height' ),
				item            = {
					src: large_image_src,
					w:   large_image_w,
					h:   large_image_h,
					title: img.attr( 'title' )
				};
                 items.push( item );
	    } );
	}

	return items;
};

The properties large_image_w and large_image_h are both undefined for the image wich is shown directly on the single-product page.

Anyway I'm not sure if the removal of the width and height is neccesary, because my images remain responsive in my Woocommerce instance. However I don't know if this applies to everybody in other cases.

Hope this helps somebody if they run in the same issue as I did.

Keep up the great work with this theme, it really helped me develop my shop!

[brycejacobson]

Just ran into this issue and was going to report it but glad to see someone else found it as well.

The new Woocommerce 3.0 lightbox was broken giving me the "Cannot read property 'x' of undefined".

Ended up disabling the "remove_thumbnail_dimensions" filter for now. It could possibly be wrapped in a "! is_woocommerce()" conditional if still needed elsewhere.

[lorrinevil]

Any fixes for this? I'm having display issues - found this trying to find a solution
I’m having trouble with mobile display blowing out the image and people can’t see the content. I have two similar sites and updated/added the coding to update the images to 3.0 – StudioPres – one using enterprise pro (no problem) & one using Digital Pro (problem)

– DigitalPro – blows out the image.

– EnterprisePro – shows it correctly.
The structure and adding woocommerce support in the child theme with product-attributes.php is done -Both of these were upgraded to Woo 3.0 with same coding added to functions.php and style.css – I’ve gone through the coding on both to see what might be missing – changed @media sizing to be the same – no luck. Any advice? guidance? TIA!

http://specializedsaddles.com/store/product/eurolight-saddle/

[wahidnory]

It seems that you have width set to 100% inside the style.css

@media only screen and (max-width: 600px) {
	div {
		width: 100% !important;
		float: left;
	}
	.woocommerce div.product .product_title, .woocommerce div.product div[itemprop="description"], .woocommerce div.product div[itemprop="offers"], .woocommerce div.product .button.summary, .woocommerce div.product .woocommerce-tabs {
		width: 100% !important;
	}

I think this is cause your issue.

[olefredrik]

Seems like you have answered your own question and fixed it yourself by tweaking the remove_thumbnail_dimensions function.