Files
hextra/layouts/_shortcodes/card.html
Xin a128fabaf1 feat: add optional alt parameter to card shortcode (#899)
Add support for custom alt text on card images to improve accessibility.
The alt parameter is optional and defaults to the card title if not provided,
maintaining backward compatibility with existing implementations.

Fixes #896
2026-01-04 17:23:33 +00:00

73 lines
2.5 KiB
HTML

{{- /*
A shortcode to create a card.
@param {string} link The link to the card.
@param {string} title The title of the card.
@param {string} icon The icon of the card.
@param {string} subtitle The subtitle of the card.
@param {string} tag The tag of the card.
@param {string} tagColor The color of the tag.
@param {string} image The image of the card.
@param {string} alt The alt text for the image (defaults to title if not provided).
@param {string} method The method to process the image.
@param {string} options The options to process the image.
@param {string} imageStyle The style of the image.
@example {{< card link="/" title="Image Card"
}}
*/ -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $alt := .Get "alt" | default $title -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagColor := .Get "tagColor" | default (.Get "tagType") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{- $tagBorder := not (eq (.Get "tagBorder") false) | default true }}
{{- $tagIcon := .Get "tagIcon" | default "" -}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}
{{- $process := .Get "process" | default (printf "%s %s" $method $options) -}}
{{- if and $image (not (urls.Parse $image).Scheme) -}}
{{- with or (.Page.Resources.Get $image) (resources.Get $image) -}}
{{/* .Process does not work on svgs */}}
{{- if (not (eq .MediaType.SubType "svg")) -}}
{{/* Retrieve the $image resource from local or global resources */}}
{{- $processed := .Process $process -}}
{{- $width = $processed.Width -}}
{{- $height = $processed.Height -}}
{{- $image = $processed.RelPermalink -}}
{{- end -}}
{{ else }}
{{/* Otherwise, use relative link of the image */}}
{{- if hasPrefix $image "/" -}}
{{- $image = relURL (strings.TrimPrefix "/" $image) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- partial "shortcodes/card" (dict
"page" .Page
"link" $link
"title" $title
"icon" $icon
"subtitle" $subtitle
"image" $image
"alt" $alt
"width" $width
"height" $height
"imageStyle" $imageStyle
"tag" $tag
"tagType" $tagColor
"tagBorder" $tagBorder
"tagIcon" $tagIcon
)
-}}