Merge pull request #64 from codeofdusk/footer-img-alt

Add alt text to footer links

.gitignore

@@ -6,6 +6,7 @@
 *.exe
 *.o
 *.so
+resources/
 
 # Packages #
 ############
@@ -34,4 +35,4 @@
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
+Thumbs.db

README.md

@@ -88,6 +88,9 @@ resources:
   src: "Filename of the post's featured image, used as the card image and the image at the top of the article"
   params:
     description: "Description for the featured image, used as the alt text"
+    attribution:
+      name: "Name of person to attribute image to"
+      link: "optional URL to persons site"
 ---
 ```
 

archetypes/posts.md

@@ -13,4 +13,7 @@ resources:
   src: ""
   params:
     description: ""
+    attribution:
+      name: ""
+      link: ""
 ---

assets/css/style.css

@@ -23,7 +23,6 @@ p {
     display: flex;
     flex-direction: column;
     z-index: -1;
-    color: white;
     background-position: center;
     background-size: cover;
 }
@@ -58,7 +57,7 @@ p {
 .nav-bar {
     max-width: 60rem;
     width: 100%;
-    padding: 0.4em 0;
+    padding: 0.6em 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -455,7 +454,7 @@ footer {
     margin: 1rem 0;
 }
 .footer-icon {
-    max-width: 3.2rem;
+    max-width: 3rem;
     margin: 0;
 }
 @media screen and (pointer: coarse) {

layouts/_default/home.html

@@ -12,7 +12,13 @@
         </div>
         {{ with resources.GetMatch .Site.Params.headshotimg -}}
         <div class="home-faceshot-card">
-          <img class="home-faceshot" src="{{ .Permalink }}" >
+          <picture>
+            {{ $faceshot := .Resize "272x Lanczos" }}
+            {{ $faceshot_x2 := .Resize "544x Lanczos" }}
+            {{ $faceshot_x3 := .Resize "816x Lanczos" }}
+            <source srcset="{{ $faceshot.Permalink }} 1x, {{ $faceshot_x2.Permalink }} 2x, {{ $faceshot_x3.Permalink }} 3x">
+            <img class="home-faceshot" src="{{ $faceshot.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
+          </picture>
         </div>
         {{ end -}}
       </header>

layouts/_default/li-next.html

@@ -4,11 +4,11 @@
   <div class="card-img-container">
     <p class="card-img-overlay">Next Article</p>
     <picture>
-      {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
-      <source srcset="{{ .Permalink }}" type="image/webp">
-      {{- end }}
-      <source srcset="{{ .Permalink }}">
-      <img src="{{ .Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
+      {{ $thumbnail := .Resize "400x Lanczos" }}
+      {{ $thumbnail_2 := .Resize "800x Lanczos" }}
+      {{ $thumbnail_3 := .Resize "1200x Lanczos" }}
+      <source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
+      <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
     </picture>
   </div>
   {{ end }}

layouts/_default/li.html

@@ -3,11 +3,10 @@
   {{ with .Resources.GetMatch "featuredImage" }}
   <div class="card-img-container">
     <picture>
-      {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
-      <source srcset="{{ .Permalink }}" type="image/webp">
-      {{- end }}
-      {{ $thumbnail := .Fit "800x600 Lanczos" }}
-      <source srcset="{{ $thumbnail.Permalink }}">
+      {{ $thumbnail := .Resize "400x Lanczos" }}
+      {{ $thumbnail_2 := .Resize "800x Lanczos" }}
+      {{ $thumbnail_3 := .Resize "1200x Lanczos" }}
+      <source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
       <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
     </picture>
   </div>

layouts/_default/single.html

@@ -11,13 +11,19 @@
         </header>
         {{ with .Resources.GetMatch "featuredImage" -}}
         <picture class="post-figure">
-          {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
-          <source srcset="{{ .Permalink }}" type="image/webp">
-          {{- end }}
-          {{ $featured := .Resize "800x Lanczos" }}
-          <source srcset="{{ $featured.Permalink }}">
+          {{ $featured := .Resize "711x Lanczos" }}
+          {{ $featured_2 := .Resize "1422x Lanczos" }}
+          {{ $featured_3 := .Resize "2133x Lanczos" }}
+          <source srcset="{{ $featured.Permalink }} 1x, {{ $featured_2.Permalink }} 2x, {{ $featured_3.Permalink }} 3x">
           <img src="{{ $featured.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
         </picture>
+        {{ with .Params.attribution -}}
+          <small>Image by&nbsp;
+            {{- with .link }}<a href="{{ . }}" target="_blank" rel="noreferrer noopener">{{ end -}}
+            {{- .name -}}
+            {{- with .link }}</a>{{ end -}}
+          </small>
+        {{- end }}
         {{- end }}
         {{ if .Params.toc -}}
           <h2>Contents</h2>

layouts/partials/footer.html

@@ -1,20 +1,20 @@
 <footer class="side-padding" style="background-image: url('{{ "img/home-blob-flip.svg" | absURL }}');">
     <a href="{{ $.Site.BaseURL }}" class="footer-link">
     {{ with resources.Get "icons/home-page.png" }}
-        <img class="footer-icon" src="{{ .Permalink }}">
+        <img class="footer-icon" src="{{ .Permalink }}" alt="Home">
     {{ end }}
     </a>
     {{ if isset $.Site.Params "github"}}
     <a href="{{ $.Site.Params.github }}" class="footer-link">
     {{ with resources.Get "icons/github.png" }}
-        <img class="footer-icon" src="{{ .Permalink }}" />
+        <img class="footer-icon" src="{{ .Permalink }}" alt="GitHub"/>
     {{ end }}
     </a>
     {{ end }}
     {{ if isset $.Site.Params "linkedin"}}
     <a href="{{ $.Site.Params.linkedin }}" class="footer-link">
     {{ with resources.Get "icons/linkedin.png" }}
-        <img class="footer-icon" src="{{ .Permalink }}" />
+        <img class="footer-icon" src="{{ .Permalink }}" alt="LinkedIn"/>
     {{ end }}
     </a>
     {{ end }}

layouts/shortcodes/image.html

@@ -1,11 +1,10 @@
 <picture>
-    {{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}
-        <source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">
-    {{- end }}
     {{ $image := $.Page.Resources.GetMatch (.Get "src") }}
-    {{ if gt $image.Width 800 -}}
-        {{ $resized := $image.Resize "800x Lanczos" }}
-        <source srcset="{{ $resized.Permalink }}">
+    {{ if gt $image.Width 711 -}}
+        {{ $resized := $image.Resize "711x Lanczos" }}
+        {{ $resized_2 := $image.Resize "1422x Lanczos" }}
+        {{ $resized_3 := $image.Resize "2133x Lanczos" }}
+        <source srcset="{{ $resized.Permalink }} 1x, {{ $resized_2.Permalink }} 2x, {{ $resized_3.Permalink }} 3x">
         <img src="{{ $resized.Permalink }}" {{ if isset .Params "alt" -}} alt="{{ .Get "alt"}}" {{- end }}>
     {{ else }}
         <source srcset="{{ $image.Permalink }}">

layouts/shortcodes/smallimg.html

@@ -1,15 +1,18 @@
 <picture class="small-pic {{ if eq .Params.clear "true" -}} clear {{- end }}">
-    {{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}
-        <source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">
-    {{- end }}
     {{ $image := $.Page.Resources.GetMatch (.Get "src") }}
-    {{ if or (gt $image.Width 800) (and (isset .Params "width") (gt $image.Width (.Get "width"))) -}}
-        {{ $.Scratch.Set "imgwidth" "800" }}
-        {{ if and (isset .Params "width") (lt (.Get "width") 800) -}}
-            {{ $.Scratch.Set "imgwidth" (trim (.Get "width") "px") }}
+    {{ if or (gt $image.Width 711) (and (isset .Params "width") (gt $image.Width (.Get "width"))) -}}
+        {{ $.Scratch.Set "imgwidth" "711" }}
+        {{ $.Scratch.Set "imgwidth_2" "1422" }}
+        {{ $.Scratch.Set "imgwidth_3" "2133" }}
+        {{ if and (isset .Params "width") (lt (.Get "width") 711) -}}
+            {{ $.Scratch.Set "imgwidth" (int (trim (.Get "width") "px")) }}
+            {{ $.Scratch.Set "imgwidth_2" (mul (int (trim (.Get "width") "px")) 2) }}
+            {{ $.Scratch.Set "imgwidth_3" (mul (int (trim (.Get "width") "px")) 3) }}
         {{- end }}
-        {{ $resized := $image.Resize (printf "%sx Lanczos" ($.Scratch.Get "imgwidth")) }}
-        <source srcset="{{ $resized.Permalink }}">
+        {{ $resized := $image.Resize (printf "%dx Lanczos" ($.Scratch.Get "imgwidth")) }}
+        {{ $resized_2 := $image.Resize (printf "%dx Lanczos" ($.Scratch.Get "imgwidth_2")) }}
+        {{ $resized_3 := $image.Resize (printf "%dx Lanczos" ($.Scratch.Get "imgwidth_3")) }}
+        <source srcset="{{ $resized.Permalink }} 1x, {{ $resized_2.Permalink }} 2x, {{ $resized_3.Permalink }} 3x">
         <img src="{{ $resized.Permalink }}" class="small-img {{ if isset .Params "smartfloat" -}}
                 {{- if eq .Params.smartfloat "left" -}}
                     smartfloat-left

static/img/home-blob-flip.svg

@@ -7,7 +7,7 @@
       <feComposite operator="in" in2="blur"/>
       <feComposite in="SourceGraphic"/>
     </filter>
-    <filter id="Path_6" x="61.201" y="85.157" width="864.12" height="505.297" filterUnits="userSpaceOnUse">
+    <filter id="Path_6" x="61.206" y="85.162" width="864.119" height="505.298" filterUnits="userSpaceOnUse">
       <feOffset dy="5" input="SourceAlpha"/>
       <feGaussianBlur stdDeviation="7.5" result="blur-2"/>
       <feFlood flood-opacity="0.251"/>
@@ -16,12 +16,12 @@
     </filter>
   </defs>
   <g id="cool-background" transform="translate(22.5 17.5)">
-    <path id="Path_1" data-name="Path 1" d="M727.865,81.108q-27.1-60.347,10.248-75.669C775.461-9.884,864.267-16.013,901.388-49.251s150.3-7.543,169.659,49.5,54.209,144.974-129.57,144.974q-183.78,0-213.612-64.118Z" transform="translate(-481.865 376.242)" fill="#fffa72"/>
+    <path id="Path_1" data-name="Path 1" d="M727.865,81.107q-27.1-60.347,10.248-75.669C775.461-9.884,864.267-16.013,901.388-49.251s150.3-7.543,169.659,49.5,54.209,144.976-129.569,144.976q-183.778,0-213.612-64.118Z" transform="translate(-481.867 376.245)" fill="#fffa72"/>
     <g transform="matrix(1, 0, 0, 1, -22.5, -17.5)" filter="url(#Path_3)">
-      <path id="Path_3-2" data-name="Path 3" d="M343.971,269.935q8.609-159.92,128-200.524c119.392-40.6,362.9-56.846,505.563-144.927S1385.888-95.5,1361.159,55.669s-49.551,384.18-536.564,384.18q-487.018,0-480.622-169.914Z" transform="translate(-321.39 132.1)" fill="#2a2a84"/>
+      <path id="Path_3-2" data-name="Path 3" d="M343.971,269.935q8.609-159.92,128-200.524c119.392-40.6,362.9-56.846,505.563-144.927S1385.887-95.5,1361.158,55.67s-49.551,384.18-536.564,384.18q-487.018,0-480.622-169.914Z" transform="translate(-321.39 132.1)" fill="#233665"/>
     </g>
     <g transform="matrix(1, 0, 0, 1, -22.5, -17.5)" filter="url(#Path_6)">
-      <path id="Path_6-2" data-name="Path 6" d="M442.65,218.437Q429.712,85.673,523.73,51.964C617.749,18.255,817.863,4.771,925.24-68.353S1261.74-84.947,1260.2,40.555,1267.311,359.5,863,359.5q-404.317,0-420.347-141.06Z" transform="translate(-357.38 203.46)" fill="#6fc97d"/>
+      <path id="Path_6-2" data-name="Path 6" d="M442.65,218.438Q429.712,85.674,523.73,51.965C617.749,18.256,817.863,4.772,925.24-68.352S1261.74-84.946,1260.2,40.556,1267.311,359.5,863,359.5q-404.317,0-420.347-141.06Z" transform="translate(-357.38 203.46)" fill="#8bd8bd"/>
     </g>
   </g>
 </svg>

static/img/home-blob.svg

@@ -18,10 +18,10 @@
   <g id="cool-background" transform="translate(-309.407 133.702)">
     <path id="Path_1" data-name="Path 1" d="M727.865.118q-27.1,60.347,10.248,75.669c37.348,15.322,126.154,21.451,163.275,54.689s150.3,7.543,169.659-49.5S1125.256-64,941.478-64Q757.7-64,727.866.118Z" transform="translate(-149.958 -19.221)" fill="#fffa72"/>
     <g transform="matrix(1, 0, 0, 1, 309.41, -133.7)" filter="url(#Path_3)">
-      <path id="Path_3-2" data-name="Path 3" d="M343.971,55.314q8.609,159.92,128,200.524c119.392,40.6,362.9,56.846,505.563,144.927s408.353,19.988,383.624-131.185S1311.607-114.6,824.594-114.6q-487.018,0-480.622,169.914Z" transform="translate(-321.39 132.1)" fill="#2a2a84"/>
+      <path id="Path_3-2" data-name="Path 3" d="M343.971,55.314q8.609,159.92,128,200.524c119.392,40.6,362.9,56.846,505.563,144.927s408.353,19.988,383.624-131.185S1311.607-114.6,824.594-114.6q-487.018,0-480.622,169.914Z" transform="translate(-321.39 132.1)" fill="#233665"/>
     </g>
     <g transform="matrix(1, 0, 0, 1, 309.41, -133.7)" filter="url(#Path_6)">
-      <path id="Path_6-2" data-name="Path 6" d="M442.65,40.26q-12.938,132.764,81.08,166.473c94.019,33.709,294.133,47.193,401.51,120.317s336.5,16.594,334.956-108.908S1267.311-100.8,863-100.8q-404.317,0-420.347,141.06Z" transform="translate(-357.38 127.29)" fill="#6fc97d"/>
+      <path id="Path_6-2" data-name="Path 6" d="M442.65,40.26q-12.938,132.764,81.08,166.473c94.019,33.709,294.133,47.193,401.51,120.317s336.5,16.594,334.956-108.908S1267.311-100.8,863-100.8q-404.317,0-420.347,141.06Z" transform="translate(-357.38 127.29)" fill="#8BD8BD"/>
     </g>
   </g>
 </svg>