How to display responsive images using GRAV srcset method in TWIG?

brigaill · April 13, 2021, 7:46am

Hello,

I have this code which works for listing several images:

  {% for img in page.header.gallerieAvant %}
  <li>
    {{ page.media[img.name].html( header.title, img.name|split('.')[0], 'image-zoom__preview js-image-zoom__preview')|raw }}
  </li>
  {% endfor %}

But if I want to use the GRAV srcset feature, uploading images with the @3x suffix at the end of the filename (e.g. `sample-image@3x.jpg), my images are not displayed anymore.

My frontmatter looks like this:

---
title: 'Chantier 5'
gallerieAvant:
    refection-façade--oct-2019--01--.jpeg:
        name: refection-façade--oct-2019--01--@3x.jpeg
        type: image/jpeg
        size: 2808494
        path: refection-façade--oct-2019--01--@3x.jpeg

Any idea please? Should I use a different method?

pamtbaau · April 13, 2021, 8:14am

@brigaill, I think you will have to drop the suffix @3x in field name in your frontmatter.

See docs on higher density images:

Let’s assume you have a file called retina@2x.jpg , you would actually reference this in your links as retina.jpg , and then Grav will not find this image, and start looking for retina image sizes. It will find retina@2x.jpg and then realize it needs to make a @1x variant and display the appropriate srcset output:

brigaill · April 13, 2021, 12:22pm

Many thanks @pamtbaau ,

So I directly edited the frontmatter in my .md page. It works great.

But I really don’t know how I could programmatically drop off the suffix @3x in the frontmatter field “name” from my uploaded image files. Sorry, I have very low dev skills.

Could you please give me a clue so that I can try by myself?

pamtbaau · April 13, 2021, 12:46pm

@brigaill,

But I really don’t know how I could programmatically drop off the suffix @3x in the frontmatter field “name” from my uploaded image files.

Do you want to remove the @3x in the frontmatter of the page, or in Twig?

By the way, the frontmatter for the gallery doesn’t look familiar to me, would you mind sharing how that is created?

brigaill · April 13, 2021, 1:17pm

Sure,

So here is my complete blueprint file, where .gallerie-photos is subdivised into three sub-galleries to show photos before, ongoing and after the work done (I am making a site for a house renovation worker) .

Those three sub-galleries are header.avant, header.pendant and header.apres.

The idea is to allow him to easyly upload his photos in those three galleries, and then the site will manage photos responsiveness.

Blueprint

title: Réalisation
extends@:
  type: default
  context: blueprints://pages

    form:
      fields:
        tabs:

          fields:
            content:
              type: tab

              fields:

                content:
                  ordering@: 2
                  label: Description
                  help: Décrire le chantier, les souhaits du client, les éventuelles problématiques et comment elles ont été résolues.

                header.avant-apres:
                  ordering@: 3
                  type: fieldset
                  title: Avant / Après
                  help: Mettre une photo avant chantier et une photo après réalisation complète du chantier
                  info: (insérer des photos au format 16/9)
                  text:
                  icon: sliders
                  collapsed: false
                  collapsible: true
                  fields:
                    header.avant:
                      style: vertical
                      type: file
                      limit: 1
                      avoid_overwriting: false
                      label: Photo avant chantier
                      help: Photo affichée à gauche du slider
                      destination: '@self'
                      preview_images: true
                      multiple: false
                      filesize: 10
                      accept:
                        - image/*
                    header.apres:
                      style: vertical
                      type: file
                      limit: 1
                      avoid_overwriting: false
                      label: Photo après chantier
                      help: Photo affichée à droite du slider
                      destination: '@self'
                      preview_images: true
                      multiple: false
                      filesize: 10
                      accept:
                        - image/*

                .gallerie-photos:
                  ordering@: 4
                  type: fieldset
                  title: Gallerie photos
                  help:
                  info:
                  text:
                  icon: info
                  collapsed: false
                  collapsible: true
                  fields:
                    header.gallerieAvant:
                      style: vertical
                      type: file
                      multiple: true
                      limit: 100
                      avoid_overwriting: false
                      label: Avant travaux
                      help: 10 photos max
                      destination: '@self'
                      preview_images: true
                      multiple: true
                      filesize: 10
                      accept:
                        - image/*
                    header.galleriePendant:
                      style: vertical
                      type: file
                      multiple: true
                      limit: 100
                      avoid_overwriting: false
                      label: Travaux en cours
                      help: 10 photos max
                      destination: '@self'
                      preview_images: true
                      multiple: true
                      filesize: 10
                      accept:
                        - image/*
                    header.gallerieApres:
                      style: vertical
                      type: file
                      multiple: true
                      limit: 100
                      avoid_overwriting: false
                      label: Résultat final
                      help: 10 photos max
                      destination: '@self'
                      preview_images: true
                      multiple: true
                      filesize: 10
                      accept:
                        - image/*

Interface preview:

Note 1 : the idea is to upload images containing the suffix @3x in the filename so that GRAV manages and generates srcset for responsive images.

Example: refection-façade–oct-2019–06@3x.jpeg

Frontmatter output

Please note in the example below I did not complete all fields, hence the “{ }”

I see that before the field name we have the filename without the suffix, but I did not succeed in using it with TWIG.

---
title: 'Chantier 5'
avant: {  }
apres: {  }
gallerieAvant:
    refection-façade--oct-2019--01.jpeg:
        name: refection-façade--oct-2019--01@3x.jpeg
        type: image/jpeg
        size: 416547
        path: refection-façade--oct-2019--01@3x.jpeg
    refection-façade--oct-2019--03--.jpeg:
        name: refection-façade--oct-2019--03--@3x.jpeg
        type: image/jpeg
        size: 664182
        path: refection-façade--oct-2019--03--@3x.jpeg
    refection-façade--oct-2019--02--.jpeg:
        name: refection-façade--oct-2019--02--@3x.jpeg
        type: image/jpeg
        size: 606418
        path: refection-façade--oct-2019--02--@3x.jpeg
galleriePendant: {  }
gallerieApres:
    refection-façade--oct-2019--04--.jpeg:
        name: refection-façade--oct-2019--04--@3x.jpeg
        type: image/jpeg
        size: 2946525
        path: refection-façade--oct-2019--04--@3x.jpeg
    refection-façade--oct-2019--05--.jpeg:
        name: refection-façade--oct-2019--05--@3x.jpeg
        type: image/jpeg
        size: 3271876
        path: refection-façade--oct-2019--05--@3x.jpeg
    refection-façade--oct-2019--06--.jpeg:
        name: refection-façade--oct-2019--06--@3x.jpeg
        type: image/jpeg
        size: 2223455
        path: refection-façade--oct-2019--06--@3x.jpeg
taxonomy:
    chantier:
        - Rénovation
    prestation:
        - Façade
    ville:
        - Arles
media_order: 'refection-façade--oct-2019--02--.jpeg,refection-façade--oct-2019--03--.jpeg,refection-façade--oct-2019--04--.jpeg,refection-façade--oct-2019--05--.jpeg,refection-façade--oct-2019--06--.jpeg'
---

pamtbaau · April 13, 2021, 1:32pm

@brigaill,

Do you want to remove the @3x in the frontmatter of the page, or in Twig?

You didn’t answer where you wanted @3x to be removed, but I will answer it for the Twig variant…

Try the following, assuming the key of the images is always without the @3x:

{% for key, value in page.header.gallerieAvant %}
  <li>
    {{ page.media[key].html( header.title, value.name|split('.')[0], 'image-zoom__preview js-image-zoom__preview')|raw }}
  </li>
{% endfor %}

By the way, the frontmatter for the gallery doesn’t look familiar to me, would you mind sharing how that is created?

Ouch…, I’m afraid my question wasn’t accurate enough, causing you a bit of extra time and energy to answer the question. I hoped for something like: “I’m using plugin ‘GalleryX’”

brigaill · April 13, 2021, 3:41pm

It works like a charm, many thanks @pamtbaau

I recognize I detailed a lot, no worries, I thought it could be interresting for other people, at least if I can be useful doing so…

I realize I need to dig rather in the TWIG documentation rather than in the GRAV one, will definitely spend time on it.

Thanks so much for your help

Topic		Replies	Views
Custom frontmatter not working Archive	2	639	May 8, 2017
Add frontmatter config into twig print function Themes & Styling	2	550	July 27, 2017
Resize image from frontmatter / page header	3	672	March 19, 2018
Display multiple images in default.md Archive	1	315	August 22, 2016
[SOLVED] Lazyloading images with data-src and data-srcset Themes & Styling	1	1787	May 18, 2019

How to display responsive images using GRAV srcset method in TWIG?

Blueprint

Interface preview:

Frontmatter output

Related Topics