Skip to content
● Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Log in Register
General

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

Solved by pamtbaau View solution

Started by Benjamin 5 years ago · 6 replies · 764 views
5 years ago

Hello,

I have this code which works for listing several images:

TWIG
  {% 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. `[email protected]), my images are not displayed anymore.

My frontmatter looks like this:

YAML
---
title: 'Chantier 5'
gallerieAvant:
    refection-façade--oct-2019--01--.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 2808494
        path: refection-faç[email protected]

Any idea please? Should I use a different method?

5 years ago

@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 [email protected] , 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 [email protected] and then realize it needs to make a @1x variant and display the appropriate srcset output:

last edited 04/13/21 by pamtbaau
5 years ago

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?

5 years ago

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

5 years ago

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

YAML
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ç[email protected]

image|612x500

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.

TXT
---
title: 'Chantier 5'
avant: {  }
apres: {  }
gallerieAvant:
    refection-façade--oct-2019--01.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 416547
        path: refection-faç[email protected]
    refection-façade--oct-2019--03--.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 664182
        path: refection-faç[email protected]
    refection-façade--oct-2019--02--.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 606418
        path: refection-faç[email protected]
galleriePendant: {  }
gallerieApres:
    refection-façade--oct-2019--04--.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 2946525
        path: refection-faç[email protected]
    refection-façade--oct-2019--05--.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 3271876
        path: refection-faç[email protected]
    refection-façade--oct-2019--06--.jpeg:
        name: refection-faç[email protected]
        type: image/jpeg
        size: 2223455
        path: refection-faç[email protected]
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'
---
5 years ago Solution

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

TWIG
{% 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'"

👍 1
last edited 04/13/21 by pamtbaau
5 years ago

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 🙂

Suggested topics

Topic Participants Replies Views Activity
Well done Grav Team
General · by Jerry Hunt, 4 days ago
2 80 9 hours ago
Grav 2, Admin Next, API and Migrate are now in production!
General · by pamtbaau, 14 hours ago
1 51 13 hours ago
Welcome to the new Grav Forums!
General · by Andy Miller, 1 day ago
0 44 1 day ago
How active is Grav?
General · by Marcel, 12 months ago
6 346 5 days ago
Contents in bin folder delete itself during core updates
General · by Duc , 5 days ago
3 40 5 days ago