CMS Image Component - Support Twig Expressions

Elements
1

Hi @Ben,

I’m currently using the following frontmatter structure to manage logos for several stores:

media:
  logo:
    240x120:
      src: "/resources/logos/240x120/ikea.webp"

    300x250:
      src: "/resources/logos/300x250/ikea.webp"

    300x300:
      src: "/resources/logos/300x300/ikea.webp"

    title: ""
    alt: ""
    copyright: "mydomain.com"
    type: "remote"

Since only the directory path usually changes for the different logo sizes, I would like to optimize the YAML frontmatter and make it easier to maintain in the future. My idea is to structure it like this:

---
media:
  logo:
    path: "/resources/logos/{size}/ikea.webp"
    sizes:
      - "240x120"
      - "300x250"
      - "300x300"
    title: ""
    alt: ""
    copyright: "mydomain.com"
    type: "remote"
---

Unfortunately, the related Twig syntax does not seem to work inside the CMS Image component:

{{ item.media.logo.path|replace({'{size}': '300x300'}) }}

When I output this Twig syntax as plain text, the correct image path is generated. So it looks like the CMS Image component is currently not processing the Twig expression in this context.

Would it be possible to make this feature available in one of the next CMS updates?

This would allow us to create more flexible and maintainable YAML frontmatter structures for managing images.

Please also let me know if this is already possible and I’m just missing something in my setup or logic.