added article main image caption; added option to show toc before the main article image

README.md

@@ -108,6 +108,7 @@ summaryLength = 70  # number of words for article summaries
     plausibleDomain = "example.com"
 
     enableShareOnFediverse = false  # enable a button at the end of an article to share it on the fediverse
+    tocBeforeImage = false  # show the table of contents before the main article image; default false
 
     # WARNING: deprecated! Use [[menu.icons]] instead, look below
     # links = [
@@ -254,6 +255,7 @@ Every post can have various parameters in the frontmatter, here are some that yo
 - `description`: a brief description of the post, useful for SEO optimization
 - `tags`: an array of tags, useful for searching similar articles
 - `image`: a link to a feature image for the article, shown in the preview as well
+- `imageCaption`: a markdown text rendered as a caption for the article image described above
 - `featured`: boolean, indicate if the post should be shown as featured
 - `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true)
 - `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important

layouts/partials/single_post.html

@@ -9,14 +9,21 @@
             {{- partial "date.html" .Date -}}
         </p>
     {{ end }}
-    {{ if .Params.Image }}
+    {{ if and (.Params.toc | default false) (.Site.Params.tocBeforeImage | default false) }}
-    <img src="{{ .Params.Image }}" alt="" />
+        {{- partial "toc.html" . -}}
     {{ end }}
-    {{ if (.Params.toc | default false) }}
+    {{ if .Params.Image }}
-        <div class="articleToc">
+        <figure style="margin: 0">
-            {{ .TableOfContents }}
+            <img src="{{ .Params.Image }}" alt="" />
-            <hr />
+            {{ if .Params.ImageCaption }}
-        </div>
+                <figcaption>
+                    <p>{{ .Params.ImageCaption | markdownify }}</p>
+                </figcaption>
+            {{ end }}
+        </figure>
+    {{ end }}
+    {{ if and (.Params.toc | default false) (not (.Site.Params.tocBeforeImage | default false)) }}
+        {{- partial "toc.html" . -}}
     {{ end }}
     <div>{{ .Content }}</div>
 </article>

layouts/partials/toc.html

@@ -0,0 +1,4 @@
+<div class="articleToc">
+    {{ .TableOfContents }}
+    <hr />
+</div>