Receptar Skeleton Home page with 2 languages Slider, is it possible? how?

Support Themes & Styling
1

Hello,

  1. In Receptar GitHub pages, in Features, it says:

Basic translations for 14 languages

  1. I know the Slider is handled on the site.yaml file, not via the Admin Module:
slider:
  - image: slide3.jpg
    title: A very delicious blog
    url: "#"
  - image: slide1.jpg
    title: Duis autem
    url: "#"
  - image: slide2.jpg
    title: Pumpkin recipe
    url: "#"

I have no problem with translating the pages; Grav documentation helps a lot, but I do not know how to translate the title of each image slide into the second language; only two languages are needed.

Thanks in advance for any Ideas on resolving this sliderā€™s multi-language title.
Regards
joejac

2

Have you looked at https://learn.getgrav.org/17/content/multi-language#multiple-language-pages.

I will look at this later, if I have some free time.

3

Placing slider data in the site.md file is not a very flexible solution. In my opinion, you should:

  1. Create a directory called pages/slider.
  2. Inside the pages/slider directory, create subdirectories for each slide, e.g., pages/slider/01._slide-1, pages/slider/02._slide-2.
  3. Inside each subdirectory, create files with data for each language, e.g., default.md and default.pl.md.
  4. In each of the files, include the data. For example, in default.md:
---
title: Title EN
image: slide1.jpg
url: #
---

And in default.pl.md:

---
title: Tytuł PL
image: slide1.jpg
url: #
---
  1. Modify the file ā€˜pages/01.blog/blog.mdā€™ and add:
slider:
    items:
      '@page.modules': '/slider'
  1. Modify the file: user/themes/receptar/templates/partials/slider.html.twig, for example:
<div id="site-banner" class="site-banner enable-slider">
  <div class="site-banner-inner">
      {% for slide in page.collection('slider') %}
      {% set image = slide.header.image %}
      {% set url = slide.header.url %}
      <article data-id="post-{{ loop.index }}" class="post-{{ loop.index }} post type-post status-publish format-standard has-post-thumbnail hentry tag-no-excerpt is-featured" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
            {% if image %}
              <div class="site-banner-media">
                <figure class="site-banner-thumbnail" title="{{ slide.title }}" itemprop="image">
                  <img width="1920" height="640" src="{{ theme_url }}/images/slideshow/{{ image }}" class="attachment-receptar-banner size-receptar-banner wp-post-image" alt="{{ slide.title }}"/>
                </figure>
              </div>
            {% endif %}
            {% if slide.title %}
              <div class="site-banner-header">
                <h1 class="entry-title" itemprop="name">
                  <a href="{{ url }}" class="highlight" rel="bookmark">{{ slide.title }}</a>
                </h1>
              </div>
            {% endif %}
      </article>
    {% endfor %}
  </div>
</div>
2 Likes
4

Thank you very much for the time invested in your detailed answer, I will try it.

I agree with you :+1:.
Regards
joejac

5

Thank you, @joejac! My answer is just a suggestion, and Iā€™m sure youā€™ll find the right solution. I often treat ready-made templates as inspiration for my own implementations.

1 Like
6

Hello q3d text and links work perfectly, but images are not taken from their corresponding subdirectories:

This is because images are taken from the original directory under the theme/images which is not available to the user via the admin panel.
src="{{ theme_url }}/images/slideshow/{{ image }}"

<figure class="site-banner-thumbnail" title="{{ slide.title }}" itemprop="image">
                  <img width="1920" height="640" src="{{ theme_url }}/images/slideshow/{{ image }}" class="attachment-receptar-banner size-receptar-banner wp-post-image" alt="{{ slide.title }}"/>
                </figure>

Since each image is in a different subdirectory I can not have a common path, is there a way to solve this or place all images inside the same directory available to the admin panel?

It will not be easier to have all titles, images, and URL data for all the slides inside only one default.en.md file, so we can have a default.es.md, too, with all corresponding titles, images, and URL data inside. If I remember well, the Deliver theme has it in this way, but the slider is different, and that implies modifying a lot of the code, which is pretty difficult for me. Sorry.

7

Ok, solved the images, sorry to get it so slowly, I uploaded all images to the slider directory, and then in user/themes/myinheritedreceptar/templates/partials/slider.html I changed the path to: src=ā€œuser/pages/slider/{{ image }}ā€ is really easy, thanks q3d

<figure class="site-banner-thumbnail" title="{{ slide.title }}" itemprop="image">
                  <img width="1920" height="640" src="user/pages/slider/{{ image }}" class="attachment-receptar-banner size-receptar-banner wp-post-image" alt="{{ slide.title }}"/>
                </figure>

The admin panel has all images inside a single directory: pages/slider.

8

Iā€™m glad I could help! :blush: Thereā€™s always room to improve things; I just tried to help get you started. Depending on your needs, the images could, for example, be placed inside subdirectories within the slider folder, with references dynamically fetched in a loop and in the file: user/themes/receptar/templates/partials/slider.html.twig:

{{ set image = page.media.images|first }}

and then insert the image as described in the documentation.

I canā€™t check or provide a ready solution right now since Iā€™m cooking soup :wink:

9

Thanks q3d,
Guided by your hints I got a compact solution:

  1. I created in /pages/01-home the files: blog.en.md and blog.es.md
  2. In the header of each one I placed the title, image and URL related to each language
slider:
  - 
    image: slide1.jpg
    title: 'Title 1'
    url: "#"
  - 
    image: slide2.jpg
    title: 'Title 2'
    url: "#"
  - 
    image: slide3.jpg
    title: 'Title 3'
    url: "#"
  1. I uploaded all the images to: /pages/01-home
  2. In the template: `user/themes/myreceptarinherit/templates/partials/slider.html.twig I changed line 3 for this:
{% for slide in page.header.slider %}

4.1 I also changed the image path on line 8 to:
{{ base_url_simple }}/user/pages/01.blog/

<img width="1920" height="640" src="{{ base_url_simple }}/user/pages/01.blog/{{ slide.image }}" class="attachment-receptar-banner size-receptar-banner wp-post-image" alt="{{ slide.title }}"/>

Finally, all data and images are accessible via Grav Admin panel.
Thanks a lot.

10

Great solution, @joejac! Organizing the slider content in the header of each language file is a smart, efficient way to manage multilingual content. I think my approach might have been a bit overcomplicated. Your setup makes it easy to edit everything directly through the Grav Admin panel. Thanks for sharing the details!

1 Like