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 
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!
Thanks
Tristan
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
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.
@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
Yes, what @anon76427325 posted 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
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 
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
<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?
Here you can see the folder structure I am using:
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'
@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.
@anon76427325
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>
@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.
Hello @anon76427325
I am very impressed as how deep you are going into my problem. Thank you very much for that!
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>
@TristanKonrad,
Cache
You donât need to cache Grav, Grav will do that for youâŚ
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
