blowfish/layouts/partials/article-link.html
Chris Banes e9a17fa52d
Resize images displayed in article-link.html
Currently the images are displayed at their full resolution. Those images could be very large, but end up being displayed as 300px wide. This changes that by resizing those images to a more suitable size.
2022-10-15 14:12:31 +01:00

79 lines
3.1 KiB
HTML

{{ $articleClasses := "flex flex-wrap article" }}
{{ if .Site.Params.list.showCards }}
{{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-md") " " }}
{{ end }}
{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
{{ if .Site.Params.list.showCards }}
{{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
{{ else }}
{{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
{{ end }}
{{ $articleInnerClasses := "" }}
{{ if .Site.Params.list.showCards }}
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
{{ else }}
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
{{ end }}
{{ with .Params.externalUrl }}
<a class="{{ $articleClasses }}" href="{{ . }}" target="_blank" rel="external">
{{ else }}
<a class="{{ $articleClasses }}" href="{{ .RelPermalink }}">
{{ end }}
{{- with $.Params.images -}}
{{- range first 6 . }}
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
{{- else -}}
{{- $images := $.Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}
{{ with .Resize "600x" }}
<div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}
{{- else -}}
{{- with $.Site.Params.images }}
<meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
{{- end -}}
{{- end -}}
<div class="{{ $articleInnerClasses }}">
<div class="items-center text-xl font-semibold">
{{ with .Params.externalUrl }}
<div>
<div
class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
{{ $.Title | emojify }}
<span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
<span class="rtl:hidden">&#8599;</span>
<span class="ltr:hidden">&#8598;</span>
</span>
</div>
</div>
{{ else }}
<div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
{{ end }}
{{ if and .Draft .Site.Params.article.showDraftLabel }}
<div class=" ltr:ml-2 rtl:mr-2">
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
</div>
{{ end }}
{{ if templates.Exists "partials/extend-article-link.html" }}
{{ partial "extend-article-link.html" . }}
{{ end }}
</div>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta.html" . }}
</div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
<div class="py-1 prose dark:prose-invert">
{{ .Summary | emojify }}
</div>
{{ end }}
</div>
</a>