Loads of Images in Markdown Files

#1

Hi Andy & folks,

This is getting me out of trouble, so all good.
But I’m wondering if there’s a better way.
Apologies if its already been covered somewhere, but I couldn’t find it in the piccalil.li site or here.

Issue is my markdown pages make much use of figures/images with attributes & classes.
I was using html to deal with them, but interspersing html in the md files was horrible.
I then found the below method…which is currently getting me out of trouble.

Myfile.md
{% set url = “papua/hawks/Hawks_1954.PNG” %}
{% set altText = “Hawks 1954 side” %}
{% set caption = “Port Moresby’s Hawks 1954 side at Konedobu Oval. Back LR - John Adams, Alan Jessop, Noel Cooper, Jack Johnson Front LR - John Jones, Andrew Thomson, Richard Smith” %}
{% include “partials/image.html” %}

partials/image.html

image
image710×134 4.31 KB

Any more optimal methods?
Many thanks in advance!
(the partials/image.html code seemed to not be working, so I uploaded an image of the code)

#2

Hi @koitaki, it looks like a good candidate for shortcode.

/* . eleventy.js */

module.exports = config => {
    config.addShortcode('img', ({ dir, url, altText, caption }) => {
        return `
<figure>
<img src="${dir}${url}" alt="${altText}" />
<figcaption>${caption}</figcaption>
</figure>
`;
    });
}

Note that the returned template litteral has no indentations in order to not be parsed as a code block in Markdown. Then used in a template:

{% img
dir = site.images,
url = 'image.png',
altText = 'Image description',
caption = 'Caption text'
%}
1 Like
#3

Yeh I would also recommend a shortcode for this!

1 Like
#4

Very nice Mathieu, many thanks for that!
My first use of applying Eleventy shortcodes, and this gives me a decent understanding of them.
In this case they work very well.

Thank you so much for also providing a detailed example, very much appreciated! :+1: :smiley:

1 Like
#5

You are welcome! :blush:.

1 Like