Author Topic: [SOLVED] Image resize, more variations  (Read 1168 times)

EvanGR

  • Jr. Member
  • **
  • Posts: 199
[SOLVED] Image resize, more variations
« on: September 24, 2018, 09:28:13 am »
Hello,

Virtuemart, by default, offers a single fixed resolution image resize for thumbnails. Have you (the devs) considered including more variations in the future?

With the use of the <picture> element, one can now define multiple resolutions for an image in the browser.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Thanks

StefanSTS

  • Global Moderator
  • Jr. Member
  • *
  • Posts: 313
  • VirtueMart Version: VM 4.2 on Joomla 4.5
Re: Image resize, more variations
« Reply #1 on: September 24, 2018, 09:42:43 am »
VirtueMart has a function to resize the images as per your need.

If you need more resolutions you can adjust your template accordingly. Just check the productdetails view.

You find this in the files:

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

Stefan
--
Stefan Schumacher
www.jooglies.com - VirtueMart Invoice Layouts

EvanGR

  • Jr. Member
  • **
  • Posts: 199
Re: Image resize, more variations
« Reply #2 on: September 24, 2018, 11:45:38 am »
Hello and thanks.

Does this create additional thumbnails in the images folder?
If so, are they re-used next time, if found by subsequent page loads?

Thanks

StefanSTS

  • Global Moderator
  • Jr. Member
  • *
  • Posts: 313
  • VirtueMart Version: VM 4.2 on Joomla 4.5
Re: Image resize, more variations
« Reply #3 on: September 24, 2018, 11:57:59 am »
They will be in the resized/ folder and will be re-used.
--
Stefan Schumacher
www.jooglies.com - VirtueMart Invoice Layouts

EvanGR

  • Jr. Member
  • **
  • Posts: 199
Re: Image resize, more variations
« Reply #4 on: September 26, 2018, 12:13:05 pm »
Thanks again.

How can I tweak this code so that I just generate and use the thumbnail filename, but not display it? (VM creates its own img element)

I like to construct my own custom <img /> elements, with additional lazy-loading code and utilizing the <picture> element for image sets.

StefanSTS

  • Global Moderator
  • Jr. Member
  • *
  • Posts: 313
  • VirtueMart Version: VM 4.2 on Joomla 4.5
Re: Image resize, more variations
« Reply #5 on: September 26, 2018, 18:08:27 pm »
Hi,

never did it that way, but I guess you could call the function for a variable instead of echo'ing it.

$myhiddenimages = $image->displayMediaThumb(... $width, $height);

The thumbs should be generated then and you can access them by name. As I said, I never tried it. Maybe keep vmdebug on and check the messages and memory usage.

Stefan
--
Stefan Schumacher
www.jooglies.com - VirtueMart Invoice Layouts

EvanGR

  • Jr. Member
  • **
  • Posts: 199
Re: Image resize, more variations
« Reply #6 on: October 02, 2018, 08:44:02 am »
Hi,

never did it that way, but I guess you could call the function for a variable instead of echo'ing it.

$myhiddenimages = $image->displayMediaThumb(... $width, $height);

The thumbs should be generated then and you can access them by name. As I said, I never tried it. Maybe keep vmdebug on and check the messages and memory usage.

Stefan

How would I get the filename (and the image URL perhaps) of the generated thumbnail, if I have several variations of them?

Thanks

StefanSTS

  • Global Moderator
  • Jr. Member
  • *
  • Posts: 313
  • VirtueMart Version: VM 4.2 on Joomla 4.5
Re: Image resize, more variations
« Reply #7 on: October 03, 2018, 23:49:00 pm »
Just look in the resized folder inside of the images folders for products, categories and so on.

They have an ending according to their size. So it might be: /way/to/images/virtuemart/product/resized/myimage_90x90.jpg

--
Stefan Schumacher
www.jooglies.com - VirtueMart Invoice Layouts

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 9843
  • VM3.2 Cached and Optimized
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: Image resize, more variations
« Reply #8 on: October 07, 2018, 12:51:14 pm »

How would I get the filename (and the image URL perhaps) of the generated thumbnail, if I have several variations of them?

Thanks

You do not really need it. Just use the function displayMediaThumb and set your desired size and it will be generated on the fly and when it exists already, it will use the already existing one, of course. So you do not need to fuddle around with the different thumbsizes. When you replace or some how change your main media, all thumbs of the media (and maybe some more) will be deleted automatically.
I should fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

GJC Web Design

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 8892
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 3.4.2
Re: Image resize, more variations
« Reply #9 on: October 07, 2018, 14:37:42 pm »
for your lazy load can't u use  $imgthumb = JURI::root() . $product->images[0]->getFileUrlThumb();

the function takes sizes as well

function getFileUrlThumb($width = 0,$height = 0)

haven't tried though
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

EvanGR

  • Jr. Member
  • **
  • Posts: 199
Re: Image resize, more variations
« Reply #10 on: January 18, 2019, 16:00:04 pm »
Hello,

It seems that displayMediaThumb does not generate new thumbnails when I call it from the template file.

e.g. for testing I am doing this..

Code: [Select]
$thumbfile = $product->images[0]->displayMediaThumb("",true,"rel='vm-additional-images'", true, true, false, 280, 280);
$thumbfile = $product->images[0]->displayMediaThumb("",true,"rel='vm-additional-images'", true, true, false, 200, 200);
$thumbfile = $product->images[0]->displayMediaThumb("",true,"rel='vm-additional-images'", true, true, false, 160, 160);


Then I look into the product/resized folder, sort files by last created, and do not see any files with the sizes given above.

Any idea?

[VM3.4.2, Dynamic Image Resizing is turned on in the settings]

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 27432
  • Always on vacation
    • Jenkin Hill Internet
Re: Image resize, more variations
« Reply #11 on: January 18, 2019, 16:38:23 pm »
You do go to tyhe product page where those files are coded to display? The files are generated only when required to display in the frontend.  Or am I mis-interpreting what you are trying to do?
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.4.3.10057 on Joomla 3.9.8 PHP 7.0.33
Testing VM .3.6.0.10075 on Joomla 3.9.8

EvanGR

  • Jr. Member
  • **
  • Posts: 199
Re: Image resize, more variations
« Reply #12 on: January 20, 2019, 09:57:13 am »
The code above is in the product details template file.

There is a problem with my VM setup: the full image sizes are used for product thumbnails. Even though the thumbnails are derived from the /resized/ folder, they are the same size as the original image. And the do not contain any dimensions appended to the filename (e.g. _280x280.jpg).

I am trying to troubleshoot this. Which is why I tried to force the creation of custom thumbnails with the previous code. But that does not work either.

Something broke along the way, and I don't know what.

Note: The /resized/ folder does contain a lot of properly generated thumbnails, but it may be from previous products on earlier VM installations. The current version of VM (3.4 on my test site) does not seem to generate resized thumbnails for me!

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10330
  • VirtueMart Version: 3+
Re: Image resize, more variations
« Reply #13 on: January 20, 2019, 19:23:43 pm »
The code above is in the product details template file.

There is a problem with my VM setup: the full image sizes are used for product thumbnails. Even though the thumbnails are derived from the /resized/ folder, they are the same size as the original image. And the do not contain any dimensions appended to the filename (e.g. _280x280.jpg).

I am trying to troubleshoot this. Which is why I tried to force the creation of custom thumbnails with the previous code. But that does not work either.

Something broke along the way, and I don't know what.

Note: The /resized/ folder does contain a lot of properly generated thumbnails, but it may be from previous products on earlier VM installations. The current version of VM (3.4 on my test site) does not seem to generate resized thumbnails for me!
I believe thumbnail creation needs  "gd library" enabled. Is it enabled on your installation?
J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

EvanGR

  • Jr. Member
  • **
  • Posts: 199
Re: Image resize, more variations
« Reply #14 on: January 21, 2019, 12:51:40 pm »
Yes, GD is installed. I think the problem may be with the specific VM version... I am opening a new thread about this issue...