Hi,
Does someone knows how to add a "data-src" (not src-set) attribute for the Featured products / Latest Products images in the Homepage ?
I added a custom lazy-load on my site, but need to set a data-src on those pictures. I saw I could edit this file products.php in :
- /components/com_virtuemart/sublayouts/,
- line 72
- And this code "echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);"
This part is kinda obscure to me ;)
I already tried to install an extension but it just doesn't work for me (http://extensions.joomla.org/extension/lazy-load-for-joomla).
Thanks for your help ^^
src-set attribute ???
You can retrieve the thumbnail image URL using $product->images[0]->getFileUrlThumb(). You can build your own image display HTML with desired attributes.
Example:
<img src="<?php echo JUri::root(true) . '/' . $product->images[0]->getFileUrlThumb() ?>" class="browseProductImage" src-set="anything-you-need" border="0" />
Note: If thumbnail image is missing then $product->images[0]->getFileUrlThumb() will return an empty value. In that case you will have to set your own custom url for "No Image".
I don't understand what you mean with "src-set attribute".
But lazy loading need most time some CSS/html changes to have a correct render.
Your lazy loading plugin seems not compatible for Virtuemart 3, but i don't tested it.
Quote from: Studio 42 on November 24, 2015, 21:41:21 PM
src-set attribute ???
My bad it's data-src, not src-set...
Quote from: Studio 42 on November 25, 2015, 00:15:02 AM
I don't understand what you mean with "src-set attribute".
But lazy loading need most time some CSS/html changes to have a correct render.
Your lazy loading plugin seems not compatible for Virtuemart 3, but i don't tested it.
I did mistake, src-set is for responsive design (load different pictures with optimized sizes for different devices).
I tried it too and it just doesn't show the pictures at all, that why I have to use my own custom script.
Quote from: Jumbo! on November 24, 2015, 22:47:55 PM
You can retrieve the thumbnail image URL using $product->images[0]->getFileUrlThumb(). You can build your own image display HTML with desired attributes.
Example:
<img src="<?php echo JUri::root(true) . '/' . $product->images[0]->getFileUrlThumb() ?>" class="browseProductImage" src-set="anything-you-need" border="0" />
Note: If thumbnail image is missing then $product->images[0]->getFileUrlThumb() will return an empty value. In that case you will have to set your own custom url for "No Image".
Thanks a lot for your help, I'll try your code later ^^
And if there are no values it's ok too because the img path will call a blank file instead :)
So after correction (data-src, instead of src-set), the code should be :
<img src="/img/blank.gif" class="browseProductImage" data-src="<?php echo JUri::root(true) . '/' . $product->images[0]->getFileUrlThumb() ?>" border="0" />The script simply get the picture's path in "data-src" and put it to the "src" attribute so I replaced some of your code too :)
For google, it's always better to use the real thumb in src and set alternatives(big) images in data-src.
Quote from: Studio 42 on November 26, 2015, 17:52:05 PM
For google, it's always better to use the real thumb in src and set alternatives(big) images in data-src.
It is not entirely correct. Yes, you need to share the correct product image URL with Google. But you can still use Lazy loading and does not need to load the product image directly into your site just for Google. You can simply use schema markups in your products and use
meta itemprop to let Google know all relevant information.
Example:
<meta itemprop="image" content="<?php echo JUri::root(true) . '/' . $product->images[0]->getFileUrlThumb() ?>"/>Google actually will love if you provide them the url of the large image but not of the thumbnail image. Therefore you can actually use
<meta itemprop="image" content="<?php echo JUri::root(true) . '/' . $product->images[0]->getUrl() ?>"/>More info on Schema markups for Product - https://schema.org/Product
Hi,
I don't speak specific for products or articles, i know how to use Google metas.
This is in general for mobile validity check and render test by google bot. It's the same problem as the robots.txt. Google check more each year for the final note and rank.
And another problem is when a user disable javascript, screenshot for some website directories or you have an error in js ...
Google's own PageSpeed Module recommends Lazy loading - https://developers.google.com/speed/pagespeed/module/filter-lazyload-images?hl=en So I will stop here. :)
Quote from: Jumbo! on November 27, 2015, 13:04:09 PM
Google's own PageSpeed Module recommends Lazy loading - https://developers.google.com/speed/pagespeed/module/filter-lazyload-images?hl=en So I will stop here. :)
This is another think. for image not in view port and can only be applied server side.
I haven't replied for a while, but I can confirm that the modification works :)