Different Language for Lightslider

Support Plugins
#1

Hello everyone,

I just took over a Grav page from our coder who build the website but sadly quit some days ago. As I am no coder myself but a designer I am trying to work myself into how our page works at the moment until we find someone new to take over the technical part of the website.

While working on the website I came around a problem I was not able to solve myself and while doing research I did not find anything helpful (this may be because I am not familiar with the topic that much). So it would be awesome if you could help me trying to fix this :slight_smile:

I implemented the light slider plugin to showcase some images on a modular page. But I do not know how to make this plugin work with the langswitcher plugin. As there is text in the images I need to show different Images for the different languages.

I am using a modular element called ‘lightslider.md’ and tried to make a copy and rename them as ‘lightslider.de.md’ and ‘lightslider.en.md’ but this just resulted in the slider not showing up anymore.

So how can I make the slider in different languages?

I cannot link the page as I am working on a local copy atm.
If you need any more details, I will gladly provide them! :slight_smile:

Thanks
Tristan

#2

Don’t remember now exactly, but either system.yaml or site.yaml in /user/config folder should have a setting how MD files are treated for multi-language. From your description I’d guess that default language will be lightslider.md and second (if it’s en) - lightslider.en.md (note only second language has language abbreviation in file name)

Also plugin link would be nice, because - again from what you say - I guess it takes all files uploaded to that page. But that needs more investigation in plugin’s code or maybe plugin’s description mentions that. Maybe plugin can accept media defined in page frontmatter - don’t know without knowing the exact plugin.

To get to know Grav better, you can check the docs

#3

Hello Karmalakas,

first let me thank you for the quick response!

My other files are titled ‘modular.de.md’ for the German version and ‘modular.en.md’ for the english version (with modular as an example for a module title). This is why I tried to use ‘lightslider.de.md’ and ‘lightslider.en.md’. But this does not work. In the system.yaml file it says:

languages:
  supported:
- de
- en
  default_lang: de
  include_default_lang: true
  pages_fallback_only: false
  translations: true
  translations_fallback: true
  session_store_active: false
  http_accept_language: true
  override_locale: false

This is the link where I got the plugin from: https://github.com/getgrav/grav-plugin-lightslide

So for the plugin to work I put the lightslider.md file and the images into one folder. So if I wanted to make the plugin use different images I would need to tell it which images to use for a specific language as well, I guess.

Bildschirmfoto 2021-03-03 um 11.20.12
Bildschirmfoto 2021-03-03 um 11.20.12846×310 53.2 KB

#4

@TristanKonrad, I’ve downloaded plugin LightSlider and played a bit with it…

I’m using a fresh Grav ‘One-Page Site’ skeleton which contains a modular page.

Steps:

  • To enable languages en and de I’ve added the following to 'user/config/system.yaml`
    languages:
  supported: [de, en]
  • Copied file ‘user/plugins/lightslider/lightslider.yaml’ to ‘user/config/plugins’ and changed property ‘slider_type’ to ‘image’.
  • Created files lightslider.en.md and lightslider.en.md in folder of child module.
  • Added images image.en.jpg and image.de.jpg in same folder
  • Folder structure:
    user/pages
└── 01.home
    ├── ...
    ├── 05._slider
    │   ├── image.de.jpg
    │   ├── image.en.jpg
    │   ├── lightslider.de.md
    │   └── lightslider.en.md
    ├── modular.de.md
    └── modular.en.md
  • Installed plugin LightSlider: $ bin/gpm install lightslider
  • Opened file /user/plugins/lightslider/templates/modular/lightslider.html.twig and replaced lines 70-81 with:
    <ul id="{{ unique_id }}">
   {% for image in page.media.images %}
      {# Check if url of image contains '.de.' or '.en.'  #}
      {% if '.' ~ grav.language.getActive ~ '.' in image.url %}
         {% if settings.gallery %}
            {% set image_data_thumb = 'data-thumb=\"'~image.cropResize(settings.gallery_thumb_width|default(100),settings.gallery_thumb_height|default(100)).url~'\"' %}
         {% endif %}
         <li {{ image_data_thumb }}>
            <img src="{{ image.url }}" />
         </li>
      {% endif %}
   {% endfor %}
</ul>
    What does it do? I’ve added an if-statement that checks if the url of the images contains the current language.
  • When browsing the page, the images with the current language extension should be shown in the slider.

Update:
After investigating user’s website, it appears the following setting in system.yaml caused images not to appear:

images:
  cache_all: true  # Works fine when false

After setting the value to false image appear as expected.

1 Like
#5

Yes, what @pamtbaau posted :slight_smile: Just checked the plugin and it seems by default it does not support multi-language images and takes every image uploaded to page.

1 Like
#6

Hello pamtbaau,

Thank you very much for the response and the in depth answer!

I tried to make this work in my installation, but I don’t seem to get it right :confused:
When using a text slider it seems to work and the differentiation between ‘lightslider.de.md’ and ‘lightslider.en.md’ seems to work.

But if I try to use the slider_type: image the page just shows a blank spot. Interestingly the desired outcome did show up once, but when I switched the languages it did not show up anymore (in both languages). This I do not understand :confused:

<ul id="{{ unique_id }}">
    {% for image in page.media.images %}
        {% if '.' ~ grav.language.getActive ~ '.' in image.url %}
            {% if settings.gallery %}
                {% set image_data_thumb = 'data-thumb=\"'~image.cropResize(settings.gallery_thumb_width|default(100),settings.gallery_thumb_height|default(100)).url~'\"' %}
            {% endif %}
            <li {{ image_data_thumb }}>
                <img src="{{ image.url }}" />
            </li>
        {% endif %}
    {% endfor %}
</ul>

This is how I inserted it into the lightslider.html.twig

Am I doing something wrong?

#7

Here you can see the folder structure I am using:

Bildschirmfoto 2021-03-03 um 14.24.50

and this is the code from inside the lightslider.de.md

title: Slider Content EN
routable: false
visible: false
lightslider:
    slider_type: image
    type_text_vertical_padding: 70px;
    type_text_horizontal_padding: 50px;
    type_text_brightness: -100
    mode: slide
    auto: 'false'
    pager: 'true'
    controls: 'true'
    keyPress: 'true'
    enableTouch: 'true'
    loop: 'true'
    speed: '1000'
    pause: '5000'
    pager: 'false'
    pauseOnHover: 'true'
#8

@TristanKonrad, All is well on this side using your code and frontmatter.

Would you mind showing the HTML that is being generated for the element <ul id="<some id>" class="lightSlider ...">?

NB. Kind request to not use screenshots because they are sometimes hard to read/interpret and certainly cannot be copy/paste-d.

#9

@pamtbaau

I am sorry I did not think about this. I will try not to use screenshots anymore.

Do you mean this html?

<div id="ls-fz8A0QbPmk-wrapper" class="grav-lightslider">
    <div class="lSSlideOuter ">
        <div class="lSSlideWrapper usingCss">
            <ul id="ls-fz8A0QbPmk" class="lightSlider lsGrab lSSlide" style="width: 0px; transform: translate3d(0px, 0px, 0px); padding-bottom: 0%;">
                ::before
                ::after
            </ul>
            <div class="lSAction" style="display: none;">
                <a class="lSPrev"></a>
                <a class="lSNext"></a>
            </div>
        </div>
        <ul class="lSPager lSpg" style="margin-top: 15px;"></ul>
    </div>
</div>
#10

@TristanKonrad, Yes, that’s the HTML I was looking for. Clearly, no list of images has been created. That means, it either did not find any, or non passed the newly added if-statement…

Q: Did you use $ bin/grav cache between the changes to clear the cache of Grav?

I would like to test if any image is being loaded. Do you know how to use Clockwork in the browser?

If so, would you mind changing lines 70-71 in ‘lightslider.html.twig’ into:

<ul id="{{ unique_id }}">
    {{ dump(page.media.images|length) }}
    {% for image in page.media.images %}
        {{ dump(image.url) }}

Or if you’re not familiar with Clockwork, you could use var_dump() instead of dump().

var_dump() will ‘dump’ the values into the slider itself as strings with at the end of the string a value. The first slide would contain the number of images found. The other strings will show the url of the images.
Above test will tell if any images are ‘seen’ by the slider and what their url is.

#11

Hello @pamtbaau

I am very impressed as how deep you are going into my problem. Thank you very much for that! :slight_smile:

I did not cache Grav as I did not know this was necessary (as I mentioned I am fairly new to this). How do I do this? I tried to run the command in the terminal but it said “command not found: $” So where can I reset the cache?
I am running the Grav page in a docker (if this is necessary to know) that was installed by our former coder.

I am not familiar with clockwork plugin, so I implemented the code you provided with the *var_dump’. I am not sure as to where to put it actually as the line numbers are different from yours. In the new code you provided above or in the original code from lightslider?

I substituted the whole are with the code like this. Is this correct?

                        {{ panel|raw }}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
    {% else %}
    <ul id="{{ unique_id }}">
    {{ var_dump(page.media.images|length) }}
    {% for image in page.media.images %}
        {{ var_dump(image.url) }}}
    </ul>
    {% endfor %}
</ul>
{% endif %}

This is what the html of the slider looks like with the code above:

<ul id="ls-BHyNvXpSur" class="lightSlider lsGrabbing lSSlide" style="width: 4860px; transform: translate3d(-344px, 0px, 0px); height: 455.625px; padding-bottom: 0%;">
        ::before
    <li data-thumb="/images/1/9/4/0/f/1940fa899122c6f62bad50aae04c17df0f845dbc-image02en.jpeg" class="clone left" style="width: 810px; margin-right: 0px;">
            <img src="/images/2/8/f/8/6/28f8609fb67e0549f0e68cdd2fe7990b81fcb84a-image02en.jpeg"></li>
    <li data-thumb="/images/0/9/0/5/8/09058362a9fea0ee42583ef1fb8ddf06397d4004-image01de.jpeg" class="lslide active" style="width: 810px; margin-right: 0px;">
            <img src="/images/a/1/a/4/6/a1a4675f1aba0d658ed4579a0de0fb562a3f8310-image01de.jpeg"></li>
    <li data-thumb="/images/4/3/7/1/1/437117d017213c3ec036071b0f5bf220ca55196c-image01en.jpeg" class="lslide" style="width: 810px; margin-right: 0px;">
            <img src="/images/4/c/4/a/6/4c4a65f5ea0e8b5c39b5176db74f67a4f233a34a-image01en.jpeg"></li>
    <li data-thumb="/images/0/4/c/4/f/04c4f301c1bcfb8e160a8902061f04e340658393-image02de.jpeg" class="lslide" style="width: 810px; margin-right: 0px;">
            <img src="/images/0/1/4/3/c/0143c7c24e5cb070b8dd08a14dbb01d6264d7d24-image02de.jpeg"></li>
    <li data-thumb="/images/1/9/4/0/f/1940fa899122c6f62bad50aae04c17df0f845dbc-image02en.jpeg" class="lslide" style="width: 810px; margin-right: 0px;">
            <img src="/images/2/8/f/8/6/28f8609fb67e0549f0e68cdd2fe7990b81fcb84a-image02en.jpeg"></li>
    <li data-thumb="/images/0/9/0/5/8/09058362a9fea0ee42583ef1fb8ddf06397d4004-image01de.jpeg" class="clone right" style="width: 810px; margin-right: 0px;">
            <img src="/images/a/1/a/4/6/a1a4675f1aba0d658ed4579a0de0fb562a3f8310-image01de.jpeg"></li>
    ::after
</ul>
#12

@TristanKonrad,

Cache
You don’t need to cache Grav, Grav will do that for you… :slight_smile:

To clear the cache:

  • open the terminal
  • change directory to the root of Grav (that’s the folder containing folders ‘system’, ‘user’, etc)
  • run bin/grav cache
    The ‘$’ represented the command prompt and should not be typed as part of the command.

After each change in the template of LightSlider, you’ll need to clear the cache.

Code
The code with the var_dump hasn’t been copied correctly. But funnily enough, the HTML you showed does show all the images in the folder. It shouldn’t though, considering the pasted code, but since you didn’t clear the cache, the old code is running.

I’m afraid this is going to be a long thread… I’ll send you a PM to take this offline.

1 Like