refactor: resource attribution

assets/css/components/_attr.scss

@@ -0,0 +1,17 @@
+.attr {
+  position: absolute;
+  background-color: $dark;
+  font-size: 0.7em;
+  color: $light;
+  inline-size: fit-content;
+  padding-block: 0.2em;
+  padding-inline: 0.5em;
+  opacity: 0.8;
+  margin-block: 0 !important;
+  margin-inline: auto;
+  top: 0;
+
+  & a {
+    color: $light;
+  }
+}

assets/css/components/_figure.scss

@@ -1,6 +1,7 @@
 .figure {
   inline-size: fit-content;
   margin: 16px auto;
+  position: relative;
 
   &--chart {
     margin: 0;

assets/css/components/_picture.scss

@@ -9,11 +9,18 @@ video {
   display: block;
 }
 
-.picture {
+.picture__wrapper {
-    display: block;
+  position: relative;
-    inline-size: auto;
-    max-inline-size: 100%;
   margin: auto;
   block-size: auto;
+  width: fit-content;
   max-block-size: 50vh;
+
+  & .picture {
+    display: block;
+
+    & img {
+      margin: 0;
+    }
+  }
 }

assets/css/main.scss

@@ -8,6 +8,7 @@
 @import "layout/footer";
 @import "layout/main";
 
+@import "components/attr";
 @import "components/audio";
 @import "components/blockquote";
 @import "components/button";

assets/css/pages/_single.scss

@@ -53,24 +53,6 @@
           background-size: contain;
           padding: 1em;
         }
-
-        & .attr {
-          position: absolute;
-          background-color: $dark;
-          font-size: 0.7em;
-          color: $light;
-          inline-size: fit-content;
-          padding-block: 0.2em;
-          padding-inline: 0.5em;
-          opacity: 0.8;
-          margin-block: 0;
-          margin-inline: auto;
-          top: 0;
-
-          & a {
-            color: $light;
-          }
-        }
       }
 
       &__title,

data/licences.json

@@ -0,0 +1,10 @@
+{
+  "CC0 1.0": "https://creativecommons.org/publicdomain/zero/1.0/",
+  "CC BY 2.0": "https://creativecommons.org/licenses/by/2.0/",
+  "CC BY-SA 2.0": "https://creativecommons.org/licenses/by-sa/2.0/",
+  "CC BY-NC 2.0": "https://creativecommons.org/licenses/by-nc/2.0/",
+  "CC BY-SA 3.0": "https://creativecommons.org/licenses/by-sa/3.0/",
+  "CC BY-SA 4.0": "https://creativecommons.org/licenses/by-sa/4.0/",
+  "Pixabay Content License": "https://pixabay.com/service/license-summary/",
+  "Unsplash License": "https://unsplash.com/license"
+}

layouts/partials/media/attr.html

@@ -0,0 +1,58 @@
+<!--
+    Partial to render attribution for a resource.
+
+    @params sc Site context.
+    @params pc Page context.
+    @params attr Resource attribution.
+    @params attr_link  Resource link. Optional.
+    @params attr_license  Resource license. Optional.
+    @params attr_license_link  Resource license link. Optional.
+-->
+
+<!-- Validation -->
+
+{{- if ( not ( isset . "sc" ) ) -}}
+  {{- errorf "No site context received" -}}
+{{- end -}}
+
+{{- if ( not ( isset . "pc" ) ) -}}
+  {{- errorf "No page context received (%q)" .sc.Page.File.Dir -}}
+{{- end -}}
+
+{{- if ( not ( isset . "params" ) ) -}}
+  {{- errorf "No params given (%q)" .pc.File.Path -}}
+{{- end -}}
+
+{{- if ( not ( isset .params "attr" ) ) -}}
+  {{- errorf "No attr given (%q)" .pc.File.Path -}}
+{{- end -}}
+
+<!-- Variable assignment -->
+
+{{- $attr := .params.attr -}}
+{{- $attr_link := .params.attrlink -}}
+{{- $attr_licence := .params.attrlicence -}}
+{{- $attr_licence_link := .params.attrlicencelink -}}
+
+<!-- Rendering -->
+
+<p class="attr">
+    {{- with $attr_link -}}
+      <a href="{{ . }}" target="_blank" rel="noopener">
+    {{- end -}}
+      {{- $attr | safeHTML -}}
+    {{- if $attr_link -}}
+      </a>
+    {{- end -}}
+
+    {{- if $attr_licence }} (
+        {{- with ( index .sc.Site.Data.licences $attr_licence ) -}}
+          <a href="{{ . }}" target="_blank" rel="noopener">
+        {{- end -}}
+        {{- $attr_licence -}}
+        {{- with ( index .sc.Site.Data.licences $attr_licence ) -}}
+          </a>
+        {{- end -}}
+    )
+    {{- end -}}
+<p>

layouts/partials/media/picture.html

@@ -9,6 +9,7 @@
 {{- $src := . -}}
 {{- $isResizable := not ( in ( slice "svg" "gif" ) $src.MediaType.SubType ) -}}
 
+
 <!-- Rendering -->
 
 <picture
@@ -17,19 +18,20 @@
 >
   {{ if $isResizable -}}
     <source srcset="{{- ($src.Resize "1200x webp").RelPermalink -}}" />
-    <source srcset="{{- ($src.Resize "800x png").RelPermalink -}}" media="(max-width: 800px)"/>
+    <source
+      srcset="{{- ($src.Resize "800x png").RelPermalink -}}"
+      media="(max-width: 800px)"
+    />
   {{- end }}
   <img
     class="u-photo picture__image"
     {{ if not $isResizable -}}
       src="{{- $src.RelPermalink -}}"
     {{- else -}}
-            src="{{- ($src.Resize "1200x webp").RelPermalink -}}"
+      src="{{- ($src.Resize "1200x webp").RelPermalink -}}" width="{{- $src.Width -}}" height="{{- $src.Height -}}"
-            width="{{- $src.Width -}}"
-            height="{{- $src.Height -}}"
     {{- end }}
     {{ with $src.Params.alt -}}alt="{{- . -}}"{{- end }}
-        {{ with $src.Params.title -}}title="{{- . -}}" {{- end }}
+    {{ with $src.Params.title -}}title="{{- . -}}"{{- end }}
     loading="lazy"
     role="img"
   />

layouts/partials/single/main-header/item-tile.html

@@ -3,7 +3,8 @@
 
   @params pc  The page context.
   @params sc  The site context.
-*/ -}}
+  */
+-}}
 
 {{- if ( not ( isset . "sc" ) ) -}}
   {{- errorf "No site context received" -}}
@@ -14,7 +15,10 @@
 {{- end -}}
 
 {{ with .pc.Params.featured_image }}
-  <img class="u-photo" style="display: none;" src="
+  <img
+    class="u-photo"
+    style="display: none;"
+    src="
   {{- with ( $.pc.Resources.GetMatch . ) -}}
       {{ partialCached "images/get-image.html" ( dict "img" . ) . }}
     {{- else -}}
@@ -28,7 +32,9 @@
   />
 {{ end }}
 
-<div class="article-header__featured-image"
+
+<div
+  class="article-header__featured-image"
   {{ with .pc.Params.featured_image }}
     {{ with ( $.pc.Resources.GetMatch . ) }}
       style="background-image: url({{ partialCached "images/get-image.html" ( dict "img" . ) $.pc }})"
@@ -36,10 +42,13 @@
       style="background-image: url({{ . }})"
     {{ end }}
   {{ end -}}
-  >
+>
-
   <div class="article-header__title-wrapper">
-    <a class="u-url u-uid" style="display: none" href="{{ .pc.Permalink }}"></a>
+    <a
+      class="u-url u-uid"
+      style="display: none"
+      href="{{ .pc.Permalink }}"
+    ></a>
     {{- with .pc.File -}}
       {{- partialCached "text/item-title.html" ( dict "pc" $.pc "sc" $.sc "class" "article-header" ) .Filename -}}
     {{- else -}}
@@ -48,20 +57,6 @@
   </div>
 
   {{ with ( .pc.Resources.GetMatch .pc.Params.featured_image ) }}
-    <p class="attr">
+    {{- partial "media/attr.html" ( dict "pc" $.pc "sc" $.sc "params" .Params ) -}}
-        {{- with .Params.attrlink -}}<a href="{{ . }}" target="_blank" rel="noopener">{{- end -}}
-        {{- .Params.attr | safeHTML -}}
-        {{- if .Params.attrlink -}}</a>{{- end -}}
-        {{- if .Params.attrlicence }} (
-          {{- with .Params.attrlicencelink -}}
-            <a href="{{ . }}" target="_blank" rel="noopener">
-          {{- end -}}
-          {{- .Params.attrlicence -}}
-          {{- if .Params.attrlicencelink -}}
-            </a>
-          {{- end -}}
-        )
-        {{- end -}}
-    <p>
   {{ end }}
 </div>

layouts/shortcodes/figure.html

@@ -54,13 +54,14 @@
     
     {{- if .Get "link" }}</a>{{ end -}}
 
-    {{- if or ( .Get "caption" ) ( .Get "title" ) ( $src.Params.attr ) -}}
+    {{- if or ( .Get "caption" ) ( .Get "title" ) -}}
         <figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }} figure__caption--no-height{{ end }}">
-            {{- if .Params.attrlink -}}<a class="figcaption__attrlink" href="{{ .Params.attrlink }}">{{- end -}}
-            {{- if .Params.attr -}}<p class="figcaption__attr">{{ .Params.attr | safeHTML }}{{ with .Params.attrlicence }} <span class="figcaption__licence">{{ . | safeHTML }}</span>{{ end }}</p>{{- end -}}
-            {{- if .Params.attrlink -}}</a>{{- end -}}
             {{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}}
             {{- with .Get "caption" -}}<p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>{{- end -}}
         </figcaption>
     {{- end -}}
+
+    {{- if $src.Params -}}
+        {{- partial "media/attr.html" ( dict "pc" . "sc" $ "params" $src.Params ) -}}
+    {{- end -}}
 </figure>

layouts/shortcodes/gallery.html

@@ -48,18 +48,8 @@
                     {{- errorf "No handling for resource of type %q" .ResourceType -}}
                   {{- end -}}
 		    </a>
-		    {{- if or ( .Params.title ) ( .Params.attr ) -}}
+		    {{- if or ( .Params.title ) -}}
         <figcaption class="figure__caption{{ if not .Params.title }} figure__caption--no-height{{ end }}">
-          {{ if .Params.attrlink -}}
-            <a class="figcaption__attrlink" href="{{ .Params.attrlink }}"
-              {{- with .Params.attrtarget }} target="{{ . }}"{{ end -}}
-              {{- with .Params.attrrel }} rel="{{ . }}"{{ end -}}
-            >
-          {{- end -}}
-          {{- if .Params.attr -}}<p class="figcaption__attr">{{ .Params.attr | safeHTML }}{{ with .Params.attrlicence }} <span class="figcaption__licence">{{ . | safeHTML }}</span>{{ end }}</p>{{- end -}}
-          {{- if .Params.attrlink -}}
-            </a>
-          {{- end -}}
           {{- if .Params.href -}}
             <a href="{{- if ( eq .Params.href "asCite" ) -}}{{ .Params.cite }}{{- else -}}{{ .Params.href }}{{- end -}}">
           {{- end -}}
@@ -82,6 +72,10 @@
             </a>
           {{- end -}}
         </figcaption>
+        {{- end -}}
+
+        {{- if .Params -}}
+            {{- partial "media/attr.html" ( dict "pc" . "sc" $ "params" .Params ) -}}
         {{- end -}}
 		  </figure>
 		{{- end }}

layouts/shortcodes/picture.html

@@ -29,7 +29,7 @@
 {{- end -}}
 
 <!-- Rendering -->
-<div>
+<div class="picture__wrapper">
 {{- if .Get "link" -}}
     {{- if $linkedResource -}}
         <a href="{{- $linkedResource.RelPermalink -}}"{{- with .Get "rel" }} rel="{{- . -}}"{{- end -}}>
@@ -37,13 +37,15 @@
         <a href="{{- .Get "link" -}}">
     {{- end -}}
 {{- end -}}
-
 {{- partial "media/picture.html" $src -}}
-
 {{- if .Get "link" -}}
     </a>
 {{- end -}}
 
+{{- if $src.Params -}}
+  {{- partial "media/attr.html" ( dict "pc" . "sc" $ "params" $src.Params ) -}}
+{{- end -}}
+
 {{- with ( .Get "caption" ) -}}
     <div class="figure__caption"><p class="figcaption__caption">{{ . | safeHTML }}</p></div>
 {{- end -}}