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: Gry niezależne na Nintendo Switch | nindyki.pl
@anon76427325 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).
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 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 %}
@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 (blog.md) 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/lightslider.md 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 (blog.md) 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/lightslider.md with the following content copied from the lightslider documentation:
---
title: Slider Content
routable: false
visible: false
lightslider:
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 %}
48
49 {% include 'modular/lightslider.html.twig' with {'page': page.find('/slider')} %}
50
51 {# Added support for modular page content - hibbittsdesign.org #}
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.
@anon76427325 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.
@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.
).
Any suggestions?