Using YAML Flexible Media Class on linked images in content.txt

Hello everyone! :slight_smile:

Currently I’m building my first template for kirby. For my CSS I use the YAML.de ( v4.1.2) CSS framework.

I’ve found out that image links in the content.txt will wrapped into <figure>…</figure> in the final html. If I wrote (image: about.jpg class:flexible) the class will applied to <figure class="flexible"> not to the <img>-tag.
See Flexible Media (responsive) about YAMLs flexible class http://www.yaml.de/docs/index.html#yaml-typography

The only way to get the image scaled properly I figured out is to write the link like this:
(image: about.jpg width: 100% height: 100% class:flexible)

But that is very long and not very convenient when I have to do it for every linked image. (And even worse, it will be very difficult to explain it to the customer.)

Do you know a short and more convenient and shorter way to apply the YAML class to every image tag in a content.txt or let all the images scale otherwise to the width of the column?

Thank you in advance for your help!

PS: And I hope it’s understandable because my english isn’t the best. And I’m sure that it is not my last question. :blush:

Have you considered writing a custom Kirbytag (Kirbytext tag) for that? See the documentation here: https://getkirby.com/docs/developer-guide/kirbytext/tags . I think with this you could easily simplify adding images with the right attributes.

And do not worry about your English, because

  1. it is very good
  2. everybody around here is very nice even if it were not :slight_smile:
1 Like

Hello,
You can remove the figure tags around an image by adding to your configuration file (site/config/config.php):

c::set('kirbytext.image.figure',false);

Does that solve your problem?

1 Like

Hello lord-executor!

Thank you for this very interesting hint and your warm welcome! I’m considering to use this. :+1:

Hi Thiousi!

Thank you very much! It works!! :sunglasses: But this lead me to another question, shoud I use the figure-tag. I wasnt aware of this HTML5 element.

The <figure> tag makes sense if you want to have a caption (<figcaption>) for your images. This approach is then more correct semantically.

If you don’t, then a plain <img> is just as fine. If you want to get the best of both worlds, a custom Kirbytag with your class added to the img is probably the best way.

1 Like

Hello lukasbestle!

Thank you for the explaining! That’s exactly what I was thinking! :relieved:

Here’s a good read about figures (albeit 2 years old now):

1 Like