diff --git a/CHANGELOG.md b/CHANGELOG.md index 96887a7..b0eef44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/exampleSite/content/posts/post-with-images/images/testimage.jpg b/exampleSite/content/posts/post-with-images/images/testimage.jpg new file mode 100644 index 0000000..09bdc9e Binary files /dev/null and b/exampleSite/content/posts/post-with-images/images/testimage.jpg differ diff --git a/exampleSite/content/posts/post-with-image/index.md b/exampleSite/content/posts/post-with-images/index.md similarity index 75% rename from exampleSite/content/posts/post-with-image/index.md rename to exampleSite/content/posts/post-with-images/index.md index ef0cab1..2472c70 100644 --- a/exampleSite/content/posts/post-with-image/index.md +++ b/exampleSite/content/posts/post-with-images/index.md @@ -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. diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_100x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_100x0_resize_q75_box.jpg new file mode 100644 index 0000000..ec237c0 Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_100x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_1200x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_1200x0_resize_q75_box.jpg new file mode 100644 index 0000000..7b1f0b5 Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_1200x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_1800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_1800x0_resize_q75_box.jpg new file mode 100644 index 0000000..9fbccde Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_1800x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_200x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_200x0_resize_q75_box.jpg new file mode 100644 index 0000000..4688d34 Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_200x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_2200x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_2200x0_resize_q75_box.jpg new file mode 100644 index 0000000..97653e3 Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_2200x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_320x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_320x0_resize_q75_box.jpg new file mode 100644 index 0000000..ac3dbbc Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_320x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_600x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_600x0_resize_q75_box.jpg new file mode 100644 index 0000000..bbd45f5 Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_600x0_resize_q75_box.jpg differ diff --git a/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_800x0_resize_q75_box.jpg new file mode 100644 index 0000000..2ebd5ee Binary files /dev/null and b/exampleSite/resources/_gen/images/posts/post-with-images/images/testimage_hu4c4ab98fce5973efb7f0552de9f787ac_3203298_800x0_resize_q75_box.jpg differ diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 2d6d7d3..5393b66 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,14 +3,16 @@
{{ $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }} {{ with $source }} - - {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") }} - - {{ end }} - {{ $featured := .Fill (printf "950x285 %s" (default "Smart" .Params.anchor)) }} +
+ + {{ $featured := .Fill (printf "910x280 %s" (default "Smart" .Params.anchor)) }} {{ default $.Title .Params.description }} + {{ with $source.Params.credits }} + Credits: {{ . | markdownify | safeHTML }} + {{ end }} +
{{ end }}

{{ partial "title" . }}

@@ -18,13 +20,6 @@
{{ partial "content" . }} - {{ with $source }} - {{ if .Params.credits }} -
    -
  • {{ . | humanize }} image: {{ .Params.credits | safeHTML }}
    • -
- {{ end }} - {{ end }}
{{ end }} diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html new file mode 100644 index 0000000..3c12733 --- /dev/null +++ b/layouts/shortcodes/img.html @@ -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 }} + +
+
+ + {{ $caption }} + + {{ with $caption }} +
{{ . }}{{ with $source.Params.credits }} ({{ . | markdownify }}){{ end }}
+ {{ end }} +
+
+{{ end }} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 6a5a696..fa89529 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -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;