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

docs/content/docs/guide/shortcodes/cards.md

@@ -32,13 +32,14 @@ linkTitle: Cards
   {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
   {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
   {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
+  {{</* card link="/" title="Custom Alt Text" image="images/space.jpg" alt="A beautiful view of space with stars and galaxies" subtitle="Image with custom alt text for accessibility." */>}}
 {{</* /cards */>}}
 ```
 
 ## Card Parameters
 
 | Parameter  | Description                                                                |
-|-------------|----------------------------------------------------------------------------------------|
+| ---------- | -------------------------------------------------------------------------- |
 | `link`     | URL (internal or external).                                                |
 | `title`    | Title heading for the card.                                                |
 | `subtitle` | Subtitle heading (supports Markdown).                                      |
@@ -49,8 +50,9 @@ linkTitle: Cards
 Additionally, the card supports adding image and processing through these parameters:
 
 | Parameter    | Description                                                         |
-|--------------|----------------------------------------------------|
+| ------------ | ------------------------------------------------------------------- |
 | `image`      | Specifies the image URL for the card.                               |
+| `alt`        | Alternative text for the image (defaults to title if not provided). |
 | `method`     | Sets Hugo's image processing method.                                |
 | `options`    | Configures Hugo's image processing options.                         |
 | `imageStyle` | Used to fill the style attribute of the image tag.                  |
@@ -71,7 +73,7 @@ For more on Hugo's built in image processing commands, methods, and options see
 Card supports adding tags which could be useful to show extra status information.
 
 | Parameter   | Description                                                                            |
-|-------------|----------------------------------------------------------------------------------------|
+| ----------- | -------------------------------------------------------------------------------------- |
 | `tag`       | Text in tag.                                                                           |
 | `tagColor`  | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information.  |
 | `tagIcon`   | Icon of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information.   |
@@ -122,4 +124,3 @@ You can specify the maximum number of columns for cards to span by passing the `
   {{</* card link="/" title="Right Card" */>}}
 {{</* /cards */>}}
 ```
-

layouts/_partials/shortcodes/card.html

@@ -3,6 +3,7 @@
 {{- $icon := .icon -}}
 {{- $subtitle := .subtitle -}}
 {{- $image := .image -}}
+{{- $alt := .alt | default $title -}}
 {{- $width := .width -}}
 {{- $height := .height -}}
 {{- $imageStyle := .imageStyle -}}
@@ -29,7 +30,7 @@
 >
   {{- with $image -}}
     <img
-      alt="{{ $title }}"
+      alt="{{ $alt }}"
       class="hextra-card-image"
       loading="lazy"
       decoding="async"

layouts/_shortcodes/card.html

@@ -8,18 +8,20 @@ A shortcode to create a 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" }}
+  @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" -}}
@@ -58,6 +60,7 @@ A shortcode to create a card.
   "icon"        $icon
   "subtitle"    $subtitle
   "image"       $image
+  "alt"         $alt
   "width"       $width
   "height"      $height
   "imageStyle"  $imageStyle