Author Topic: WebP image support for FancyBox  (Read 2871 times)

sandomatyas

  • Jr. Member
  • **
  • Posts: 327
WebP image support for FancyBox
« on: June 02, 2021, 14:59:44 pm »
There are several extensions which convert the site images to WebP format, e.g: https://dj-extensions.com/dj-webp
It does work with VirtueMart as well, except the Fancybox modal where you'll get the source of the image.
If you check components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js there is a code part like this:
Code: [Select]
J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/iif yout add webp here, it does work
Code: [Select]
J=/\.(jpg|gif|png|bmp|jpeg|webp)(.*)?$/iCould you please add this to the js file so a VM update won't remove my modification.

Jumbo!

  • 3rd party VirtueMart Developer
  • Full Member
  • *
  • Posts: 751
  • Full-stack Web Developer
    • www.virtueplanet.com
  • VirtueMart Version: Always latest
Re: WebP image support for FancyBox
« Reply #1 on: June 02, 2021, 18:02:23 pm »
Instead of modifying the original file, you can override it by copying the file to your template - templates/YOUR-TEMPLATE/js/fancybox/jquery.fancybox-1.3.4.pack.js

That way the file will never be overwritten by future VirtueMart updates.

sandomatyas

  • Jr. Member
  • **
  • Posts: 327
Re: WebP image support for FancyBox
« Reply #2 on: June 03, 2021, 09:22:11 am »
Agree, but in this case other users won't have WebP support.

jjk

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3733
  • using Matomo instead of Google Analytics
Re: WebP image support for FancyBox
« Reply #3 on: July 05, 2021, 22:58:08 pm »
Personally, I will ignore WebP and wait until JPEG XL is supported by all major browsers.   ;)
Non-English Shops: Are your language files up to date?
http://virtuemart.net/community/translations

Andrew Smith

  • Beginner
  • *
  • Posts: 22
  • A beginner
Re: WebP image support for FancyBox
« Reply #4 on: July 07, 2021, 08:49:36 am »
Say nothing of Jpeg2000.   8) :P

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10134
  • VM3.9 Eagle Owl
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: WebP image support for FancyBox
« Reply #5 on: July 26, 2021, 22:13:38 pm »
There are several extensions which convert the site images to WebP format, e.g: https://dj-extensions.com/dj-webp
It does work with VirtueMart as well, except the Fancybox modal where you'll get the source of the image.
If you check components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js there is a code part like this:
Code: [Select]
J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/iif yout add webp here, it does work
Code: [Select]
J=/\.(jpg|gif|png|bmp|jpeg|webp)(.*)?$/iCould you please add this to the js file so a VM update won't remove my modification.

thank you, I am going to add that.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10134
  • VM3.9 Eagle Owl
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: WebP image support for FancyBox
« Reply #6 on: July 26, 2021, 22:14:09 pm »
Instead of modifying the original file, you can override it by copying the file to your template - templates/YOUR-TEMPLATE/js/fancybox/jquery.fancybox-1.3.4.pack.js

That way the file will never be overwritten by future VirtueMart updates.
We need the knowledge in the team. not somewhere.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10134
  • VM3.9 Eagle Owl
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: WebP image support for FancyBox
« Reply #7 on: July 26, 2021, 22:14:30 pm »
Agree, but in this case other users won't have WebP support.
Thank you for choosing this way.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10134
  • VM3.9 Eagle Owl
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: WebP image support for FancyBox
« Reply #8 on: July 26, 2021, 22:15:26 pm »
Personally, I will ignore WebP and wait until JPEG XL is supported by all major browsers.   ;)
Better tell me the extension to add
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

jjk

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3733
  • using Matomo instead of Google Analytics
Re: WebP image support for FancyBox
« Reply #9 on: July 26, 2021, 23:57:47 pm »

Better tell me the extension to add

.jxl
But I would suggest to wait with implementing that until the major browsers move their support from experimental to 'enabled by default'. I think Mozilla will do so with Firefox 92.
If you want to convert one of your images to the .jxl format for testing if your browser can display it already, you may use this converter: https://mconverter.eu/
Non-English Shops: Are your language files up to date?
http://virtuemart.net/community/translations

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4489
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: WebP image support for FancyBox
« Reply #10 on: July 27, 2021, 13:49:51 pm »
If you support WEBP in fancybox, please support uploading and resizing webp images.
And SVG should also be supported(no need to resize, but need the right link)
Thanks

arcturus

  • Jr. Member
  • **
  • Posts: 119
  • VirtueMart Version: 3.8.9 10514
Re: WebP image support for FancyBox
« Reply #11 on: July 27, 2021, 15:15:17 pm »
Compatibility with browsers that do not support webp or other extensions can be obtained using <picture> element:

Code: [Select]
<picture>
<source srcset="/path/to.webp" title="Next generation picture title" type="img/webp">
<img src="/path/to.jpg" alt="Compatibility/fallback image" title="Compatibility/fallback image"/>
</picture>

In case a browser cannot display .webp or .jxl formats, there is a fallback.
This would require a bit of work on the VM function that renders images.
Cheers,
George
https://www.proxima-mundi.ro

Currentl using Joomla! 3.9.28 and VM 3.8.9 10514 on PHP 7.4

Andrew Smith

  • Beginner
  • *
  • Posts: 22
  • A beginner
Re: WebP image support for FancyBox
« Reply #12 on: July 27, 2021, 15:59:51 pm »
Given the size of the images used by VM, is the ratio of improvement really worth the effort.  If I'm averaging 60k to 75k for a full size product image (jpg 50% quality in Photoshop save for web, minified further through tinypng.com), then a 15% file size reduction only gets you so far in real terms.

Andrew

razor7

  • Jr. Member
  • **
  • Posts: 355
    • MGSCreativa - Professional VM!
Re: WebP image support for FancyBox
« Reply #13 on: July 27, 2021, 16:11:02 pm »
Cooooool, this topic saved my day! this is just what I was looking for. Hope WebP, SVG and JXL gets supported by VM.
MGS Creativa - VirtueMart Payment Plugin Experts
http://www.mgscreativa.com

Take a look at our downloads section for VirtueMart payment plugins and mouch more!
http://www.mgscreativa.com/en/online-store

hazael

  • Jr. Member
  • **
  • Posts: 53
    • Bi┼╝uteria etniczna i orientalna
  • VirtueMart Version: 3.8.9
Re: WebP image support for FancyBox
« Reply #14 on: July 27, 2021, 22:15:12 pm »
On Virtuemart SVG displays without any problems. Programmers just have to ignore generating thumbnails because it doesn't make sense - SVG is vector graphics. Now, in order not to display errors with thumbnails, it is enough to enter the same address for the thumbnails.