Shortcodes for images

#Usage

• src: the path/URL to the image file (mandatory)
• link: destination URL
• caption: set the image caption
• alt: set alternative text

#Local

Example of a local image with a link and caption.

#Input

{{ image(src="/fireball.gif", link="https://halve-z.netlify.app/", alt="Fireball", caption="8bit fireball") }}

#Output

<figure>
  <a href=https://halve-z.netlify.app/>
    <img class="align-center page-image" src="/fireball.gif?v=569e393374f2af74d6c575090904aaf51e641e5eb5ea89ae7c7de01f7293abc165b3a7e8685690a8b951c778603fec98ae6822ff2f7ea86a536776966cb65d5d" width="256" height="256" alt="Fireball"/></a><figcaption>8bit fireball</figcaption>
</figure>

#Image only

Example of an image without any text or links.

#Input

{{ image(src="yawn.gif") }}

#Output

<figure>
    <img class="align-center page-image" src="/posts/image/yawn.gif?v=fc35cb63ddbc00ff34411448bfe5100240b9a4691f45c0c2b245359fcbbd4f1d7c11617cd9cd3e8b7a03d5151cd590f421a1de41690f1d1d040c26738037afc1" width="32" height="32"/>
</figure>

#External

Example of an external image.

#Input

{{ image(src="https://halve-z.netlify.app/fireball.gif") }}

#Output

<figure>
    <img class="align-center page-image" src="https://halve-z.netlify.app/fireball.gif"/>
</figure>

#CSP

Add csp = enable to the config's extra section to enable Content Security Policy globally. Use front matter's csp_img to add URLs:

#Example

+++
title = "Image"
date = 2023-06-03
[taxonomies]
categories = ["media"]
tags = ["content", "csp", "shortcode"]
[extra]
subtitle = "Shortcodes for images"
csp_img = ["raw.githubusercontent.com/charlesrocket/beastie/"]
+++

#Input

{{ image(src="https://raw.githubusercontent.com/charlesrocket/beastie/master/doc/screenshot.gif", caption="CSP test image") }}

#Output