Announcement

Collapse
No announcement yet.

Standard Product Image layout has bad max-width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Standard Product Image layout has bad max-width

    Layout Standard Product Image uses the following code to set a style attribute for the max-width:
    Code:
    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:
    Code:
    ProductImageMaxWidth == "" OR ProductImageWidth < ProductImageMaxWidth
    and the second looks like:
    Code:
    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:
    Code:
    ProductImageMaxWidth == "" OR ProductImageWidth <= ProductImageMaxWidth
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    #2
    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

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

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

    Not sure if this is a bug?

    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    Comment


      #3
      Remember to re-patch responsive.js after any minor or major upgrades.
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        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:

        Code:
        /***************************************************************
        	*
        	* 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:

        Code:
        /***************************************************************
        	*
        	* 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%"});
        				});
        			}
        		});
        		},
        Jonathan Chappell
        Website Designer
        SellerDeck Website Designer
        Actinic to SellerDeck upgrades
        Graphicz Limited - www.graphicz.co.uk

        Comment

        Working...
        X