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

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?

@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:

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?

@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?

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'
---

@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. :innocent: I hoped for something like: “I’m using plugin ‘GalleryX’”

1 Like

It works like a charm, many thanks @pamtbaau :raised_hands:

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 :slight_smile: