What is the best way to work with dynamic images?

Support
1

Hi,

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.

2

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

@anon76427325

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

4

@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’.

Solution:

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…

5

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:

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

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

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