forked from drowl87/hextra_mirror
c799160e86
* 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>
61 lines
2.6 KiB
HTML
61 lines
2.6 KiB
HTML
{{- $link := .Get "link" -}}
|
|
{{- $title := .Get "title" -}}
|
|
{{- $icon := .Get "icon" -}}
|
|
{{- $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" }}
|
|
{{- end -}}
|
|
|
|
{{- $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 }}"
|
|
{{- if $external }}
|
|
target="_blank" rel="noreferrer"
|
|
{{- end -}}
|
|
>
|
|
{{- with $image -}}
|
|
<img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image | safeURL }}" />
|
|
{{- end -}}
|
|
|
|
{{- $padding := "p-4" -}}
|
|
{{- with $subtitle -}}
|
|
{{- $padding = "pt-4 px-4" -}}
|
|
{{- end -}}
|
|
|
|
|
|
<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 -}}
|
|
{{- $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 | markdownify -}}</div>
|
|
{{- end -}}
|
|
</a>
|