summaryrefslogtreecommitdiffstats
path: root/CONTENT_GUIDE.md
diff options
context:
space:
mode:
authorDanilo M. <danix@danix.xyz>2026-04-05 09:34:21 +0200
committerDanilo M. <danix@danix.xyz>2026-04-05 09:34:21 +0200
commit043ec4b61363fe28b2d2d8ac9e17e9386bf7175d (patch)
tree4d650da608f1a03697d3aacaf76d916c08a0d2d0 /CONTENT_GUIDE.md
parentc262af894a95d6473e3bf8a2f8c0c85caa6b3b8b (diff)
downloaddanixxyz-theme-043ec4b61363fe28b2d2d8ac9e17e9386bf7175d.tar.gz
danixxyz-theme-043ec4b61363fe28b2d2d8ac9e17e9386bf7175d.zip
feat: add figure shortcode and documentation
Ported figure shortcode from previous theme. Wraps content in semantic <figure> element with optional title, caption, attribution, and link support. Typical usage: {{< figure caption="Image caption" attr="Photo by Someone" >}} {{< img src="image.jpg" alt="Description" >}} {{< /figure >}} Also updated CONTENT_GUIDE with comprehensive usage examples and parameters. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'CONTENT_GUIDE.md')
-rw-r--r--CONTENT_GUIDE.md54
1 files changed, 54 insertions, 0 deletions
diff --git a/CONTENT_GUIDE.md b/CONTENT_GUIDE.md
index a261053..834a8f4 100644
--- a/CONTENT_GUIDE.md
+++ b/CONTENT_GUIDE.md
@@ -570,6 +570,60 @@ With link to profile:
---
+### Figure Shortcode
+
+The `figure` shortcode wraps images or other content in a semantic `<figure>` element with optional title, caption, attribution, and link. Use it to add context and styling around images.
+
+**Usage:**
+```hugo
+{{< figure caption="Image caption" attr="Photo by Someone" >}}
+{{< img src="image.jpg" alt="Description" >}}
+{{< /figure >}}
+```
+
+**Parameters:**
+- Content between tags — Inner content (typically an `img` shortcode)
+- `class` (optional) — CSS class for the figure element
+- `link` (optional) — URL to wrap the entire figure in a link
+- `target` (optional) — Link target (_blank, _self, etc.)
+- `rel` (optional) — Link rel attribute
+- `title` (optional) — Optional title displayed above the image
+- `caption` (optional) — Caption text (supports Markdown)
+- `attr` (optional) — Attribution text (supports Markdown)
+- `attrlink` (optional) — URL to link the attribution to
+
+**Examples:**
+
+Simple figure with caption:
+```hugo
+{{< figure caption="Kubernetes cluster architecture" >}}
+{{< img src="k8s-architecture.jpg" alt="Kubernetes cluster" >}}
+{{< /figure >}}
+```
+
+With title and attribution:
+```hugo
+{{< figure title="System Design" caption="A simplified view of the microservices architecture" attr="Diagram by John Doe" >}}
+{{< img src="architecture.jpg" alt="Architecture diagram" >}}
+{{< /figure >}}
+```
+
+With linked attribution:
+```hugo
+{{< figure caption="Beautiful sunset at Bryce Canyon" attr="Photo by Jane Smith" attrlink="https://example.com/jane" >}}
+{{< img src="bryce-canyon.jpg" alt="Sunset at Bryce Canyon" >}}
+{{< /figure >}}
+```
+
+Figure with clickable link:
+```hugo
+{{< figure link="https://example.com/full-image" target="_blank" caption="Click to view full resolution" >}}
+{{< img src="preview.jpg" alt="Preview image" >}}
+{{< /figure >}}
+```
+
+---
+
## Troubleshooting
### Article doesn't appear on site