11ty image shortcode best practice

SimonCox June 6, 2023
Source
Just deployed a site using the 11ty image plugin and it is working well. I did have some issues with set up - wanted the hi-res images in a separate folder outside of src and public folders and acheived that by setting an external source - would be nice if this were in the base set up: And then the shortcode in the functions: But then I was having issues where the image shown on full screen was the low res version - not good! Took me an age to work out the issue till I noticed some errant code in the source. In Markdown please leave a space before and after the image shortcode - else it gets mixed up and bits of the picture element get wrapped in a p tag and become not a picture element! This doesn't work: ~ Lorum ipsum dolar bla bla % image "image.jpg", "alt text" % Lorum ipsum dolar bla bla But this does: Lorum ipsum dolar bla bla % image "image.jpg", "alt text" % Lorum ipsum dolar bla bla ~ Leave some space!

Discussion in the ATmosphere

Loading comments...