feat: add native image processing to cards (#63)

* Add native image processing to cards * feat: Image processing options, markdown subtitles * fixing a type * Public Domain Images * image height fix * Smaller Image * Removed fullwidth param * Smaller image from unsplash * Replaced static image as well * Update single.html * Update list.html * Update list.html * Update single.html * Update list.html * Update single.html * Update cards.md * Update cards.md --------- Co-authored-by: Xin <[email protected]>
imfing · Sep 18, 2023 · c799160 · c799160
1 parent 00d26de
commit c799160
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 5 deletions.
diff --git a/exampleSite/assets/images/space.jpg b/exampleSite/assets/images/space.jpg
diff --git a/exampleSite/content/docs/guide/shortcodes/cards.md b/exampleSite/content/docs/guide/shortcodes/cards.md
@@ -12,9 +12,10 @@ 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." >}}
 {{< /cards >}}
 
-
 ## Usage
 
 ```
@@ -27,5 +28,37 @@ 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." */>}}
 {{</* /cards */>}}
 ```
+
+## Card Parameters
+
+| Parameter  | Description                           |
+|----------- |---------------------------------------|
+| `link`     | URL (internal or external).           |
+| `title`    | Title heading for the card.           |
+| `subtitle` | Subtitle heading (supports Markdown). |
+| `icon`     | Name of the icon.                     |
+
+## Image Card
+
+Additionally, the card supports adding image and processing through these parameters:
+
+| Parameter  | Description                                 |
+|----------- |---------------------------------------------|
+| `image`    | Specifies the image URL for the card.       |
+| `method`   | Sets Hugo's image processing method.        |
+| `options`  | Configures Hugo's image processing options. |
+
+Card supports three kinds of images: 
+
+1. Remote image: the full URL in the `image` parameter.
+2. Static image: use the relative path in Hugo's `static/` directory.
+3. Processed image: use the relative path in Hugo's `assets/` directory.
+
+Hextra auto-detects if image processing is needed during build and applies the `options` parameter or default settings (Resize, 800x, Quality 80, WebP Format).
+It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
+
+For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
diff --git a/exampleSite/static/images/card-image-unprocessed.jpg b/exampleSite/static/images/card-image-unprocessed.jpg
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
@@ -1,10 +1,30 @@
 {{- $link := .Get "link" -}}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
-{{- $subtitle := .Get "subtitle" }}
-{{- $image := .Get "image" }}
+{{- $subtitle := .Get "subtitle" -}}
+{{- $image := .Get "image" -}}
+{{- $method := .Get "method" | default "Resize" | humanize -}}
+{{- $options := .Get "options" | default "800x webp q80" -}}
 {{- $context := . -}}
 
+
+{{/*- Adding asset support for images here, so that Hugo can do its image processing magic. -*/}}
+{{/* 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 -}}
+    {{- if eq $method "Resize" -}}
+      {{- $image = (.Resize $options).RelPermalink -}}
+    {{- else if eq $method "Fit" -}}
+      {{- $image = (.Fit $options).RelPermalink -}}
+    {{- else if eq $method "Fill" -}}
+      {{- $image = (.Fill $options).RelPermalink -}}
+    {{- else if eq $method "Crop" -}}
+      {{- $image = (.Crop $options).RelPermalink -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
 {{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
 {{- with $image -}}
   {{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
@@ -31,10 +51,10 @@
 
 
   <span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
-    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{ end -}}
+    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
     {{- $title -}}
   </span>
   {{- with $subtitle -}}
-    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{ $subtitle }}</div>
+    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- $subtitle | markdownify -}}</div>
   {{- end -}}
 </a>