add image procesing shortcode

This commit is contained in:
Robert Kaussow 2020-07-27 20:17:55 +02:00
parent da6c845d06
commit 833e286134
No known key found for this signature in database
GPG Key ID: 65362AE74AF98B61
14 changed files with 100 additions and 26 deletions

View File

@ -1,6 +1,6 @@
- BREAKING
- rename description and keyword variables
- rename logo variable
- rename subtitle variable
- FEATURE
- add feature image handling for blog posts
- add image processing shortcode
- ENHANCEMENT
- add partial for json-ld structured data
- simplify image handling in json-ld schema
- cleanup thumbnail selection

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

View File

@ -1,5 +1,5 @@
---
title: "Post with image"
title: "Post with images"
date: 2020-06-22T20:00:00+02:00
authors:
- richard-roe
@ -8,8 +8,16 @@ tags:
- Open Source
- Development
- DevOps
resources:
- name: testimage
src: 'images/testimage.jpg'
title: This is a test image
params:
credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)"
---
Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram. Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.
{{< img name="testimage" size="small" >}}
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

View File

@ -3,14 +3,16 @@
<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)) }}
<div class="gblog-post__feature">
<picture>
{{ $featured := .Fill (printf "910x280 %s" (default "Smart" .Params.anchor)) }}
<source srcset="{{ $featured.Permalink }}">
<img src="{{ $featured.Permalink }}" alt="{{ default $.Title .Params.description }}" >
</picture>
{{ with $source.Params.credits }}
<span>Credits: {{ . | markdownify | safeHTML }}</span>
{{ end }}
</div>
{{ end }}
<h1>{{ partial "title" . }}</h1>
@ -18,13 +20,6 @@
<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 }}

View File

@ -0,0 +1,38 @@
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }}
{{ $customAlt := .Get "alt" }}
{{ $customSize := .Get "size" }}
{{ with $source }}
{{ $caption := default .Title $customAlt }}
{{ $tiny := (.Resize "320x").RelPermalink }}
{{ $small := (.Resize "600x").RelPermalink }}
{{ $medium := (.Resize "1200x").RelPermalink }}
{{ $large := (.Resize "1800x").RelPermalink }}
{{ $size := dict "tiny" $tiny "small" $small "medium" $medium "large" $large }}
<div class="flex justify-center">
<figure class="gblog-post__figure">
<a href="{{ .RelPermalink }}">
<img
{{ with $customSize }}
src="{{ index $size $customSize }}" alt="{{ $caption }}"
{{ else }}
srcset="{{ $size.tiny }} 320w,
{{ $size.small }} 600w,
{{ $size.medium }} 1200w,
{{ $size.large }} 2x"
sizes="(max-width: 320px) 320w,
(max-width: 600px) 600w,
(max-width: 1200px) 1200w,
2x"
src="{{ $size.large }}" alt="{{ $caption }}"
{{ end }}/>
</a>
{{ with $caption }}
<figcaption>{{ . }}{{ with $source.Params.credits }} ({{ . | markdownify }}){{ end }}</figcaption>
{{ end }}
</figure>
</div>
{{ end }}

View File

@ -261,12 +261,50 @@ img {
}
}
&__figure {
&__feature {
position: relative;
margin-bottom: $padding-32;
img {
width: 100%;
height: auto;
margin-bottom: $padding-32;
min-height: 180px;
object-fit: cover;
overflow: hidden;
}
span {
background: rgba($gray-900, 0.7);
position: absolute;
bottom: 0;
right: 0;
padding: $padding-4;
font-size: 0.9em;
color: $gray-300;
}
a:hover,
a:visited {
color: $gray-300!important;
}
}
&__figure {
padding: $padding-4 $padding-4 0 $padding-4;
margin: $padding-16 0;
background-color: $gray-300;
display: table;
figcaption {
display: table-caption;
caption-side: bottom;
background-color: $gray-300;
padding: $padding-4;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
}
@ -430,11 +468,6 @@ img {
}
}
.gblog-post__figure,
.gblog-post__credits {
display: none;
}
.gblog-error {
padding: $padding-16 * 6 $padding-16;