Adding image to twig template from variable

I am trying to define three filenames to be included in a slider.

Filenames are defined in the page as:

slide1: myimage1.png
slide2: myimage2.png
slide3: myimage3.png

And in the Twig template I would like to get something as:

<img src="{{[slide1].url }}" alt="MyPassion" />
<img src="{{[slide2].url }}" alt="MyPassion" />
<img src="{{[slide3].url }}" alt="MyPassion" />

But I am not being able to get the src properly filled.
Could someone help me to understand how to use a variable in a inside a Twig template.

slide1: myimage1.png
slide2: myimage2.png
slide3: myimage3.png

slide1 is header.slide1

<img src="{{[page.header.slide1].url }}" alt="MyPassion" />

thanks, but I get unknown!
Note: myimage1.png, myimage2.png and myimage3.png are in the same folder as the markdown page definition (not in the template folder).

it works, what is your folder structure ? Just tested with Antimatter

/var/www/html/grav-admin/user/pages/03.soluciones/01.erp/01.ventasycrm# ll
total 236
drwxr-xr-x  2 root root  4096 Sep 27 11:08 ./
drwxr-xr-x 12 root root  4096 Sep 27 06:13 ../
-rw-r--r--  1 root root 61937 Apr 21 02:31 sales_1.jpg
-rw-r--r--  1 root root 72849 Apr 21 02:31 sales_2.jpg
-rw-r--r--  1 root root 87269 Apr 21 02:31 sales_3.jpg
-rwxr-xr-x  1 root root  2415 Sep 27 10:02

/var/www/html/grav-admin/user/pages/03.soluciones/01.erp/01.ventasycrm# head
title: Ventas y CRM
slide1: sales_1.png
slide2: sales_2.png
slide3: sales_3.png

/var/www/html/grav-admin/user/themes/new-theme/templates# head -50 solution.html.twig
{% extends 'partials/base.html.twig' %}

{% block content %}

        <!-- Content -->
        <section id="content">
            <div class="container">

                {{ include('partials/breadcrumbs.html.twig') }}

                <!-- Main Content -->
                <div class="main-content">
                    <p>{{[slide1].url }}</p>
                    <p>{{[slide2].url }}</p>
                    <p>{{[slide3].url }}</p>
                    <!-- Single -->
                    <div class="column-two-third single">
                        <div class="flexslider">
                            <ul class="slides">
                                    <img src="{{[page.header.slide1].url }}" alt="{{ page.header.slide1_alt }}" />
                                    <img src="{{[page.header.slide2].url }}" alt="{{ page.header.slide2_alt }}" />
                                    <img src="{{[page.header.slide3].url }}" alt="{{ page.header.slide3_alt }}" />

                        {{ page.content }}


is that right ?


It works for me

I tried this in the template (solution.html.twig):
<p>{{ page.header.slide1 }}</p>

And I can’t get the content of slide1, I get an empty html paragraph tag.

In the page I have:

# more
title: Ventas y CRM
slide1: sales_1.png
slide2: sales_2.png
slide3: sales_3.png
slide1_alt: Sales 1
slide2_alt: Sales 2
slide3_alt: Sales 3

This works perfectly fine:

< img src="{{[‘sales_1.jpg’].url }}" / >

So the issue seems to be in page.header.slide1.

BTW I am creating a new theme from scratch (I created the basic structuring following official documentation)

Guys, anyone checked the filenames?

slide1: sales_1.png

Won’t work together with the .jpg files.

Please check the filenames :slight_smile: and use

slide1: sales_1.jpg

in your header :wink:

1 Like

good catch, that’s why it works in my test i have same filename :wink: and not in @Usk70 example

Wow, no comments.
I tried so many things I missed the most obvious one.