Author Topic: True size thumbnails  (Read 821 times)

be2inas

  • Beginner
  • *
  • Posts: 7
  • A beginner
True size thumbnails
« on: October 29, 2015, 09:52:54 am »
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

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3656
  • using Matomo instead of Google Analytics
Re: True size thumbnails
« Reply #1 on: October 29, 2015, 23:43:35 pm »
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.
Non-English Shops: Are your language files up to date?
http://virtuemart.net/community/translations

be2inas

  • Beginner
  • *
  • Posts: 7
  • A beginner
Re: True size thumbnails
« Reply #2 on: November 02, 2015, 09:51:35 am »
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

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 9729
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 3.6.8
Re: True size thumbnails
« Reply #3 on: November 02, 2015, 11:39:52 am »
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
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 27778
  • Always on vacation
    • Jenkin Hill Internet
Re: True size thumbnails
« Reply #4 on: November 02, 2015, 12:20:28 pm »
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.
Kelvyn

Jenkin Hill Internet,
Lowestoft, Suffolk, UK

Unsolicited PMs/emails will be ignored.

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Currently using VM 3.8.4.10335 on Joomla 3.9.19 PHP 7.3.18

be2inas

  • Beginner
  • *
  • Posts: 7
  • A beginner
Re: True size thumbnails
« Reply #5 on: November 02, 2015, 13:07:52 pm »
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

  • Beginner
  • *
  • Posts: 7
  • A beginner
Re: True size thumbnails
« Reply #6 on: November 02, 2015, 13:18:13 pm »
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

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 9729
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 3.6.8
Re: True size thumbnails
« Reply #7 on: November 02, 2015, 14:18:12 pm »
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
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

be2inas

  • Beginner
  • *
  • Posts: 7
  • A beginner
Re: True size thumbnails
« Reply #8 on: November 02, 2015, 14:47:07 pm »
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

  • Beginner
  • *
  • Posts: 7
  • A beginner
Re: True size thumbnails
« Reply #9 on: November 02, 2015, 15:23:28 pm »

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

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3656
  • using Matomo instead of Google Analytics
Re: True size thumbnails
« Reply #10 on: November 02, 2015, 21:30:40 pm »
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.
Non-English Shops: Are your language files up to date?
http://virtuemart.net/community/translations

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10070
  • VM3.2 Cached and Optimized
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: True size thumbnails
« Reply #11 on: November 03, 2015, 12:31:57 pm »
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]
function displayMediaThumb($imageArgs='',$lightbox=true,$effect="class='modal' rel='group'",$return = true,$withDescr = false,$absUrl = false, $width=0,$height=0)

so this
Code: [Select]
echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);

becomes

Code: [Select]
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.
I should fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

be2inas

  • Beginner
  • *
  • Posts: 7
  • A beginner
Re: True size thumbnails
« Reply #12 on: November 04, 2015, 14:06:17 pm »
Great, thanks. Will definitely try that out. Are your changes already in the repository?