Merge pull request #72 from LucasVadilho/post-thumbnail

Alexander Bilz

08.04.2021 b2adcbcd57ceb9b3641d3a7e9472e1bdbbbdf1a3

Merge pull request #72 from LucasVadilho/post-thumbnail

Closes #72 #66 

 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.

 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;

 exampleSite/content/post/image-test.md

New file
@@ -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"
+++
```



 exampleSite/static/images/landscape.jpg

 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"}}

 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>