diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-05 09:34:21 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-05 09:34:21 +0200 |
| commit | 043ec4b61363fe28b2d2d8ac9e17e9386bf7175d (patch) | |
| tree | 4d650da608f1a03697d3aacaf76d916c08a0d2d0 /CONTENT_GUIDE.md | |
| parent | c262af894a95d6473e3bf8a2f8c0c85caa6b3b8b (diff) | |
| download | danixxyz-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.md | 54 |
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 |
