LightSlider - problems with text mode

Hi! I’ve got this small website of mine where I write about indie games for Nintendo Switch (reviews, previews, interviews, etc.). Site is build on Grav with Quark Open Publishing theme with small modifications on my side. I would like to put slider/carousel which would link to selected articles above the grid with texts. So I decided to do it with LighSlider.

So I’ve installed LighSlider plugin on my site and injected it to a specific place in twig file, but I have some problems with default CSS of it and can’t override it with my own CSS (or I make some stupid mistakes :wink: ).

When I set plugin to image mode everything is fine and slider is on desire height and 100% of width of column. But when I set it to text mode, then everything is messinged up - got some background from the first slide and whole slides are smaller and moved based on “Type Text Vertical Padding” and “Type Text Horizontal Padding” settings (so whole panels are moved, not the text itself). You can see it how it’s rendering here: Gry niezależne na Nintendo Switch |

Can someone please help me how to fix it?

1 Like

@bwanot, Try: $ bin/grav cache as mentioned in Lightslider plugin images not showing on slider_type text

@pamtbaau Unfortunately, clearing cache from Admin Panel doesn’t help (I don’t think I’ve got possibility to do it directly on server from command prompt).

@bwanot, When comparing your site with my fresh Grav 1.7.18 with LightSlider, it seems that the layout of LightSlider in your site is off.

Did you make any changes to the LightSlider?

There seems to be 2 nested LightSliders. The outer with one slide and the inner with 5 slides.

@pamtbaau So there are two instances of LightSlider on my website? That’s strange… How is it possible? Any idea how can I fix it?


I don’t think I’ve got possibility to do it directly on server from command prompt

All providers I’ve worked with (even the 0.50$/month ones) allowed ssh (Secure Shell) with which you can login to the host server and execute OS commands. You might want to ask you provider about this.

That’s strange… How is it possible?

Sorry, I wasn’t paying attention when you were making changes… :innocent:

Any idea how can I fix it?

I have no idea what the root cause could be, so I can only suggest some brute force options:

  • Uninstall and re-install LightSlider.
    Copy default options to ‘/user/config/plugins/lightslider.yaml’.
    Revisit the template where you have included the plugin.
  • If no success, create fresh installation:
    • Login to the control panel of your site
    • Copy your site to a new directory.
    • Start with a fresh install.
    • Copy data within folders below ‘/user’ of old site, step-by-step, into new installation


  • Ideally, use a local development site and do all dev and changes locally.
  • Import your local site into Git to track all changes made over time.
  • Then when happy with the result, copy it to the host.

Okay, so I think I found some clues after uninstalling, installing, creating new modular page for slides, etc. The problem is with Page Template.

If it’s set to LightSlider than it looks how it looks (I mean broken). But when I change it to for example Default then the slider is rendering correctly and it works, but… it breaks the rest of the page :man_facepalming: Any suggestions?

Or maybe there is something wrong with my page’s twig?

{% extends 'partials/base.html.twig' %}
{% set blog_image =[page.header.hero_image] ?:|first %}
{% set collection = page.collection() %}
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
{% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true)  %}
{% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}

{% block stylesheets %}
    {% do assets.addCss('theme://css/bricklayer.css') %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% do assets.add('theme://js/bricklayer.min.js') %}
    {% do assets.add('theme://js/scopedQuerySelectorShim.min.js') %}
{% endblock %}

{% block body %}
    <section id="body-wrapper" class="section blog-listing">

        <section class="container {{ grid_size }}">

        {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
            {% include 'partials/breadcrumbs.html.twig' %}
        {% endif %}

        {% embed 'partials/layout.html.twig' with {blog: page} %}
            {% block item %}
                {% include 'modular/lightslider.html.twig' with {page: page.find('/_lightslider')} %}

                <div class="bricklayer">

                {% for child in collection %}
                    {% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
                {% endfor %}

                {% if show_pagination and config.plugins.pagination.enabled and collection.params.pagination %}
                    <div id="listing-footer">
                        {% include 'partials/pagination.html.twig' with {base_url: page.url, pagination: collection.params.pagination} %}
                {% endif %}

            {% endblock %}

            {% block sidebar %}
                {% include 'partials/sidebar.html.twig' %}
            {% endblock %}
        {% endembed %}
        var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
{% endblock %}

Any ideas how I can make this LightSlider works correctly? So there will be no background and slides would take 100% of div’s width.

@bwanot, Your post is lacking some specific details about what you are exactly doing, which makes it hard to understand your question. Information that might help the audience:

  • What are you trying to achieve. Eg. On the blog page ( I would like …
  • What exactly did you do. Eg. I changed template /user/theme/quark-open-plublishing/templates/blog.html.twig with the following…
  • I’ve created file user/pages/slider/ with the following content.

From looking at your code and comparing it with a downloaded Open Publishing theme, I’m guessing you are displaying a blog page ( and would like to show a LightSlider just above the list of blog items.

To realise the above, I did the following using a fresh download of Open Publishing Skeleton and after upgrading Grav and all plugins/themes:

  • $ bin/gpm install lightslider
  • Created file: user/pages/slider/ with the following content copied from the lightslider documentation:
    title: Slider Content
    routable: false
    visible: false
      slider_type: text
      type_text_vertical_padding: 70px;
      type_text_horizontal_padding: 50px;
      type_text_brightness: -100
      mode: slide
      pager: 'true'
      controls: 'true'
      keyPress: 'true'
      pause: 2000
      speed: 1000
    # Shop Geek Stuff
    ## We have all your **geek** needs covered..
    # SnipCart Powered
    ## **Grav** plus **SnipCart** equals easy shopping
    # A Huge Variety
    ## A great selection of **bits** and **bobs**
  • Added images image-1.jpg, image-2.jpg, image-3.jpg to folder user/pages/slider
  • Copied {% include 'modular/lightslider.html.twig' with {'page': page.find('/slider')} %} from the docs of LightSlider into user/themes/quark-open-publishing/templates/blog.html.twig
    46 {% embed 'partials/layout.html.twig' with {blog: page} %}
    47 {% block item %}
    49 {% include 'modular/lightslider.html.twig' with {'page': page.find('/slider')} %}
    51 {# Added support for modular page content - #}
  • Browsed to the home page of Open Publishing site and the following was shown:

Note: Please do not update files belonging to a theme or plugin, but instead create an inheriting theme and only make changes in a template copied from the parent theme into your child theme.


@pamtbaau Thank you for breaking it down into individual points - that way I found the problem and solve it.

First of all I was trying to do it thru Admin panel - I created a modular page with all necessary setup (so I had folder with slider with “_” in the name of it). And it worked as I have written in my first posts. But when I created it manual directly on my server as you did (so created folder manually, copied files and edited the md file as yours) then everything is working like a charm.

Thank you very much for your help!

@bwanot, By using user/pages/_slider (note the underscore) you are telling Grav it is a modular page and hence Grav will use template user/plugin/lightslider/templates/modular/lightslider.html.twig to format the page.

The statement {% include 'modular/lightslider.html.twig' with {'page': page.find('/_slider')} %} is now including the lightslider template with a page formatted using the lightslider template… Hence the nested lightsliders.