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

Hello,

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

Basic translations for 14 languages

https://github.com/getgrav/grav-skeleton-receptar-site

1. I know the Slider is handled on the site.yaml file, not via the Admin Module:
   YAMLCopy

   
   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

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.

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>

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

@q3d:
Placing slider data in the site.md file is not a very flexible solution. ...

I agree with you 👍.
Regards
joejac

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.

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

@q3d:
subdirectories for each slide, e.g., pages/slider/01._slide-1, pages/slider/02._slide-2

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.

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.

I'm glad I could help! 😊 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 😉

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!