{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.simoncox.com/short-articles/2023-06-06-11ty-image-shortcode-best-practice/",
  "description": "Simon Cox outlines how to properly set up and use the 11ty image shortcode, fixing issues with high-res sources, spacing in markdown, and rendering bugs.",
  "path": "/short-articles/2023-06-06-11ty-image-shortcode-best-practice/",
  "publishedAt": "2023-06-06T14:46:51.980Z",
  "site": "at://did:plc:tki7vwlanxbwrz2er67eaeqa/site.standard.publication/3mp4h4md7zv2y",
  "tags": "Eleventy",
  "textContent": "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:\n\nAnd then the shortcode in the functions:\n\nBut 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.\n\nIn 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!\n\nThis doesn't work:\n\n~\nLorum ipsum dolar bla bla\n% image \"image.jpg\", \"alt text\" %\nLorum ipsum dolar bla bla\n\n\nBut this does:\n\n\nLorum ipsum dolar bla bla\n\n% image \"image.jpg\", \"alt text\" %\n\nLorum ipsum dolar bla bla\n~\n\nLeave some space!",
  "title": "11ty image shortcode best practice"
}