More images sizes

[quote name=‘zeke’]Regarding my question #1 (Should the original images uploaded for the product be resized? Or we just need to create additional images with proper sizes?)



For example, we uploaded 2 images for the product (thumbnail and detailed image). So, we’ll have the following images:

2 basic images

1 resized thumbnail for the product details page

1 resized detailed image for the product details page

1 resized thumbnail for the product listing page

1 resized thumbnail for the cart page



Totally, 6 images for the product (2 basic and 4 auto-generated). Is it suitable?[/QUOTE]





My question/concern is that will not address still having to load an entire detailed image size on pages that call for a resized detail image.



In your example you are only using this on the Product Details page, however some users (or maybe just me) like to have resized high quality images on other pages. On my home page for example I am loading over 30 products between all the different blocks and I modified them to load a resized detailed image instead of a thumbnail because I needed a size of roughly 300X200.



So now when you load my home page you are downloading the full detailed size image for every product, which is slow. There should be a 3rd image choice. Detailed = Large, Thumbnail = Small, ??? = Medium. We need a 3rd image size, or at least an image size that ISNT attached to the image size on other pages (i.e. 1 resized detailed image for MISC).



Currently Im having to do this to get the image sizes I want



{if $images.detailed.image_x > $images.detailed.image_y}

{assign var=“img_w” value=340}

{math equation=“new_x * y / x” new_x=340 x=$images.detailed.image_x y=$images.detailed.image_y format=“%d” assign=“img_h”}

{else}

{assign var=“img_h” value=214}

{math equation=“new_y * x / y” new_y=214 x=$images.detailed.image_x y=$images.detailed.image_y format=“%d” assign=“img_w”}

{/if}



If you check my homepage they look great, but its a lot to load.

Why we resize all images to the same width and height? Look at this page

[url]Instant Demo - CS-Cart Multi-Vendor Demo Try Free for 15 days



if we resize all images to the same width, the small thumbnails line (under view larger image link) will jump up and down when switching images.



If we resize all images to the same height, the product information block on the right (price, options, etc) will jump when switching images.



Any suggestions?

For mini thumbnails such as these, it would be ok to force a width and height. On detailed images however you would not want to do this.

For example, Newegg does this same thing with their thumbnails



[url]COMPAQ Laptop Presario AMD Athlon II Dual-Core M320 (2.1GHz) 3GB Memory 250GB HDD ATI Radeon HD 4200 15.6" Windows 7 Home Premium 64-bit CQ61-420US - Newegg.com

Ok, it works the same now.

Please also consider the Thumbnail width for the addon blocks on left, central, right column, such as Bestsellers, Recently viewed, also bought.

[quote name=‘zeke’]Why we resize all images to the same width and height? Look at this page

[url]Instant Demo - CS-Cart Multi-Vendor Demo Try Free for 15 days



if we resize all images to the same width, the small thumbnails line (under view larger image link) will jump up and down when switching images.



If we resize all images to the same height, the product information block on the right (price, options, etc) will jump when switching images.



Any suggestions?[/QUOTE]



It is easy, you resize by ratio. Say, you have a space 50x35 pix where a pic must fit…

The usual algorithm would be:



```php

If (width>height){

width=50

height=ratio scaling against width

}else{ // width<=height

height=35

width=ratio scaling against height

} ```

The idea is to make the image fit a preset sized canvas. This will make it much easier to manipulate thumbs design-wise if they will be all of a uniform size.

Hi TexasGuy,

I didn’t know php have this kind of new code: height=ratio scaling against width …lol



Since you are talking about image resize algorithm, please don’t use “php code”. It will make us confusion.

Not really, PHP developers would be able to see that it is a weirdo pseudo code, those who just paste wouldn’t know where and how…



I would do PHP code but it would be a waste, the real implementation would be too distinct.

One more question. It’s possible to select template for products list and product details pages. So, the thumbnail sizes in each template can be different and it’s not good to use global option with sizes.



Suggestions?

No one? Please advise, otherwise we’ll not implement it at all :slight_smile:

[quote name=‘zeke’]It’s possible to select template for products list and product details pages. So, the thumbnail sizes in each template can be different[/QUOTE]If someone wants a 100 x 100 thumbnail then they need to upload a 100 x 100 thumbnail, if they want a 250 x 150 thumbnail then they need to upload a 250 x 150 thumbnail, webmasters need to stop being so lazy in developing and customizing their stores - Sno

It may also a good idea to set thumbnail size with selected template for products list and product details page!



Actually, except global option with sizes, let user define their Thumbnail sizes based on either page blocks or left, central, right column area will be more physical and powerful. I already found some addons thumbnail sizes , such as bestseller, were hard-coded the thumbnail sizes inside the smarty template script. It is so ridiculous! If user like a little bigger size, we have to change the sizes inside smarty script. I am worry about it may cause the upgrade problem, since I didn’t find any hooks inside the code.

After all the discussion, when will this be released to the public? And will it allow me to have one size for my thumbnails and one size for my product details, and a 3rd for the extra large images?

I am using MVE so all our vendors are uploading images themselves which are at all different sizes and shapes.



However, I am wanting to show all the product images on the Category pages at the same size - eg all to be 220x150, cropping the sides/top&bottom of the image off if too large.



Does anybody have any re-coding tips/workarounds??