Svg elements are not displayed inside button elements

[01Kuzma]

Hi! I'm exploring your online demo. There all buttons do have SVG elements inside. How do you achieve it? Such markup I'm getting with default settings.

Thanks!

[Karmalakas]

If you check the CSS for that element, you'll see it comes from a background image

That's a default plugin style.

[01Kuzma]

Understood. Thank you! Strange, but default-skin.css is absent. I'm loading externally vendor.css with styles for photoswipe. There are those lines of CSS code:

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    background: url(/user/plugins/photoswipe/node_modules/photoswipe/dist/default-skin/default-skin.png) 0 0 no-repeat;
    background-size: 264px 88px;
    width: 44px;
    height: 44px;
}
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
        background-image: url(/user/plugins/photoswipe/node_modules/photoswipe/dist/default-skin/default-skin.svg);
    }
    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: none;
    }
}

But icons are missing

The library is initialized with this code:

    {{ photoswipe('photoswipe-gallery-id', 'a') }}

    <div id="photoswipe-gallery-id" class="row justify-content-center media-grid-layout">       
        {% for item in page.media.images %}
         <figure class="media-grid-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
            <a href="{{ item.url|e }}" class="gallery-item" data-size="{{ item.width ~ 'x' ~ item.height }}">
                <img src="{{ item.cropResize(500, 250).url|e }}" loading="lazy"/>
            </a>            
         </figure>  
        {% endfor %}
    </div>  

Am I missing something?

[Karmalakas]

Do you have this set to true in plugin config?

built_in_photoswipe_assets: true

I'm not sure where this vendor is coming from. It's not in the plugin. Did you by any chance implement Photoswipe separately as not a plugin? 😕 I don't know what to say. Maybe config is somehow wrong

[01Kuzma]

Yes, it's set to true and everything is set to default:

vendor.css is my custom CSS file, there I have placed CSS instructions from your demo for a test purpose, such as:

Did you by any chance implement Photoswipe separately as not a plugin? No, I don't

[Karmalakas]

Does it work correctly without your custom CSS? If so, you'd need to enable/disable styles one by one and check what's happening. Without seeing live example it's very difficult to advise something 🤔

[01Kuzma]

Thank you for your support! I've tested on fresh Grav installation, so the problem was in {{ assets.css()|raw }}, I had to place it to {% block assets deferred %} block. So, now photoswipe.css and default-skin.css are loaded, previously they were absent. Based on that markup it seems that I should make some CSS rework:

but the main problem has been solved :) Thank you!