Picture tag extension for KirbyText

Plugins
1

Created a picture tag for KirbyText. Although the picture element works for all responsive images, it is advised to use it for art directional purposes. I am planning to make a ‘srcset’ tag for responsive images without art direction.

The tag could probably be optimized, but works for now. Of course all feedback is welcome. It makes sure you have to write as little as possible: (picture: filename) and it works if you use the correct naming conventions. More information can be found on GitHub: https://github.com/bartvandebiezen/kirby-v2-picture-tag

Gr. Bart

4 Likes
2

I also just created a srcset tag making it even easier to add responsive images to your content: https://github.com/bartvandebiezen/kirby-v2-srcset-tag

1 Like
3

Seem’s it doesn’t work anymore…

4

Could you elaborate a bit more? Which of the tags does not work? One? Both? What errors do you get? Which Kirby version? What exactly have you done?

5

I’ve tested in clean Kirby 2 Starterkit installation, and two of @bartvandebiezen tags does’t work:

Also theres no php log errors.

6

Which two tags? picture and srcset?
Could you please post the Kirbytext you are using, a list of files in the page’s content directory and the source code that gets rendered (not the tree view, but the Cmd-Alt-U representation of that area of the page)?

PS: Just in general: “It doesn’t work” makes it very hard to reproduce the error and to find the reason for it. The more input you provide with your bug report, the better the output from us gets. My crystal ball is being repaired right now, so sorry for that. :wink:

7

Yes, both of them.

I’m using both extentions each from the latest master branch, with original Kirby 2 Starterkit installation, no PHP file changed except the ‘Progect A’ (project.txt file) witch I added: (picture: forrest.jpg) and (srcset: forrest.jpg), to the ‘Text’ field.

Here’s the pre-render DOM (from CMD+ALT+U):

…
<figure>
  <picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
    <img>
  </picture>
</figure>

<figure>
  <img src="" sizes="100vw" srcset="">
</figure>
…

:pray:

8

You are using the extension in your tag. See the docs:

You can use this KirbyText tag in your text as:

(picture: scrum-process extension: png class: infographic caption: This is how Scrum works. alt: Scrum infographic width: 600px height: 400px)
Be careful, you need to write the filename without an extension. The extension is written as a separate attribute. When you do not use the extension attribute, the extension will be ‘jpg’.

9

Oh now I see, many thanks! In the meanwhile I’ve was able to build a more automated tag for picture, I’ll release it soon!