use relative paths for featured images (jmau111#11)

README.md

@@ -46,25 +46,42 @@ You can use contents generated for the demo:
 cp -a themes/hugo-theme-ava/exampleSite/. .
 ```
 
-### Images
+### SVGs
+
+It's not the best practice, but I like to keep things simple.
+
+That's why I call svgs in templates now.
+
+### Subheader and featured images
 
-Use the `image` parameter in your frontmatter (posts). There's a default global setting called `defaultImage` too:
+Use the `image` parameter in your frontmatter (posts). If you want to use an external image use an absolute path.
+
+If you host your images on the same installation, create a folder for your post in the `content/` directory:
 
 ```
-[params]
-  ga_id=""
-  mainSections = ["post"]
-  disqus = "xxxxxxx"
-  defaultImage = "images/shinjuku.jpg"
+content
+   my-post/
+    index.md
+    images/
+      myfeatured.jpg
 ```
 
-In the demo, the relative paths don't start with a "/" because it's in a subfolder (GitHub pages), but you don't have to do the same.
+Then, use relative path in your frontmattter:
 
-It's not the best practice but I like to keep things simple.
+```
+---
+title: "Example 8"
+description: "This is desc 8"
+date: 2023-01-05T11:11:11+01:00
+type: "post"
+draft: false
+image: "images/myfeatured.jpg"
+---
+```
 
-That's also why I call svgs in templates now.
+It's a bit more constraining, but it allows a better organization, as all resources of the page are grouped in the same folder.
 
-**These few changes should not impact previous installations. If so, please open an issue.**
+**These few changes should not impact previous installations too much. If so, please open an issue.**
 
 ### Change colors
 

exampleSite/config.toml

@@ -22,7 +22,6 @@ canonifyURLs = true
   ga_id=""
   mainSections = ["post"]
   disqus = "xxxxxxx"
-  defaultImage = "https://raw.githubusercontent.com/jmau111/hugo-theme-ava/main/images/default.jpeg"
 
   [params.meta_tags]
     meta_description = "Ava is a light theme for your blog with essential features you might dig in."

exampleSite/content/posts/example8.md → exampleSite/content/posts/example8/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Example 8"
 description: "This is desc 8"
-date: 2021-08-08T11:11:11+01:00
+date: 2023-01-05T11:11:11+01:00
 type: "post"
 draft: false
 image: "images/shinjuku.jpg"

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "body_classes" }}home{{ end }}
 
 {{- define "subheader" }}
-    {{ partial "subheader.html" (dict "context" . "site" $.Site "isHome" true) }}
+    {{ partial "subheader.html" (dict "context" . "site" $.Site) }}
 {{- end }}
 
 {{- define "content" }}

layouts/partials/subheader.html

@@ -1,5 +1,5 @@
-{{ $image := .context.Params.image | default .site.Params.DefaultImage }}
-<header class="subheader" style="background-image: url({{ $image | relURL }});">
+{{- $image := .context.Params.Image | default .site.Params.DefaultImage -}}
+<header class="subheader" style="background-image: url({{ $image }});">
     <div class="title-container slide-invert"> 
         {{- if .context.IsHome }}
             <h2 class="h1 post-title">{{ .context.Title | default .site.Title }}</h2>

layouts/partials/svg.html

@@ -5,4 +5,4 @@
 {{ $match := "<svg (.*)?>(.*)</svg>" }}
 
 {{ $replaceWith := printf `<svg width="36" height="36" class="%s" ${1}>${2}</svg>` $class }}
-{{ return (replaceRE $match $replaceWith (printf "/assets/images/%s.svg" $svg | readFile) | safeHTML) }}
+{{ return (replaceRE $match $replaceWith (printf "/assets/images/svgs/%s.svg" $svg | readFile) | safeHTML) }}