From a01da17f264b626429c30593462770331721dc6e Mon Sep 17 00:00:00 2001
From: Gregory Trolliet <gregory@trolliet.info>
Date: Thu, 7 May 2020 09:48:29 +0200
Subject: [PATCH] [SHORTCODE] Use img instead of figure, adapt css for
 attribution

---
 layouts/shortcodes/img.html | 30 ++++++++++++++++++++----------
 static/css/style.css        |  5 ++++-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 1231a94..9957c21 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -1,21 +1,31 @@
 {{ $img := $.Page.Resources.GetMatch (.Get "src")}}
-{{ $test := $img.Permalink }}
-{{ $name_splitted := split $img.RelPermalink "." }}
-{{ $name_base := index $name_splitted 0 }}
 <figure {{ with .Get "class" }} class="{{ . }}"{{ end }}>
 	{{ with .Get "link" }}
-		<a href="{{ . }}">
+		<a href="{{ . | absURL }}">
 	{{ end }}
-	<picture>
-		<source srcset="{{$img.RelPermalink}}" type="image/jpg">
-		<img src="{{ $img.RelPermalink }}" alt="{{.Get "alt" }}" />
-	</picture>
+	<img src="{{ $img.RelPermalink }}"
+	{{ with .Get "alt"}} alt="{{ . }}"{{ end }}
+	{{ with .Get "title"}} title="{{ . }}"{{ end }}
+	{{ with .Get "height"}} height="{{ . }}"{{ end }}
+	{{ with .Get "width"}} width="{{ . }}"{{ end }} />
 	{{ with .Get "link" }}
 		</a>
 	{{ end }}
-	{{ with .Get "title" }}
+	{{ if .Get "caption" }}
 	<figcaption>
-		<p>{{ . }}</p>
+		<p>{{ .Get "caption" }}
+		{{ if .Get "attr" }}
+			<span class="attribution">
+			{{ with .Get "attrlink" }}
+				<a href="{{ . }}">
+			{{ end }}
+			{{ .Get "attr" }}
+			{{ with .Get "attrlink" }}
+				</a>
+			{{ end }}
+			</span>
+		{{ end }}
+		</p>
 	</figcaption>
 	{{ end }}
 </figure>
diff --git a/static/css/style.css b/static/css/style.css
index 002b988..c4d3a44 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -526,7 +526,7 @@ a:focus {
 .article-body figure.border figcaption {
 	background-color: var(--background-color-light);
 }
-.article-body figure a {
+.article-body figure>a {
 	display: block;
 	min-height: 100%;
 }
@@ -540,6 +540,9 @@ a:focus {
 	margin-left: 1rem;
 	margin-right: 1rem;
 }
+.article-body figure figcaption .attribution {
+	float: right;
+}
 @media only screen and (max-width: 320px) {
 	.article-body .footnotes ol {
 		padding-left: 2em;