photoswipe.js is not loading

[01Kuzma]

Hi, I've read the issue regarding modular page. And it seems that I'm making everything correctly. But the main photoswipe js library is not loading, I'm getting pluginPhotoswipe is not defined error in console. Modular page has Never Cache Twig turned on. And in that template I have placed init code: Grav 1.7.28 version, and I'm testing it locally

Any suggestions?

Thanks!

[Karmalakas]

I doubt I will be able to get to this for at least two weeks (unless something changes)

In the meantime, could you try moving {{ photoswipe('photoswipe-gallery-id', 'a') }} part to the /templates/modular.html.twig template itself and see if that helps as a workaround? I remember I already had to deal with modular pages, but can't recall which plugin and what's the solution 🙁

[Karmalakas]

Ah.. It's the exact same plugin 🙂 There's a known issue (follow the link on #3), just didn't find time to add it to README

[Karmalakas]

Do you have Never cache Twig on modular parent or on module page? It should be on the parent IIRC

[01Kuzma]

Yes, the never cache is enabled That's strange... a while ago it has disappeared, but now I'm still struggling with this error :/ Browser cache clean doesn't help...

Also there is another problem, it appeared before pluginPhotoswipe is not defined error (as for a short moment once the library was loaded ), but I thought that it was related to the main problem. So, all UTF-8 characters/encoding is broken once photoswipe is called - {{ photoswipe('photoswipe-gallery-id', 'a') }}. take a look:

As I'm debugging it on a local machine the Cache is turned off, no CSS or JS pipelines turned on

A little update. I'm trying to debug the PhotoswipeExtension.php. All parts with if statements are true, but the assets are not added. Except inlineJS.

[Karmalakas]

I see this page has a redirect to informacija. Does that page have cache enabled? What's happening there with that redirect?

[01Kuzma]

It's a more kind of workaround for the menu. The website is one-page, so this redirect option with it's variable is used to build a menu. Turning it off doesn't change the behaviour of PhotoSwipe library...

[Karmalakas]

Just tested on fresh Grav + Admin install (Grav v1.7.29; Admin v1.10.29) Copied user/plugins/photoswipe/templates/photoswipe.html.twig to user/themes/quark/templates/modular/photoswipe.html.twig and wrapped to default Quark sections:

{# modular/photoswipe.html.twig #}

{% set grid_size = theme_var('grid-size') %}

<section class="section modular-text {{ page.header.class}} bg-gray">
    <section class="container {{ grid_size }}">
        {% block content %}
            {% set item_id = 'photoswipe-gallery-' ~ random() %}

            {{ photoswipe(item_id, 'a') }}

            <div id="{{ item_id }}">
                {% for item in page.media.images %}
                    <a href="{{ item.url|e }}" class="gallery-item" data-size="{{ item.width ~ 'x' ~ item.height }}">
                        <img src="{{ item.cropResize(500, 250).url|e }}" alt=""/>
                    </a>
                {% endfor %}
            </div>
        {% endblock %}
    </section>
</section>

Noticed that both parent modular and module using Photoswipe needs to have never_cache_twig: true (if both don't have this, on second load assets are not added)

Here's an example of 2 Photoswipe modules and a Text module in between to test UTF-8. Works like a charm 🤔

So in this case parent modular and both modules with Photoswipe have never_cache_twig: true. 3 pages in total have this option set to true

[01Kuzma]

Hm, I had set never_cache_twig: true on a page with the gallery before, now I also have that option set to true on the modular.md (parent) page. Everything is the same :/ I will try to replicate this from a scratch with a fresh GRAV installation...

In order not to create a separate question, tell me please does your implementation of photoswipe support lazy-loading?

For a short period of time, when the gallery loaded temporary I tried adding .loading('lazy') to src: <img src="{{ item.cropResize(500, 250).loading('lazy').url|e }}" alt="item.meta.alt_text"/>

Probably I'm wrong and it doesn't work. Also, I looked at your demo, there are loading="lazy" attributes. Is it a native approach? And could it be set to thumbnails as well?

[Karmalakas]

If you were to get full HTML of an image, you could get it via ...loading('lazy').html() I suppose. But now it's as simple as adding an attribute - <img src="{{ item.cropResize(500, 250).url|e }}" loading="lazy" alt=""/>

BTW, Chrome doesn't play nice with this. Checked on FF and it works fine.

Let me know if you manage to make it work. For now it still seems like a wontfix

[01Kuzma]

Thanks! I will start digging out the problem in the next few days

[01Kuzma]

Still can't figure it out :) Could you please try to install the Hola theme which is available in Themes section, update it to the latest Grav version and place photoswipe in any modular page? For example in Works section replacing the old default photogallery. Then you will see the same problem:

[Karmalakas]

For me this fixes the issue

            {% block assetsjs deferred %}
            {{ assets.js()|raw }}
            {% endblock assetsjs %}

[01Kuzma]

Yes, it seems adding your mentioned code before </head> part fixes one of my several issues :)

Could you explain, why these additional asset calls should be placed?

[Karmalakas]

I believe the magic is with deferred - this makes assets load after everything else was loaded. You don't need to add this as new block. In Hola base template there's already {{ assets.js() }} in head - replace that

BTW, Hola is outdated and not compatible with Grav 1.7. Read Grav upgrade docs - Twig processing has changed and you need to add |raw filter to content and assets

[01Kuzma]

Thank you very much! 👍 Yes, I have already added the |raw filter where it's needed.