SRC= to DATA-SRC= converter for lazy loading thumbnails

Hello!
Trying to introduce lazy loading feature on theme's album.php for heavy weighted thumbnails. There are a lot of scripts on the net, helping this approach. Examples: b-lazy responsivelyLazy ...
b-lazy uses following html:

<img class="b-lazy"
         src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
         data-src="images/image.jpg" 
         alt="alt-text"
    />
responsivelyLazy:
<img class="responsively-lazy"
         src="images/image.jpg
                 srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
         data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w"
         alt="alt-text"
    />
Both replacing attribute src with data-src or srcset and data-srcset for lazy needs. How do i use these scripts with ZP functions like printImageThumb()? Here is the example of lazyload converter for WordPress but howto implement it into Zenphoto?

Comments

  • acrylian Administrator
    edited January 11

    You can use:
    1. The filters to alter the html (see the user guide, they should be listsed (like standard_image_thumb_html)
    2. You can build your own image fucntions using the underlying object mode respectively the "get" versions of the functions.

    Besides, lazy loading will be a built in default feature in the next major release (which sadly is still some time ahead).

  • Doctor Kru Member
    edited January 11

    Oh! very simple.. just made a copy of printImageThumb() from template-functions.php to theme/functions.php added data- to src= attribute, changed the name of the function and its working. Thank you!

  • Would you be interested in a plugin that does this on all images (not just ones done by printimageThumb()? I have produced such a plugin and would be interested in someone willing to test it.

    contact me at stephen(@)sbillard.org

  • acrylian Administrator

    If you have a Zenphoto plugin, make it availabe on its own separate GitHub repository for all Zenphoto users to test and use.

    Just using our forum for getting feature ideas and testing them - and even requesting private contact – to be included in your separate fork project is neither polite nor welcome. This is the Zenphoto forum and not your fork’s forum.

    Anyway, future Zenphoto versions will have this functionality built in.

  • Well, it hasn't been tested well yet. (We feel that thorough testing is important.) That is the reason for asking for someone who is interested to help with the testing.

    I am glad that future versions of Zenphoto will have this built in. The list of content for the future version is awesome. So it is just a question of when it will be available. Seems it has been in the pipeline for years now. I assume that is because of the thorough testing you are doing on it.

Sign In or Register to comment.