What is the best way to work with dynamic images?


I trying to find a way to implement dynamic images for something like a logo that could be used across the site, and that my client could edit.

I tried adding a field in the config.site. When using this:

<img src="{{ site.logo | first.path }}" alt="La Bete" class="header-logo"/>

It only works on the index page.

@gen035 The answer depends…

  • What are ‘dynamic images’? SVG images, or jpg/png images which are loaded depending on some logic in a twig template?
  • Which theme are you using?
  • What is the ‘index page’ and what is its template? The template is the basename of the *.md file, e.g. default.md uses template ‘default.html.twig’.
  • What is the template of the pages that don’t work?
  • Where are your images located?


I meant “dynamic” as in, I’d my clients to be able to upload/change their own logo.
I am using a custom theme that I made myself from scratch.
My index page is called home. It doesn’t work with any other pages that has a slug (/something)
My images are in the image is in user/themes/custom/images

@gen035 Thanks for the clarification.

Looking at the code snippet from your first post I notice there are a few syntax issues. Quoting the Twig docs:

The first filter returns the first “element” of a sequence, a mapping, or a string.

I presume the value of ‘logo’ in ‘/user/config/site.yaml’ is a string containing the filename of the logo. The function ‘first’ in {{ site.logo | first.path }} will, according its function, therefor return the first character of the name of the logo file.

Furthermore, because the result of ‘first’ is a string it has no property/method ‘path’ defined. Also, if ‘first’ would have returned an image, the property ‘url’ should be used instead of ‘path’.


If the property ‘logo’ in ‘site.yaml’ only contains the filename and no path, the code returning the correct path would be:

<img src="{{ theme_url }}/images/{{ site.logo }}" alt="La Bete" class="header-logo"/>
  - or -
<img src="{{ url('theme://images/'~site.logo) }}" alt="La Bete" class="header-logo"/>

Hope this helps…

Hey thanks for your help, so your solution didn’t work unfortunately, but I got it to work like this:

<img src="{{ theme_url }}/images/{{ site.logo | first.name }}" alt="La Bete" class="header-logo"/>

with a site.yaml containing:

 name: la_bete.png
 type: image/png
 size: 7863
 path: user/themes/custom/images/la_bete.png

@gen035 Knowing the structure of the ‘logo’ property in ‘site.yaml’ makes a whole lot of difference… Now the code makes sense… :slight_smile:

The structure of field ‘logo’ intrigues me though and it might leave some room for simplification/optimisation:

  • It contains quite a bit of repeated data, which makes it more error prone for your customers to edit the logo.
  • Why is the map nested using the path as key for the second map?
  • Are ‘type’, ‘size’ and ‘path’ used somewhere else in the code?
  • I could imagine that ‘alt’ could be added to ‘logo’ to make that dynamic as well.

Would you mind sharing the rationale behind the structure of ‘logo’?

  type: file
   label: Logo
    destination: 'theme://images/'