diff options
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 |