add image procesing shortcode
10
CHANGELOG.md
|
@ -1,6 +1,6 @@
|
||||||
- BREAKING
|
- FEATURE
|
||||||
- rename description and keyword variables
|
- add feature image handling for blog posts
|
||||||
- rename logo variable
|
- add image processing shortcode
|
||||||
- rename subtitle variable
|
|
||||||
- ENHANCEMENT
|
- ENHANCEMENT
|
||||||
- add partial for json-ld structured data
|
- simplify image handling in json-ld schema
|
||||||
|
- cleanup thumbnail selection
|
||||||
|
|
After Width: | Height: | Size: 3.1 MiB |
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Post with image"
|
title: "Post with images"
|
||||||
date: 2020-06-22T20:00:00+02:00
|
date: 2020-06-22T20:00:00+02:00
|
||||||
authors:
|
authors:
|
||||||
- richard-roe
|
- richard-roe
|
||||||
|
@ -8,8 +8,16 @@ tags:
|
||||||
- Open Source
|
- Open Source
|
||||||
- Development
|
- Development
|
||||||
- DevOps
|
- 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.
|
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.
|
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.
|
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 169 KiB |
After Width: | Height: | Size: 382 KiB |
After Width: | Height: | Size: 8.1 KiB |
After Width: | Height: | Size: 588 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 79 KiB |
|
@ -3,14 +3,16 @@
|
||||||
<header class="gblog-post__header">
|
<header class="gblog-post__header">
|
||||||
{{ $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }}
|
{{ $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }}
|
||||||
{{ with $source }}
|
{{ with $source }}
|
||||||
<picture class="gblog-post__figure">
|
<div class="gblog-post__feature">
|
||||||
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") }}
|
<picture>
|
||||||
<source srcset="{{ .Permalink }}" type="image/webp">
|
{{ $featured := .Fill (printf "910x280 %s" (default "Smart" .Params.anchor)) }}
|
||||||
{{ end }}
|
|
||||||
{{ $featured := .Fill (printf "950x285 %s" (default "Smart" .Params.anchor)) }}
|
|
||||||
<source srcset="{{ $featured.Permalink }}">
|
<source srcset="{{ $featured.Permalink }}">
|
||||||
<img src="{{ $featured.Permalink }}" alt="{{ default $.Title .Params.description }}" >
|
<img src="{{ $featured.Permalink }}" alt="{{ default $.Title .Params.description }}" >
|
||||||
</picture>
|
</picture>
|
||||||
|
{{ with $source.Params.credits }}
|
||||||
|
<span>Credits: {{ . | markdownify | safeHTML }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<h1>{{ partial "title" . }}</h1>
|
<h1>{{ partial "title" . }}</h1>
|
||||||
|
@ -18,13 +20,6 @@
|
||||||
|
|
||||||
<section class="gblog-markdown">
|
<section class="gblog-markdown">
|
||||||
{{ partial "content" . }}
|
{{ partial "content" . }}
|
||||||
{{ with $source }}
|
|
||||||
{{ if .Params.credits }}
|
|
||||||
<ul class="gblog-post__credits">
|
|
||||||
<li>{{ . | humanize }} image: {{ .Params.credits | safeHTML }}</li>
|
|
||||||
</ul>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -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 }}
|
|
@ -261,12 +261,50 @@ img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__figure {
|
&__feature {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: $padding-32;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
min-height: 180px;
|
||||||
margin-bottom: $padding-32;
|
|
||||||
object-fit: cover;
|
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 {
|
.gblog-error {
|
||||||
padding: $padding-16 * 6 $padding-16;
|
padding: $padding-16 * 6 $padding-16;
|
||||||
|
|
||||||
|
|