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 😉 ).

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: https://nindyki.pl/hp-test

Can someone please help me how to fix it?

@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?

@bwanot,

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... 😇

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

Suggestion:

• 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.media.images[page.header.hero_image] ?: page.media.images|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 %}
                </div>

                {% 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} %}
                    </div>
                {% endif %}

            {% endblock %}

            {% block sidebar %}
                {% include 'partials/sidebar.html.twig' %}
            {% endblock %}
        {% endembed %}
        </section>
    </section>
    <script>
        //Bricklayer
        var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
    </script>
{% 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.

@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.