True size thumbnails

[be2inas]

Hello,

I came here from Drupal + eCommerce environment. Virtuemart attracted me with much simpler product custom editable fields implementation. Doing it in eCommerce is pain in the ass. Especially color/materials pickers with price impact. But my problem with Virtuemart (v3) is this. It generates thumbnail file ONLY of one size and resizes it with CSS in product listing, gallery thumbnails etc. At least thats what my research of this forum gave me. This is not acceptable, bad even. Google page speed checker tool will surely complain about it, especially on mobile since most templates now are responsive, because browser have to load all big images instead of smaller dedicated ones. With larger product listings this will impact SEO.
My question is : is there easy way to fix this (with free/paid extension) not touching the core image class? Also automatic cropping will be nice. I'v found some paid gallery extensions that does this the right way, but its half a deal.
Thanks

[jjk]

Did you install VirtueMart already? Concerning images it does a pretty good job in Google. (I operate an art gallery website). If I have some spare time tomorrow, I'll post some tips in this forum thread...
On my gallery website all images have a predefined size - no css resizing.

[be2inas]

On my gallery website all images have a predefined size - no css resizing.

That' why you are good with Google . Could you post a link to your gallery? Maybe you are using some third party plugins?
As far as I can see, its not a theme thing (I am using Vina Simplicity based on Helix3 framework), its in Virtuemart core. Maybe someone from dev team could confirm that.

[GJC Web Design]

I can confirm that there is atm only a single size of thumbnail used everywhere within VM... 
I know of no 3rd party ext. to allow multiple thumb size like Wordpress etc

[jenkinhill]

VM uses 2 sizes of images. The thumbnail (at whatever size you set in Configuration/Templates) and a "full size" image, ie the image that was uploaded.  The thumb is used in the category list display, related products etc and the full size image in product details. This is sized by css on the page, and the full image displayed in in lightbox, but if this image is bigger than the browser window then it, too will be resized by css.

I normally upload images at 800px width, the thumbs are sized to suit the template when viewed in a normal browser window. This works very well, no Google penalties. Using the same thumb image saves load times as it is usually cached in the browser. And of course, using css for image sizing is essential in responsive templates to give the best shopping experience for mobile users.

[be2inas]

Like I said, I came from Drupal environment. Every image in CCK environment (lists, product displays etc.) has its own image style, e.g. set of rules to resize/crop image for thumbnail or other use. All styles are created on image upload once. I find that useful. No need for external editing (color correction maybe). Especially if I want to  move a store with 1500+ products. Maybe smaller sized images may be used in Virtuemart with css resize without Google penalty, but resizing definetly stresses mobile browsers. Anyway, I guess, I will have to live with it.

[be2inas]

Using the same thumb image saves load times as it is usually cached in the browser. And of course, using css for image sizing is essential in responsive templates to give the best shopping experience for mobile users.

I agree with  reusing part, but again, user usually chooses to investigate deeper only fraction of product list items, so he needs to look through all these oversized thumbnails. Again, if its close to original - no big deal.

[GJC Web Design]

But what size of thumb are u using?

I generally choose something like 180px to 250px ...   on a good responsive template on a mobile you just show these single column -- full size

on a tablet adjust the number of columns to suit landscape or portrait.. etc

no img resizing involved

If your talking google "penalties" do u mean Google Speed analysis? 

I have only seen it complain about lack of compression on imgs.. (img file size too large for the dimensions in Google humble opinion)   not resizing..  the majority of responsive templates use img. resizing for larger images.. 
Google understands this

[be2inas]

I decided to use thumbnails of product listing size (300px height), these are also used in gallery thumbnails (resized to 130px).  I gues this is Ok for responsive template.
Page load time does affect SEO, only Google knows how much. I quess since big product listings are of true size, google wont blink at it. Bigger problem is preparing 3000+ images for transfer instead of just feeding them to Virtuemart. Like manual states - irfanview is my saviour.

[be2inas]

This one does thumbnails good, and actually it can be used in product listings not only galleries, but its paid and has too much extra features:
http://www.magictoolbox.com/magicthumb/

[jjk]

Could you post a link to your gallery? Maybe you are using some third party plugins?

It's the one listed here: http://forum.virtuemart.net/index.php?topic=110005.msg368594#msg368594
I'm using 175px for the thumbs, 384px for the main product image, 768px for the additional product images (Calendars and books might not use 768px images). No third party plugins for the images.

[Milbo]

With a bit work you can have thumbnails in different size.

The prinzip:
Just set a thumbnail size, browse any product. Change your thumbnail size, browse any product
=> you have two sets of both dimensions.

When you override your layout and change the function displayMediaThumb using the last parameters, then you can use different sizes!

Code Select Expand


function displayMediaThumb($imageArgs='',$lightbox=true,$effect="class='modal' rel='group'",$return = true,$withDescr = false,$absUrl = false, $width=0,$height=0)


so this

Code Select Expand


echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);


becomes

Code Select Expand


echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description, false, 0, 50);


This tries to display a thumb with an height of 50px, if it is not there, it will be created. So in fact, you can completly controll it by the template! you can also omit one value, to let it automatically calculate it, to avoid distortion.


But as jenkinhill explained, we use the strategy to physically load only one size and use for special cases the css resizing. That means it should work in the browse view without resizing, but resizing in product details is usually no problem.


Hmmm, I just noticed that whole thing was not working as expected. Is now fixed, will work in the vm3.0.12 version, then.

[be2inas]

Great, thanks. Will definitely try that out. Are your changes already in the repository?