How to link to full size image?

[keybits]

I would like to make images link to the full size original.

In HTML something like:

<a href="/path/to/full-size-image.png"><img src="/path/to/optimised-image"></a>

I'm not sure how to do this within the syntax of a shortcode like:

{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}

Any suggestions on the best way to do it?

[madrilene]

You could create a new shortcode for that case. To create a version of the original image image width/format, you can add null to the widths-array: widths: [320, 570, 820, null]

I created a branch so you can see what I did exactly: https://github.com/madrilene/eleventy-excellent/commit/34938c346a3b7d8165a38655f0c01a3c341b956a

[keybits]

Thank you very much! That works prefectly.

Thanks for taking the time to create a working example - very much appreciated ✨

[keybits]

Now I'm thinking about adding lightbox support and maybe even a gallery. I found this post which might be helpful for anyone looking for something similar: https://www.bash.lk/posts/tech/1-elventy-image-gallery/

I'm guessing lightbox / gallery support is probably out of scope for this (excellent) starter. Thanks again for creating such a brilliant template.

[madrilene]

I have added a demo branch with a simple gallery based on the dialog element. https://github.com/madrilene/eleventy-excellent/tree/demo-gallery