cntrump / hugo-notepadium

a fast gohugo theme, 100% JavaScript-free.
https://examplesite.lvv.me/
MIT License
332 stars 125 forks source link

Unable to display 'cover' image for post #112

Closed tallamjr closed 3 years ago

tallamjr commented 3 years ago

Hugo Version: commit:37a4b7215f4fb563035eb9c1b8f661defc7b9954 Build Command: $ hugo serve --disableFastRender

Hello, firstly, thank you very much for this great theme.

I am having trouble getting the cover param to work. Would it be possible to add a working example to the exampleSite to get a better understanding of where images should 'live'

I would normally have images in static/img/<file>.jpg but when looking at the example in the README.md it implies it should live in images/<file>.jpg. I have tried various combinations of where to place the cover file but can't seem to get this to show up.

My apologies if I am doing something rather silly, but I am quite stuck at the moment. Any help would be greatly appreciated.

tallamjr commented 3 years ago

After changing layouts/_default/single.html as:

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index eaba5cf..dea0b27 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -5,10 +5,10 @@
 <div class="article-container">
     {{- partial "article-header.html" . -}}
     <article class="article markdown-body" {{- if $justify -}}style="text-align: justify;" {{- end -}}>
-        {{- with .Params.cover -}}<p><img class="cover" src="{{- . | safeURL -}}" alt></p>{{- end -}}
+        {{- with .Params.cover -}}<p><img class="cover" src="{{- . | relURL -}}" alt></p>{{- end -}}
         {{- .Content -}}
     </article>
-
+
     {{- partial "article-labels.html" . -}}
     {{- partial "article-share.html" . -}}
     {{- partial "article-license.html" . -}}

This now renders cover images with the following syntax in the font matter:

+++
...
cover = "/img/<file>.png"
+++

or

---
...
cover: "/img/<file>.png"
---

Where /img resides in static/img/...