Lightgallery: Icons are not rendered

[aitormendez]

Description

Icons of buttons (arrows, close, magnifying glass, etc) are not shown.

Steps to reproduce

JS:

https://github.com/aitormendez/test/blob/main/web/app/themes/sage/resources/scripts/app.js

import lightGallery from 'lightgallery';

let galerias = document.getElementsByClassName('lightbox');

for (let i = 0; i < galerias.length; i++) {
  galerias[i].id = 'gal' + i;
  lightGallery(document.getElementById('gal' + i), {
    selector: 'a',
  });
}

CSS:
https://github.com/aitormendez/test/blob/main/web/app/themes/sage/resources/styles/app.scss#L7

@import "~lightgallery/scss/lightgallery-bundle.scss";

Test site:

http://test.e451.net/2021/06/06/hello-world/

Additional context

Sage 10 WordPress starter theme

[sachinchoolur]

Hey @aitormendez ,

Looks like the fonts and images are not fetching from the correct path.
For now, try configuring font and image path in scss variable

$lg-path-fonts: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts';
$lg-path-images: 'https://cdn.jsdelivr.net/npm/[email protected]/images';

in https://github.com/aitormendez/test/blob/main/web/app/themes/sage/resources/styles/app.scss#L7

@import 'tailwindcss/base';
@import 'common/global';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

$lg-path-fonts: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts';
$lg-path-images: 'https://cdn.jsdelivr.net/npm/[email protected]/images';

@import "~lightgallery/scss/lightgallery-bundle.scss";

I'll investigate and get back you

[sachinchoolur]

@aitormendez ,

Based on the discussion, it looks like either you need to copy the lightGallery fonts and images folder to your project or use any plugins like https://github.com/bholloway/resolve-url-loader when you import scss from node_modules

Please re-open if you think this needs to be managed from the library itself

[aitormendez]

I'm not sure what the cause is, so I'll keep the issue closed. Just in case:

Sage 10 already has Laravel mix, wich includes resolve-url-loader.

https://github.com/JeffreyWay/laravel-mix/blob/master/package.json#L136

[sachinchoolur]

Maybe it's worth checking with the sage team as well