blowfish/layouts/partials/article-link.html
Chris Banes 177b0fd567
Improve resizing for article thumbnails
Currently, the image is resized to be 600px, which will work for
most images but caused issues for images which have very wide
aspect ratios. This change updates the partials to use a Fill with
an appropriate bounding box, rather than a simple resize.
2022-12-15 18:26:31 +00:00

80 lines
No EOL
3.2 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 backdrop-blur") " " }}
{{ else }}
{{ $articleClasses = delimit (slice $articleClasses "") " " }}
{{ 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 .Fill "600x400" }}
<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="font-bold text-xl 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="font-bold text-xl 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>