github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-22 05:00:39 +00:00
Code Issues Projects Releases Wiki Activity

add feature image for blog posts

Browse Source
This commit is contained in:
Robert Kaussow 2020-07-26 14:47:12 +02:00
parent fd7c3a72c1
commit e1ea8a82fe
No known key found for this signature in database
GPG Key ID: 65362AE74AF98B61
2 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
layouts/_default/single.html
View File

@ -1,11 +1,30 @@
{{ define "main" }}
<article class="gblog-post">
<header class="gblog-post__header">
{{ $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }}
{{ with $source }}
<picture class="gblog-post__figure">
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") }}
<source srcset="{{ .Permalink }}" type="image/webp">
{{ end }}
{{ $featured := .Fill (printf "950x285 %s" (default "Smart" .Params.anchor)) }}
<source srcset="{{ $featured.Permalink }}">
<img src="{{ $featured.Permalink }}" alt="{{ default $.Title .Params.description }}" >
</picture>
{{ end }}
<h1>{{ partial "title" . }}</h1>
</header>
<section class="gblog-markdown">
{{ partial "content" . }}
{{ with $source }}
{{ if .Params.credits }}
<ul class="gblog-post__credits">
<li>{{ . | humanize }} image: {{ .Params.credits | safeHTML }}</li>
</ul>
{{ end }}
{{ end }}
</section>
</article>
{{ end }}

21
src/sass/_base.scss
View File

@ -261,6 +261,15 @@ img {
}
}
&__figure {
img {
width: 100%;
height: auto;
margin-bottom: $padding-32;
object-fit: cover;
}
}
&__footer {
:not(:first-child).no-wrap {
margin-left: $padding-8;
@ -270,6 +279,13 @@ img {
font-size: 1.2em;
}
}
&__credits {
margin-top: 1.5rem;
color: $gray-600;
font-size: 0.9em;
list-style-type: none
}
}
.gblog-footer {
@ -414,6 +430,11 @@ img {
}
}
.gblog-post__figure,
.gblog-post__credits {
display: none;
}
.gblog-error {
padding: $padding-16 * 6 $padding-16;