X-Cart forums

[momentum]

Hello Great X-cart Users

Hopefully we can all have a profitable New Year

Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.

My question is how do you make sure the images are percentages and not px? I thought it would be in the css somewhere?

I have to make this site as friendly as possible for the small screen user.

[cflsystems]

The product page image size is a complex thing It uses the image size but also the admin settings image size on appearance page and also size or should I say image holder is calcualted in php script and assign to smarty and then is inline styling....

[momentum]

Hello

Yes, I agree with you that the image placed on page is complex. Totaltec made the responsive template. In the manual of responsive it says:
"Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing."

If the above is true I wonder how he expects us to set the images to percentages?

It sounds like a good idea, however, how does one implement his idea?

[cflsystems]

The images width/height for the img tag is passed in the template - you can change that to whatever you want.

One thing that may or may not be important - Google SpeedTest will "penalize" if the img tag resizes images with the width/height properties.

[momentum]

Hello cflsystems

I will dig around and see if I can find where to modify that for the images. I am not sure which template I am looking for to set the sizes toe percentages.

It would be nice if the images did re-size if I am using a Iphone. The responsive template works great on the Iphone.

[totaltec]

Can you explain exactly the behavior you are looking for? For instance, do you want the images to size down, or up?

Can you determine a set size that you would like to display for mobile, and a set size for desktop? Or do you want them to scale dynamically to fit the space provided?

Are all of your uploaded images the same size, width and height?And to confirm, are we talking about category images or product images?

I am ready to help.

[momentum]

Hello

I was thinking of making all the images the same for this but some times it is hard.

When I make the images I make the width 200px

And details I make 400px

On the I phone it still looks good but in your instructions you mention the images should be set as the following

Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.

My question is how do you make sure the images are percentages and not px? I thought it would be in the css somewhere?

Not a big deal but just trying to follow along with your great instructions.

[totaltec]

Ah, now I understand. When I made that statement I was referring to images used in your design, or on product pages like in the description. Actual product images have some complicated logic setup, that allows you to control the maximum size of the images from within the admin.

X-cart is designed so that all skill levels can achieve good results, more skilled devs like yourself can dive directly into the templates, and you understand how to properly resize images, not all people do.

I mentioned 350 px because this is the smallest size screen that the template is designed for. Product image sizes are not controlled by CSS currently, to allow the admin side settings to take precedence.

Take a look at /ideal_responsive/customer/main/product.tpl near line 40:

    <div class="image"{if $max_image_width gt 0} style="width: {$max_image_width+12}px;"{/if}>

        {if $active_modules.Detailed_Product_Images and $config.Detailed_Product_Images.det_image_popup eq 'Y' and $images ne ''}

          {include file="modules/Detailed_Product_Images/widget.tpl"}

        {else}

          <div class="image-box">
            {if $active_modules.On_Sale}
              {include file="modules/On_Sale/on_sale_icon_product.tpl" product=$product}
            {else}
            {include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}
            {/if}
          </div>

        {/if}

        {if $active_modules.Magnifier and $config.Magnifier.magnifier_image_popup eq 'Y' and $zoomer_images}
          {include file="modules/Magnifier/popup_magnifier.tpl"}
        {/if}

    </div>

Several things are happening here, first look at "<div class="image"{if $max_image_width gt 0} style="width: {$max_image_width+12}px;"{/if}>"
So we see that the container div for the image is based on the $max_image_width variable, which is based on the actual size of the image.

Next we see "{include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}" This code calls the product thumbnail template, and defines the width and height based on the stored values of the image in the DB.

To make the images "scale" allowing larger images, we need to change both of these lines, and there are a number of ways to do it. One way is to remove the width style from the div container and define the width and height in the CSS, possibly using max-height and max-width. Then we would need to go into the product thumbnail template and remove the code referencing image_x and image_y instead setting these values to be percentage based. An easy trick is to not define both width and height, just define one setting like width, and the height should scale accordingly.

Then you can set the maximum width for that div container using CSS, and you can define it specifically for the different style sheets and thereby screen sizes. Make sense?