From b2adcbcd57ceb9b3641d3a7e9472e1bdbbbdf1a3 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 08 Jan 2021 13:04:56 +0000
Subject: [PATCH] Merge pull request #72 from LucasVadilho/post-thumbnail

---
 layouts/_default/single.html            |    3 +
 layouts/index.html                      |    7 +++
 assets/css/style.css                    |   19 +++++++++
 exampleSite/content/post/image-test.md  |   30 +++++++++++++++
 exampleSite/static/images/landscape.jpg |    0 
 README.md                               |   15 +++++++
 6 files changed, 74 insertions(+), 0 deletions(-)

diff --git a/README.md b/README.md
index a0af1c5..c3155e2 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@
 - Navigation items
 - Pagination
 - Multilingual
+- Post Thumbnails (optional)
 - 100⁄100 Google Lighthouse score
 - Google Analytics (optional)
 - Comments powered by Disqus or Utteranc.es (optional)
@@ -286,6 +287,19 @@
 images = ["post-cover.png"]
 ```
 
+### Post Thumbnails
+Thumbnails can be enabled easily by setting the `thumbnail` parameter in the frontmatter of a post to an image such as `"images/landscape.jpg"`.
+```md
++++
+...
+tags = [
+    "thumbnail",
+]
+thumbnail= "images/landscape.jpg"
++++
+```
+Make sure to put the image in the `static/images/` directory.
+
 ### Custom CSS
 
 You can add your custom CSS files with the `customCss` parameter of the configuration file. Put your files into the `assets/css` directory.
@@ -433,3 +447,4 @@
 
 - Go to [Cai Cai](https://github.com/hi-caicai), for the great Anatole Farbox theme that formed the foundation for this theme.
 - Go to [Kareya Saleh](https://unsplash.com/photos/tLKOj6cNwe0) for providing the profile picture in the exampleSite.
+- Go to [Ales Krivec](https://unsplash.com/photos/4miBe6zg5r0) for providing the thumbnail picture in the exampleSite post.
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 01ce335..70dbb98 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -14,6 +14,7 @@
     --tag-color: #424242;
     --blockquote-text-color: #858585;
     --blockquote-border-color: #dfe2e5;
+    --thumbnail-height: 15em;
     scroll-padding-top: 100px;
 }
 
@@ -471,6 +472,24 @@
     text-decoration: none;
 }
 
+.post .post-thumbnail {
+    width: 100%;
+    padding-bottom: 1em;
+    box-shadow: black;
+    border-radius: 0.5em;
+    overflow: hidden;
+    transition: box-shadow .3s ease;
+    
+}
+
+.post .post-thumbnail img {
+    width: 100%;
+    height: var(--thumbnail-height);
+    object-fit: cover;
+    border: 1px solid var(--border-color);
+    border-bottom: 0px;
+}
+
 .pagination {
     margin: 30px;
     padding: 0px 0 56px 0;
diff --git a/exampleSite/content/post/image-test.md b/exampleSite/content/post/image-test.md
new file mode 100644
index 0000000..66faf12
--- /dev/null
+++ b/exampleSite/content/post/image-test.md
@@ -0,0 +1,30 @@
++++
+author = "Hugo Authors"
+title = "Guide to Thumbnails in Hugo"
+date = "2019-03-04"
+description = "Guide to Thumbnails in Hugo"
+tags = [
+    "thumbnail",
+]
+thumbnail= "images/landscape.jpg"
++++
+Thumbnails can be enabled easily by setting the `thumbnail` parameter in the frontmatter to an image such as `"images/landscape.jpg"`. 
+
+Make sure to copy the image the `static/images/` directory.
+
+If put together, it will look like this (that's in fact this post's frontmatter):
+
+```md
++++
+author = "Hugo Authors"
+title = "Guide to Thumbnails in Hugo"
+date = "2019-03-04"
+description = "Guide to Thumbnails in Hugo"
+tags = [
+    "thumbnail",
+]
+thumbnail= "images/landscape.jpg"
++++
+```
+
+
diff --git a/exampleSite/static/images/landscape.jpg b/exampleSite/static/images/landscape.jpg
new file mode 100644
index 0000000..7a39dfe
--- /dev/null
+++ b/exampleSite/static/images/landscape.jpg
Binary files differ
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0773a1e..bc80738 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,9 @@
 {{ define "main" }}
     <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
         <div class="post-content">
+            {{ if .Params.thumbnail }}
+            <img class="post-thumbnail" src="{{ .Params.thumbnail | absURL }}" alt="Thumbnail image">
+            {{ end }}
             <div class="post-title">
                 <h3>{{ .Title }}</h3>
                 {{ if eq .Type "post"}}
diff --git a/layouts/index.html b/layouts/index.html
index c5ec3a3..c957852 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -14,6 +14,13 @@
     {{ range $paginator.Pages }}
 
         <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
+            {{ if .Params.thumbnail }}
+            <div class="post-thumbnail">
+                <a href="{{ .RelPermalink }}">
+                <img src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" loading="lazy">
+                </a>
+            </div>
+            {{ end }}
             <div class="post-title">
                 <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a>
                 </h3>

--
Gitblit v1.10.0