fix: card image not displaying correctly (#77)

* fix: use relative URL for card images

* chore: update card image processing

* chore: add width and height for process image

* docs: update cards docs

dev.toml

@@ -18,6 +18,9 @@
     target = '$1'
 
 [module]
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
   [[module.mounts]]
     source = "hugo_stats.json"
     target = "assets/watching/hugo_stats.json"

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

@@ -12,8 +12,8 @@ linkTitle: Cards
 
 {{< cards >}}
   {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
-  {{< 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="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" >}}
 {{< /cards >}}
 
 ## Usage
@@ -28,8 +28,8 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
   {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
-  {{</* 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="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" */>}}
 {{</* /cards */>}}
 ```
 

layouts/shortcodes/card.html

@@ -1,27 +1,37 @@
+{{- $context := . -}}
 {{- $link := .Get "link" -}}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 {{- $subtitle := .Get "subtitle" -}}
 {{- $image := .Get "image" -}}
+{{- $width := 0 -}}
+{{- $height := 0 -}}
+
+{{/* Image processing options */}}
 {{- $method := .Get "method" | default "Resize" | humanize -}}
 {{- $options := .Get "options" | default "800x webp q80" -}}
-{{- $context := . -}}
 
-
+{{- if and $image (not (urls.Parse $image).Scheme) -}}
-{{/*- Adding asset support for images here, so that Hugo can do its image processing magic. -*/}}
+  {{/* Process images in assets */}}
-{{/* Unfortunately we cannot pass .Resize/.Fit/.Fill as variables, so we're left with chaining IFs */}}
-
-{{- if not (urls.Parse $image).Scheme -}}
   {{- with resources.Get $image -}}
+    {{- $processed := "" -}}
     {{- if eq $method "Resize" -}}
-      {{- $image = (.Resize $options).RelPermalink -}}
+      {{- $processed = (.Resize $options) -}}
     {{- else if eq $method "Fit" -}}
-      {{- $image = (.Fit $options).RelPermalink -}}
+      {{- $processed = (.Fit $options) -}}
     {{- else if eq $method "Fill" -}}
-      {{- $image = (.Fill $options).RelPermalink -}}
+      {{- $processed = (.Fill $options) -}}
     {{- else if eq $method "Crop" -}}
-      {{- $image = (.Crop $options).RelPermalink -}}
+      {{- $processed = (.Crop $options) -}}
+    {{- else -}}
+      {{- errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." -}}
     {{- end -}}
+    {{- $width = $processed.Width -}}
+    {{- $height = $processed.Height -}}
+    {{- $image = $processed.RelPermalink -}}
+  {{- else -}}
+    {{/* Otherwise, use relative link of the image */}}
+    {{- $image = ($image | relURL) -}}
   {{- end -}}
 {{- end -}}
 
@@ -33,6 +43,7 @@
 {{- $external := strings.HasPrefix $link "http" -}}
 {{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
 
+
 <a
   class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
   href="{{ $href }}"
@@ -41,7 +52,15 @@
   {{- end -}}
 >
   {{- with $image -}}
-    <img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image | safeURL }}" />
+    <img
+      alt="{{ $title }}"
+      loading="lazy"
+      decoding="async"
+      style="color: transparent;"
+      src="{{ $image | safeURL }}"
+      {{ with $width }}width="{{ . }}"{{ end }}
+      {{ with $height }}height="{{ . }}"{{ end }}
+    />
   {{- end -}}
 
   {{- $padding := "p-4" -}}