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" 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" 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