feat: add Cover image to Book layout

This commit is contained in:
Geo 2022-05-16 19:44:32 +01:00
commit 2d2e58d8f4
2 changed files with 32 additions and 1 deletions

View file

@ -25,7 +25,12 @@
.article-banner {
width: 100%;
height: auto;
height: 260px;
object-fit: cover;
@include media-breakpoint-up(lg) {
height: 310px; /* Increased height on desktop */
}
}
.featured-image-wrapper {

View file

@ -32,7 +32,33 @@
{{ if $show_breadcrumb }}
{{ partial "components/breadcrumb" $current_page }}
{{ end }}
</div>
{{/* Cover image */}}
{{ if and .Params.cover.image }}
<div class="article-header">
{{- $img := "" -}}
{{ $alt := (.Params.cover.caption | default "") | plainify }}
{{ $destination := .Params.cover.image }}
{{ $is_remote := strings.HasPrefix $destination "http" }}
{{- if not $is_remote -}}
{{- $img = (.Page.Resources.ByType "image").GetMatch $destination -}}
{{- if not $img -}}
{{- $img = resources.Get (path.Join "media" $destination) -}}
{{- end -}}
{{- end -}}
{{ if $img }}
{{ $img = $img.Fit "1800x310 webp" }}
<img src="{{$img.RelPermalink}}" width="{{$img.Width}}" height="{{$img.Height}}" class="article-banner" alt="{{$alt}}">
{{ else }}
<img src="{{ .Params.cover.image }}" class="article-banner" alt="{{$alt}}">
{{ end }}
{{ with .Params.cover.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>
{{end}}
<div class="docs-article-container">
<h1>{{ .Title }}</h1>
<div class="article-style">