Standard Product Image layout has bad max-width

[NormanRouxel]

Layout Standard Product Image uses the following code to set a style attribute for the max-width:

style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;"

The first BlockIf looks like:

ProductImageMaxWidth == "" OR ProductImageWidth < ProductImageMaxWidth

and the second looks like:

ProductImageMaxWidth != "" AND ProductImageWidth > ProductImageMaxWidth

This fails to generate anything if ProductImageMaxWidth is equal to ProductImageWidth, leading to an invalid style attribute.

Suggested fix is to change the first BlockIf to be:

ProductImageMaxWidth == "" OR ProductImageWidth <= ProductImageMaxWidth

[graphicz]

Not only that but if, as I have done, you specify a max-width of 100% for the product image in the css the javascript overwrites it making the image break the layout as the viewport shrinks.

The style is set in responsive.js around line 700

$(this).css({"max-width" : nWidth + "px", "width" : "100%"});

Changing this to

$(this).css({"max-width" : "100%"});

Solves the problem.

Not sure if this is a bug?

[graphicz]

Remember to re-patch responsive.js after any minor or major upgrades.

[graphicz]

In fact the product summary images on the section pages have the same issue - if affected you need to edit lines 666 to 704 so instead of this:

/***************************************************************
	*
	* Function: resizeImages 
	*
	* This function is to help resize images when larger images are
	* added.
	*
	***************************************************************/

	resizeImages : function()
		{
		//
		// Do this after the page has fully loaded as we depend on getting the width of the images
		//
		$(window).load(function() {
			//
			// Setting the maximum width for product and section images in a section page
			// Note: width 100% makes image responsive across all browsers and in all locations; 
			// max-width has to be set according to the image to prevent it growing too big.
			//
			if(!window.pg_nSectionImageMaxWidth || window.pg_nSectionImageMaxWidth != 0){
				$(".section-link-details .section-link-image img, .product-details .product-image img").each(function(){
					var naturalWidth = $(this).prop("naturalWidth");
					var nWidth = naturalWidth > window.pg_nSectionImageMaxWidth ? window.pg_nSectionImageMaxWidth : naturalWidth;
					$(this).css({"max-width" : nWidth + "px", "width" : "100%"});
				});
			}
			//
			// Setting the maximum width for product images in a product page
			//
			if(!window.pg_nProductImageMaxWidth || window.pg_nProductImageMaxWidth != 0){
				$("#product-page-body form .product-image img").each(function(){
					var naturalWidth = $(this).prop("naturalWidth");
					var nWidth = naturalWidth > window.pg_nProductImageMaxWidth ? window.pg_nProductImageMaxWidth : naturalWidth;
					$(this).css({"max-width" : nWidth + "px", "width" : "100%"});
				});
			}
		});
		},

You have this:

/***************************************************************
	*
	* Function: resizeImages 
	*
	* This function is to help resize images when larger images are
	* added.
	*
	***************************************************************/

	resizeImages : function()
		{
		//
		// Do this after the page has fully loaded as we depend on getting the width of the images
		//
		$(window).load(function() {
			//
			// Setting the maximum width for section images in a section page
			// Note: width 100% makes image responsive across all browsers and in all locations; 
			// max-width has to be set according to the image to prevent it growing too big.
			//
			if(!window.pg_nSectionImageMaxWidth || window.pg_nSectionImageMaxWidth != 0){
				$(".section-link-details .section-link-image img").each(function(){
					var naturalWidth = $(this).prop("naturalWidth");
					var nWidth = naturalWidth > window.pg_nSectionImageMaxWidth ? window.pg_nSectionImageMaxWidth : naturalWidth;
					$(this).css({"max-width" : nWidth + "px", "width" : "100%"});
				});
			}
			// Setting the maximum width for product images in a section page
			if(!window.pg_nSectionImageMaxWidth || window.pg_nSectionImageMaxWidth != 0){
				$(".product-details .product-image img").each(function(){
					var naturalWidth = $(this).prop("naturalWidth");
					var nWidth = naturalWidth > window.pg_nSectionImageMaxWidth ? window.pg_nSectionImageMaxWidth : naturalWidth;
					$(this).css({"max-width" : "100%"});
				});
			}
			//
			// Setting the maximum width for product images in a product page
			//
			if(!window.pg_nProductImageMaxWidth || window.pg_nProductImageMaxWidth != 0){
				$("#product-page-body form .product-image img").each(function(){
					var naturalWidth = $(this).prop("naturalWidth");
					var nWidth = naturalWidth > window.pg_nProductImageMaxWidth ? window.pg_nProductImageMaxWidth : naturalWidth;
					$(this).css({"max-width" : "100%"});
				});
			}
		});
		},