add support for position of feature image

.eleventy_config/filters.js

@@ -4,7 +4,7 @@ const {DateTime} = require('luxon');
 const moment = require('moment/moment');
 const markdown = require('./markdown');
 const hashString = require('./functions').hashString;
-const featuredImageFilter = require('./filters/featured-image');
+const featureImageFilter = require('./filters/feature-image');
 const openGraphImageFilter = require('./filters/open-graph-image');
 const dates = require('./filters/dates');
 
@@ -138,6 +138,6 @@ module.exports = {
     },
     isoString: (date = Date.now()) => new Date(date).toISOString(),
     count: (arr) => arr.length,
-    featuredImageFilter,
+    featureImageFilter,
     openGraphImageFilter,
 };

src/_includes/brewery.njk

@@ -11,9 +11,9 @@ eleventyComputed:
         modified: "{% if updateDate %}{{ updateDate | isoString }}{% endif %}"
 ---
 {% if feature_image %}
-    {%- set optimizedFeaturedImage = feature_image | featuredImageFilter("100vw", "post-header__image", page) %}
+    {%- set optimizedFeatureImage = feature_image | featureImageFilter("100vw", "post-header__image", page) %}
 {% else %}
-    {%- set optimizedFeaturedImage = "" %}
+    {%- set optimizedFeatureImage = "" %}
 {% endif %}
 <style>
 
@@ -42,7 +42,7 @@ eleventyComputed:
                 <svg aria-label="{{ title }}" viewBox="0 0 500 80"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/Gustavs-hembryggeri.svg#brewery"></use></svg>
             </h1>
         </div>
-        {{ optimizedFeaturedImage | safe }}
+        {{ optimizedFeatureImage | safe }}
     </header>
     <section class="post-content wrapper" id="post-content" aria-label="Sidans innehåll">
         {{ content | safe }}
@@ -67,14 +67,14 @@ eleventyComputed:
             {%- for post in collections.ölbryggning | reverse -%}
             {% if loop.index0 < 4 %}
             {%- set canonicalURL = metadata.url + post.data.page.url -%}
-            {%- set optimizedFeaturedImage = post.data.feature_image | featuredImageFilter("50w", "Card__image", post.data.page) %}
+            {%- set optimizedFeatureImage = post.data.feature_image | featureImageFilter("50w", "Card__image", post.data.page) %}
             {%- set parsed_feature_image = post.data.feature_image | parseImagePath(post.url)-%}
-            <article aria-labelledby="{{ post.url | hashString}}" class="Card post -align-bottom{% if optimizedFeaturedImage %} -featured-image{% endif %}" style="{% if optimizedFeaturedImage %} background-image: url({{ optimizedFeaturedImage }});{% endif %}{% if post.data.color %} --color__background__contrast__widget: {{ post.data.color }};{% endif %}">
+            <article aria-labelledby="{{ post.url | hashString}}" class="Card post -align-bottom{% if optimizedFeatureImage %} -feature-image{% endif %}" style="{% if optimizedFeatureImage %} background-image: url({{ optimizedFeatureImage }});{% endif %}{% if post.data.color %} --color__background__contrast__widget: {{ post.data.color }};{% endif %}">
                 <div class="Card__content">
                     <h3 class="Card__title"><a id="{{ post.url | hashString}}" class="Card__title-link" href="{{ post.url }}">{{ post.data.title }}</a></h3>
                     {% if post.data.page.date %}<p class="Card__metadata"><time firstletterupper class="timeago" datetime="{{ post.data.page.date | fullISODate }}" title="{{ post.data.page.date | shortISODate }}">{{ post.data.page.date | readableDate }}</time></p>{% endif %}
                 </div>
-                {{ optimizedFeaturedImage | safe }}
+                {{ optimizedFeatureImage | safe }}
                 {% if (post.data.tags.length) %}<span class="Card__content__extra -top-left">
                     {% if (post.data.tags) %}<span class="tags"><span class="sr-only">Taggar: </span>
                         {%- for tag in post.data.tags -%}

src/_includes/page.njk

@@ -11,13 +11,13 @@ eleventyComputed:
 ---
 {%- set canonicalURL = metadata.url + page.url -%}
 {% if feature_image %}
-    {%- set optimizedFeaturedImage = feature_image | featuredImageFilter("100vw", "page-header__image", page) %}
+    {%- set optimizedFeatureImage = feature_image | featureImageFilter("100vw", "page-header__image", page) %}
 {% else %}
-    {%- set optimizedFeaturedImage = "" %}
+    {%- set optimizedFeatureImage = "" %}
 {% endif %}
 <article class="page">
     <header id="page-header" class="page-header{% if feature_image %} -feature-image{% endif %}">
-        {{ optimizedFeaturedImage | safe }}
+        {{ optimizedFeatureImage | safe }}
         <div class="page-metadata">
             <h1 class="page-title">{{ title }}</h1>
         </div>

src/_includes/partials/next-post-in-series.njk

@@ -1,13 +1,13 @@
 {% if series and nextPost %}
 {% if nextPost and nextPost.data.feature_image %}
-    {%- set nextPostOptimizedFeaturedImage = nextPost.data.feature_image | featuredImageFilter("100vw", "next-post__image", nextPost.data.page) %}
+    {%- set nextPostOptimizedFeatureImage = nextPost.data.feature_image | featureImageFilter("100vw", "next-post__image", nextPost.data.page) %}
 {% endif %}
-<article role="complementary" id="read-more" aria-labelledby="next-post__title" class="next-post hidden@print">
+<article role="complementary" id="read-more" aria-labelledby="next-post__title" class="next-post{% if nextPost.data.feature_image %} -feature-image{% endif %}{% if nextPost.data.feature_image_position %} -feature-image--{{ nextPost.data.feature_image_position }}{% endif %} hidden@print">
     <section class="next-post__metadata">
         {% set seriesTitle = tagMetadata[series].title or series %}
         <p id="read-more__text" class="read-more-text">~ Läs nästa inlägg i {{ seriesTitle }} ~</p>
         <a id="next-post__title" class="next-post__title" href="{{ nextPost.url }}" style="view-transition-name: post-title-{{ nextPost.url | hashString}}">{{ nextPost.data.title }}</a>
         {% if nextPost.data.page.date %}<p class="next-post__date"><time datetime="{{ nextPost.data.page.date | fullISODate }}" title="{{ nextPost.data.page.date | longISODate }}">{{ nextPost.data.page.date | readableLongDate }}</time></p>{% endif %}
     </section>
-    {{ nextPostOptimizedFeaturedImage | safe }}
+    {{ nextPostOptimizedFeatureImage | safe }}
 </article>{% endif %}

src/_includes/post.njk

@@ -11,14 +11,14 @@ eleventyComputed:
 ---
 {%- set canonicalURL = metadata.url + page.url -%}
 {% if feature_image %}
-    {%- set optimizedFeaturedImage = feature_image | featuredImageFilter("100vw", "post-header__image", page) %}
+    {%- set optimizedFeatureImage = feature_image | featureImageFilter("100vw", "post-header__image", page) %}
 {% else %}
-    {%- set optimizedFeaturedImage = "" %}
+    {%- set optimizedFeatureImage = "" %}
 {% endif %}
 {% if series %}{%- set nextPost = collections[series] | removePostsNotInSeries(series) | getNextCollectionItem(page) %}{% endif %}
 <article class="post">
-    <header id="post-header" class="post-header{% if feature_image %} -feature-image{% endif %}">
-        {{ optimizedFeaturedImage | safe }}
+    <header id="post-header" position="{{ feature_image_position }}" class="post-header{% if feature_image %} -feature-image{% endif %}{% if feature_image_position %} -feature-image--{{ feature_image_position }}{% endif %}">
+        {{ optimizedFeatureImage | safe }}
         <div class="post-metadata">
             <h1 class="post-title" style="view-transition-name: post-title-{{ page.url | hashString}}">{{ title }}</h1>
             {% if page.date %}<p class="post-date"><time datetime="{{ page.date | fullISODate }}" title="{{ page.date | longISODate }}">{{ page.date | readableLongDate }}</time></p>{% endif %}

src/_sass/05.objects/Card.scss

@@ -62,15 +62,41 @@
         }
     }
 
-    &.-featured-image:after {
-        content: "";
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(0deg,#000 0,rgba(0, 0, 0, 0.7) 4em,transparent 8em);
+    &.-feature-image {
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(0deg,#000 0,rgba(0, 0, 0, 0.7) 4em,transparent 8em);
+        }
+
+        &--bottom {
+            img {
+                object-position: bottom;
+            }
+        }
+
+        &--top {
+            img {
+                object-position: top;
+            }
+        }
+
+        &--left {
+            img {
+                object-position: left;
+            }
+        }
+
+        &--right {
+            img {
+                object-position: right;
+            }
+        }
     }
 }
 

src/_sass/06.components/post__header.scss

@@ -83,6 +83,30 @@
                 object-position: center;
             }
         }
+
+        &--bottom {
+            .post-header__image img {
+                object-position: bottom;
+            }
+        }
+
+        &--top {
+            .post-header__image img {
+                object-position: top;
+            }
+        }
+
+        &--left {
+            .post-header__image img {
+                object-position: left;
+            }
+        }
+
+        &--right {
+            .post-header__image img {
+                object-position: right;
+            }
+        }
     }
 
 }

src/_sass/06.components/post__next-post.scss

@@ -59,7 +59,7 @@
         margin-top: var(--padding__small);
     }
 
-    .next-post__image {
+    &__image {
         position: absolute;
         height: 100%;
         width: 100%;
@@ -76,6 +76,32 @@
         }
     }
 
+    &.-feature-image {
+        &--bottom {
+            .next-post__image img {
+                object-position: bottom;
+            }
+        }
+
+        &--top {
+            .next-post__image img {
+                object-position: top;
+            }
+        }
+
+        &--left {
+            .next-post__image img {
+                object-position: left;
+            }
+        }
+
+        &--right {
+            .next-post__image img {
+                object-position: right;
+            }
+        }
+    }
+
     &:after {
         position: absolute;
         top: 0;

src/feed.njk

@@ -18,7 +18,7 @@
     {%- for post in collections.posts | reverse -%}
     {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
     {% if post.data.feature_image %}
-        {%- set optimizedFeaturedImage = post.data.feature_image | featuredImageFilter("100vw", "", post.data.page)%}
+        {%- set optimizedFeatureImage = post.data.feature_image | featureImageFilter("100vw", "", post.data.page)%}
     {% endif %}
     <entry>
         <title>{{ post.data.title }}</title>
@@ -26,7 +26,7 @@
         <updated>{{ post.date | dateToRfc3339 }}</updated>
         <id>{{ absolutePostUrl }}</id>
         <content type="html">
-            {% if post.data.feature_image %}{{ optimizedFeaturedImage | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}{% endif %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}
+            {% if post.data.feature_image %}{{ optimizedFeatureImage | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}{% endif %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}
         </content>
     </entry>
     {%- endfor %}

src/index.njk

@@ -9,13 +9,13 @@ templateClass: home-template
     {% if loop.index0 < 4 %}
     {%- set canonicalURL = metadata.url + post.data.page.url -%}
     {% if loop.index0 == 0 %}
-        {%- set optimizedFeaturedImage = post.data.feature_image | featuredImageFilter("(max-width: 1160px) 100vw, 1160px", "Card__image", post.data.page) %}
+        {%- set optimizedFeatureImage = post.data.feature_image | featureImageFilter("(max-width: 1160px) 100vw, 1160px", "Card__image", post.data.page) %}
     {% else %}
-        {%- set optimizedFeaturedImage = post.data.feature_image | featuredImageFilter("400px", "Card__image", post.data.page) %}
+        {%- set optimizedFeatureImage = post.data.feature_image | featureImageFilter("400px", "Card__image", post.data.page) %}
     {% endif %}
 
 
-    <article aria-labelledby="{{ post.url | hashString}}" class="Card post -align-bottom{% if optimizedFeaturedImage %} -featured-image{% endif %}{% if post.data.feature_image_position %} -featured-image--{{ post.data.feature_image_position }}{% endif %}">
+    <article aria-labelledby="{{ post.url | hashString}}" class="Card post -align-bottom{% if optimizedFeatureImage %} -feature-image{% endif %}{% if post.data.feature_image_position %} -feature-image--{{ post.data.feature_image_position }}{% endif %}">
         <div class="Card__content">
             <h3 class="Card__title" style="view-transition-name: post-title-{{ post.url | hashString}}"><a id="{{ post.url | hashString}}" class="Card__title-link" href="{{ post.url }}">{{ post.data.title }}</a></h3>
             {% if post.data.page.date %}<p class="Card__metadata"><time firstletterupper class="timeago" datetime="{{ post.data.page.date | fullISODate }}" title="{{ post.data.page.date | longISODate }}">{{ post.data.page.date | readableLongDate }}</time></p>{% endif %}
@@ -28,7 +28,7 @@ templateClass: home-template
                 {%- endfor -%}
             </span>{% endif %}
         </span>{% endif %}
-        {{ optimizedFeaturedImage | safe }}
+        {{ optimizedFeatureImage | safe }}
     </article>
     {% endif %}
     {%- endfor -%}
@@ -36,7 +36,7 @@ templateClass: home-template
     <p>Läs {{ collections.posts.length-4 }} fler inlägg i <a href="/blogg/">bloggen</a>.</p>
 <h2 id="annan-lasning">Lästips</h2>
 <section class="Cards series" aria-labelledby="annan-lasning">
-    <article aria-labelledby="{{ "/kinaresan/" | hashString }}" class="Card -align-bottom -featured-image">
+    <article aria-labelledby="{{ "/kinaresan/" | hashString }}" class="Card -align-bottom -feature-image">
         <div class="Card__content">
             <h3 class="Card__title"><a id="{{ "/kinaresan/" | hashString }}" class="Card__title-link" href="/kinaresan/">Kinaresan</a></h3>
             <p><time>2014</time> · <span>{{ collections['kinaresan'].length }} inlägg</span></p>
@@ -47,7 +47,7 @@ templateClass: home-template
                     alt="">
         </figure>
     </article>
-    <article aria-labelledby="{{ "/tagluffen/" | hashString }}" class="Card -align-bottom -featured-image">
+    <article aria-labelledby="{{ "/tagluffen/" | hashString }}" class="Card -align-bottom -feature-image">
         <div class="Card__content">
             <h3 class="Card__title"><a id="{{ "/tagluffen/" | hashString }}" class="Card__title-link" href="/tagluffen/">Tågluffen</a></h3>
             <p><time>2019</time> · <span>{{ collections['tågluffen'].length }} inlägg</span></p>
@@ -58,7 +58,7 @@ templateClass: home-template
                     alt="">
         </figure>
     </article>
-    <article aria-labelledby="{{ "/friluftsliv/" | hashString }}" class="Card -align-bottom -featured-image">
+    <article aria-labelledby="{{ "/friluftsliv/" | hashString }}" class="Card -align-bottom -feature-image">
         <div class="Card__content">
             <h3 class="Card__title"><a id="{{ "/friluftsliv/" | hashString }}" class="Card__title-link" href="/friluftsliv/">Friluftsliv</a></h3>
             <p><span>{{ collections['friluftsliv'].length }} inlägg</span></p>

src/pages/lanktips.njk

@@ -24,7 +24,7 @@ eleventyComputed:
     <section aria-label="Lista över innehåll" class="page-content wrapper Cards" id="page-content">
             {% for post in inoreader.recommendations %}
             {%- set computedDate = post.date | dateFromString -%}
-            <article aria-labelledby="{{ post.url | hashString }}" class="Card bookmark -align-bottom{% if post.feature_image %} -featured-image{% endif %}" style="{% if post.feature_image %} background-image: url({{ post.feature_image }});{% endif %}">
+            <article aria-labelledby="{{ post.url | hashString }}" class="Card bookmark -align-bottom{% if post.feature_image %} -feature-image{% endif %}" style="{% if post.feature_image %} background-image: url({{ post.feature_image }});{% endif %}">
                 {% if (post.tags.length) %}<span class="Card__content__extra -top-left">
                     {% if (post.tags) %}<span class="tags">
                         {%- for tag in post.tags -%}

src/posts/published/resor/stöttingfjället-2023/2023-07-08_roadtrippen-hem/2023-07-08_roadtrippen-hem.md

@@ -2,6 +2,7 @@
 title: "Roadtrippen hem"
 description: ""
 feature_image: "20230708_135822.jpg"
+feature_image_position: bottom
 date: 2023-07-08T18:16:04+0200
 tags:
     - resor

src/tags/tags.feed.njk

@@ -28,7 +28,7 @@ permalink: /{{ tag | slug }}/feed.xml
     {%- for post in taglist | reverse -%}
     {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
     {% if post.data.feature_image %}
-    {%- set optimizedFeaturedImage = post.data.feature_image | featuredImageFilter("100vw", "", post.data.page)%}
+    {%- set optimizedFeatureImage = post.data.feature_image | featureImageFilter("100vw", "", post.data.page)%}
     {% endif %}
     <entry>
         <title>{{ post.data.title }}</title>
@@ -36,7 +36,7 @@ permalink: /{{ tag | slug }}/feed.xml
         <updated>{{ post.date | dateToRfc3339 }}</updated>
         <id>{{ absolutePostUrl }}</id>
         <content type="html">
-            {% if post.data.feature_image %}{{ optimizedFeaturedImage | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}{% endif %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}
+            {% if post.data.feature_image %}{{ optimizedFeatureImage | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}{% endif %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | utf8_xml }}
         </content>
     </entry>
     {%- endfor %}

src/tags/tags.njk

@@ -25,7 +25,7 @@ templateClass: tag-template
             {% if tagData.type === 'subject' %}<p><svg class="icon icon--feed" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/rss.svg#rss"></use></svg> <a href="/{{ tag | slug }}/feed.xml">Flöde för {{ title or tag }}</a></p>{% endif %}
             {% if tagData.description %}{{ tagData.description | renderUsingMarkdown | safe }}{% endif %}
         </div>
-        {{ optimizedFeaturedImage | safe }}
+        {{ optimizedFeatureImage | safe }}
     </header>
     <section class="tag-content content" id="tag-content">
         {% set taglist = collections[ tag ] %}