Use images instead of featuredImg

`featuredImg` and `bgImg` are preserved in case you want to use a different background image from metadata images

README.md

@@ -101,7 +101,7 @@ You can reference as many stylesheets as you want. Their paths need to be relati
 
 #### Code injection
 
-You can inject any html code to every page's document head or right above the closing body tag. This makes it easier to add any html meta data, custom css/js, dns-prefetch etc. To do this you simplely need to creat a file at site's `layouts/partials/extra-head.html` or `layouts/partials/extra-foot.html`, code inside will be injected to every page.
+You can inject any html code to every page's document head or right above the closing body tag. This makes it easier to add any html meta data, custom css/js, dns-prefetch etc. To do this you simply need to create a file at site's `layouts/partials/extra-head.html` or `layouts/partials/extra-foot.html`, code inside will be injected to every page.
 
 ## Acknowledgments
 

archetypes/posts.md

@@ -3,8 +3,8 @@ title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: true
 toc: false
-featuredImg: ""
+images:
 tags: 
-  - tag
+  - untagged
 ---
 

exampleSite/config.toml

@@ -6,7 +6,7 @@ theme = "hermit"
 # enableGitInfo = true
 pygmentsCodefences  = true
 pygmentsUseClasses  = true
-hasCJKLanguage = true  # If there're Chinese/Japanese/Korean Languages in the content, enable this.
+# hasCJKLanguage = true  # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
 rssLimit = 10  # Maximum number of items in the RSS feed.
 copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
 enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
@@ -29,13 +29,24 @@ enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/func
   dateformNum     = "2006-01-02"
   dateformNumTime = "2006-01-02 15:04 -0700"
 
-  # themeColor = "#494f5c"  # Theme color in meta tags.
+  # Metadata mostly used in document's head
+  # description = ""
+  # images = [""]
+  themeColor = "#494f5c"
+
   homeSubtitle = "A minimal and fast theme for Hugo."
   footerCopyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
-  # gitUrl = "https://github.com/Someone/SomeRepo/commit/" # Prefix of link to the git commit detail page. GitInfo must be enabled.
-  justifyContent = false  # Set "text-align: justify" to .content, requires extended version of Hugo
   # bgImg = ""  # Homepage background-image URL
-  # customCSS = ["css/foo.css", "css/bar.css"]  # add custom css
+
+  # Prefix of link to the git commit detail page. GitInfo must be enabled.
+  # gitUrl = "https://github.com/username/repository/commit/"
+
+  # Toggle this option need to rebuild SCSS, requires extended version of Hugo
+  justifyContent = false  # Set "text-align: justify" to .content.
+
+  # Add custom css
+  # customCSS = ["css/foo.css", "css/bar.css"]
+
   # Social Icons
   # Check https://github.com/Track3/hermit#social-icons for more info.
   [[params.social]]

exampleSite/content/posts/post-with-featured-image.md

@@ -2,7 +2,8 @@
 title: "Post With Featured Image"
 date: 2018-10-01T16:15:09+08:00
 draft: false
-featuredImg: "https://picsum.photos/1024/768/?random"
+images: 
+  - https://picsum.photos/1024/768/?random
 tags: 
   - Demo
   - Image
@@ -13,5 +14,10 @@ Just define the image URL in the content’s front matter, the featured image wi
 For example:
 
 ```yaml
-featuredImg: "https://picsum.photos/1024/768/?random"
+---
+images:
+  - https://picsum.photos/1024/768/?random
+---
 ```
+
+This is an array, you can set multiple urls, only the first url will be used. These images is also used in [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) and the [Open Graph](http://ogp.me/) metadata.

layouts/index.html

@@ -1,6 +1,10 @@
 {{ define "main" }}
-	{{- with .Site.Params.bgImg }}
+	{{- if .Site.Params.bgImg }}
-	<div class="bg-img" style="background-image: url('{{ . }}')"></div>
+	<div class="bg-img" style="background-image: url({{.Site.Params.bgImg}});"></div>
+	{{- else if .Site.Params.images }}
+	{{- range first 1 .Site.Params.images }}
+	<div class="bg-img" style="background-image: url({{.}});"></div>
+	{{- end }}
 	{{- end }}
 	<div id="spotlight" class="animated fadeIn">
 		<div id="home-center">

layouts/posts/single.html

@@ -3,9 +3,13 @@
 {{ end }}
 
 {{ define "main" }}
-	{{- with .Params.featuredImg }}
+	{{- if .Params.featuredImg }}
+	<div id="bg-img" class="bg-img" style="background-image: url({{.Params.featuredImg}});" onclick="showContent()"></div>
+	{{- else if .Params.images }}
+	{{- range first 1 .Params.images }}
 	<div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div>
 	{{- end }}
+	{{- end }}
 	<main class="site-main section-inner animated fadeIn faster">
 		<article class="thin">
 			<header class="post-header">
@@ -51,7 +55,7 @@
 			{{- end }}
 		</div>
 		<div id="comments" class="thin">
-			{{ partial "comments.html" . }}
+		{{- partial "comments.html" . -}}
 		</div>
 	</main>
 {{ end }}