browser based Lazy loading

[devoldski]

Hi Pico developers.

I was wondering if there is an option available today for adding loading="lazy" to images when rendering markdown to utilize the browsers capabilities.

[PhrozenByte]

I'm not aware of any Pico plugin that implements lazy image loading for Markdown contents. You can use it in your Pico theme though. If you need lazy image loading for Markdown contents you'll have to write a Pico plugin. You first create a Parsedown extension (the Markdown parser we use) and then hook into Pico's onParsedownRegistered event to register it.

[devoldski]

thank you. will look into it and let you know if I find a solution.

[mayamcdougall]

Hi there. 👋🏻

Depending on the use case, the simplest way to do this on a case-by-case basis might be to just use HTML tags for the images that need it, not markdown syntax.

There also seems to be an open issue in the Parsedown Extra repo on the subject of adding special attributes to your Markdown elements. The Markdown Extra spec itself suggests that this should be doable by adding {loading=lazy} after your image link, but it's not supported in Parsedown Extra yet.

For a site-wide solution, albeit a much more "hacky" one (therefore, not necessarily recommended), you could run your content through a Twig replace filter. If you did this though, you'd then have to use the raw filter to prevent it from being escaped. This isn't the best idea from a security point of view, but it probably wouldn't cause any real world harm, just keep that in mind.

You'd want to change {{ content }} in your theme to {{ content|replace('<img', '<img loading="lazy"')|raw }}.

This is definitely more of a "brute force" approach, and not really a scalable solution, but it might do in a pinch, especially if you don't know PHP.

I'd be happy to help with that if you need it... just keep in mind all the disclaimers I gave about it being a hacky, brute force, and potentially insecure solution. 😅

Alternatively, if you want to let me know a little more about your use case, I can try to come up with some more personalized advice for you on the matter. 😁

(Looks like I just missed you by a minute here... damn my thoroughness! 😂)

[devoldski]

Thank you for the twig suggestion @mayamcdougall I think i will try to make a plugin for lazy loading and will let you know if I need any help. Also thank you @PhrozenByte for the tip on onParsedownRegistered I will spend a little ime and see if i manage to sort it out.

[devoldski]

I ended up creating this simple plugin which works,

i would appreciate feedback.

Alfa

<?php

/**
 * Pico imageLazyLoad - enable browser based lazy loading
 *
 * @author  Alfa Sommersol
 * @link    http://picocms.org
 * @license http://opensource.org/licenses/MIT The MIT License
 * @version 0.1
 */
class imageLazyLoad extends AbstractPicoPlugin
{
    /**
     * API version used by this plugin
     *
     * @var int
     */
    const API_VERSION = 2;

     /* Triggered when Pico renders the page
     */
  public function onPageRendered(&$output)
    {
      # inserting loading="lazy" in image tags
    $output = str_replace('<img', '<img loading="lazy"', $output);

    }

}

[mayamcdougall]

Very nice. 👍🏻

(Sorry, I'm usually a little quicker to respond, but it seemed like you had everything under control. 😉)

Yeah, if you're comfortable writing a plugin, that's definitely the right way to go. I'm not a PHP developer myself, so I can't really comment on how it should work. @PhrozenByte should be able to give you some feedback when he has time though.

I see you essentially went with my "hacky" solution, but in plugin form. 😂

It's certainly the lazy approach to adding lazy image loading (*wink wink*), but hey, sometimes what's simple works best with Pico. All that matters at the end of the day is getting the job done. 😜

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1: