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 <xin@imfing.com>
This commit is contained in:
Remy Sheppard
2023-09-18 19:04:48 -04:00
committed by GitHub
parent 00d26dee2c
commit c799160e86
4 changed files with 58 additions and 5 deletions

View File

@ -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>