resize card images on the fly; optionally link to image reference page

This commit is contained in:
Helmut Merz 2022-01-28 14:30:38 +01:00
parent e3e6b739df
commit f3d9139033
2 changed files with 124 additions and 92 deletions

View file

@ -1,18 +1,29 @@
<div class="col-md-4"> <div class="col-md-4">
<div class="card mb-3"> <div class="card mb-3">
<a href="{{ .Permalink }}" class="index-anchor text-decoration-none"> <a href="{{ .Permalink }}" class="index-anchor text-decoration-none">
{{ if .Params.img }} {{- $img := .Params.img -}}
<img width="100%" {{- $refImg := "" -}}
src="{{ .Site.BaseURL }}img/{{ .Params.img }}" alt="{{ .Title }}"> {{- if .Params.imgRef -}}
{{ else if .Params.teaser }} {{- range where .Site.RegularPages "Params.pageid" "eq" .Params.imgRef -}}
<div class="card-header"> {{- $refImg = .Params.img -}}
<p class="card-text">{{ .Params.teaser }}</p> {{- end -}}
</div> {{- end -}}
{{ else if .Site.Params.defaultImage }} {{- if not $img -}}
<img width="100%" {{- $img = $refImg -}}
src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}" {{- end -}}
alt="{{ .Site.Title }}"> {{ if $img -}}
{{ end }} {{- $image := (resources.Get (printf "img/%s" $img)).Resize "400x" -}}
<img width="100%"
src="{{ $image.RelPermalink }}" alt="{{ .Title }}">
{{ else if .Params.teaser }}
<div class="card-header">
<p class="card-text">{{ .Params.teaser }}</p>
</div>
{{ else if .Site.Params.defaultImage }}
<img width="100%"
src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}"
alt="{{ .Site.Title }}">
{{ end }}
<div class="card-body"> <div class="card-body">
<span class="card-title h4">{{ .Title | truncate 25 }}</span> <span class="card-title h4">{{ .Title | truncate 25 }}</span>

View file

@ -1,89 +1,110 @@
<div class="col-md-4 mt20"> <div class="col-md-4 mt20">
{{ if .Params.img -}} {{- $refImg := "" -}}
<img width="100%" class="mt-3" {{- $refPage := "" -}}
src="{{ .Site.BaseURL}}img/{{ .Params.img }}" alt="{{ .Params.title }}"> {{- $img := .Params.img -}}
{{- else if .Params.teaser -}} {{- if .Params.imgRef -}}
<div class="card mt-3"> {{- range where .Site.RegularPages "Params.pageid" "eq" .Params.imgRef -}}
<div class="card-body bg-light"> {{- $refImg = .Params.img -}}
<h5 class="card-text">{{ .Params.teaser }}</h5> {{- $refPage = . -}}
</div> {{- end -}}
{{- end -}}
{{- if not $img -}}
{{- $img = $refImg -}}
{{- end -}}
{{ if $img -}}
{{- $image := (resources.Get (printf "img/%s" $img)).Resize "400x" -}}
{{- if $refPage -}}
<a href="{{ $refPage.Permalink }}"><img
width="100%" class="mt-3"
src="{{ $image.RelPermalink }}" alt="{{ .Params.title }}"></a>
{{- else -}}
<img width="100%" class="mt-3"
src="{{ $image.RelPermalink }}" alt="{{ .Params.title }}">
{{- end -}}
{{- else if .Params.teaser -}}
<div class="card mt-3">
<div class="card-body bg-light">
<h5 class="card-text">{{ .Params.teaser }}</h5>
</div> </div>
{{- else if .Site.Params.defaultImage -}} </div>
<img width="100%" class="mt-3" {{- else if .Site.Params.defaultImage -}}
src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}" alt="dummy"> <img width="100%" class="mt-3"
{{- else if .Params.Summary -}} src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}"
<div class="card mt-3"> alt="Default Dmage">
<div class="card-body bg-light"> {{- else if .Params.Summary -}}
<h5 class="card-text">{{ .Params.Summary }}</h5> <div class="card mt-3">
</div> <div class="card-body bg-light">
<h5 class="card-text">{{ .Params.Summary }}</h5>
</div> </div>
{{- end }} </div>
{{- end }}
{{ with .Params.Topics -}} {{ with .Params.Topics -}}
<div class="card mt-3"> <div class="card mt-3">
<div class="card-header"> <div class="card-header">
<h4 class="card-text">{{i18n "topics"}}</h4> <h4 class="card-text">{{i18n "topics"}}</h4>
</div>
<div class="card-body">
{{ range . -}}
{{- $page := $.GetPage (printf "/topics/%s" .) -}}
<span class="badge rounded-pill bg-secondary m-1">
<a href="{{ $page.Permalink }}">{{ $page.Title }}</a>
</span>
{{- end }}
</div>
</div> </div>
{{- end }} <div class="card-body">
{{ range . -}}
{{ if not .Site.Params.hideParentArticles -}} {{- $page := $.GetPage (printf "/topics/%s" .) -}}
{{- $related := where .Site.RegularPages "Params.pageid" "in" .Params.parents -}} <span class="badge rounded-pill bg-secondary m-1">
{{- partial "card-related" <a href="{{ $page.Permalink }}">{{ $page.Title }}</a>
(dict "related" $related "header" (i18n "parent-articles") "id" "parents") -}} </span>
{{- end }} {{- end }}
{{ if and (not .Site.Params.hideChildArticles)
(ne .Site.Params.showChildArticles "cards") -}}
{{- $related := .Site.RegularPages.RelatedTo (keyVals "parents" .Params.pageid) -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "child-articles") "id" "children") -}}
{{- end }}
{{ if not .Site.Params.hideRelatedArticles -}}
{{- $related := .Site.RegularPages.RelatedIndices . "topics" -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "related-articles") "id" "related") -}}
{{- end }}
{{ if not .Site.Params.hideSiblingArticles -}}
{{- $related := .Site.RegularPages.RelatedIndices . "parents" -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "sibling-articles") "id" "siblings") -}}
{{- end }}
{{ if not .Site.Params.hideSectionArticles -}}
{{- $section := or .Section "posts" -}}
{{- $header := or (i18n (printf "articles-in-%s" $section)) (i18n "articles-in-section") -}}
{{- $related := first 20 (where .Site.RegularPages "Section" $section) -}}
{{- partial "card-related"
(dict "related" $related "header" $header "id" "articles-in-section") -}}
{{- end }}
{{ if not .Site.Params.hideBacklinks -}}
{{- $related := .Scratch.Get "backlinks" -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "backlinks") "id" "backlinks") -}}
{{- end }}
{{ if .Params.showtoc -}}
<div class="card mt-3">
<div class="card-header">
<h4 class="card-text">{{i18n "toc"}}</h4>
</div>
<div class="card-body">
{{ .TableOfContents }}
</div>
</div> </div>
{{ end -}} </div>
{{- end }}
{{ if not .Site.Params.hideParentArticles -}}
{{- $related := where .Site.RegularPages "Params.pageid" "in" .Params.parents -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "parent-articles") "id" "parents") -}}
{{- end }}
{{ if and (not .Site.Params.hideChildArticles)
(ne .Site.Params.showChildArticles "sidebar") -}}
{{- $related := .Site.RegularPages.RelatedTo (keyVals "parents" .Params.pageid) -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "child-articles") "id" "children") -}}
{{- end }}
{{ if not .Site.Params.hideRelatedArticles -}}
{{- $related := .Site.RegularPages.RelatedIndices . "topics" -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "related-articles") "id" "related") -}}
{{- end }}
{{ if not .Site.Params.hideSiblingArticles -}}
{{- $related := .Site.RegularPages.RelatedIndices . "parents" -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "sibling-articles") "id" "siblings") -}}
{{- end }}
{{ if not .Site.Params.hideSectionArticles -}}
{{- $section := or .Section "posts" -}}
{{- $header := or (i18n (printf "articles-in-%s" $section)) (i18n "articles-in-section") -}}
{{- $related := first 20 (where .Site.RegularPages "Section" $section) -}}
{{- partial "card-related"
(dict "related" $related "header" $header "id" "articles-in-section") -}}
{{- end }}
{{ if not .Site.Params.hideBacklinks -}}
{{- $related := .Scratch.Get "backlinks" -}}
{{- partial "card-related"
(dict "related" $related "header" (i18n "backlinks") "id" "backlinks") -}}
{{- end }}
{{ if .Params.showtoc -}}
<div class="card mt-3">
<div class="card-header">
<h4 class="card-text">{{i18n "toc"}}</h4>
</div>
<div class="card-body">
{{ .TableOfContents }}
</div>
</div>
{{ end -}}
</div> </div>