mirror of
https://github.com/Vimux/Binario.git
synced 2024-11-11 01:38:28 +00:00
Improve featured image (#17)
WARNING: UPGRADE HUGO TO VERSION 0.54.0 OR LATER * post_thumbnail -> post_featured * Add url, alt, caption and credit params for featured * Add previewOnly param * Add styles for featured * Add fallback for thumbnail.* * Add "Featured Images" page * Show caption & credit on single pages only * Update README: add featured image guide * Bump Hugo min version because `reflect.IsMap` [0.38 -> 0.54.0]
This commit is contained in:
parent
33bff944f2
commit
efb650245f
9 changed files with 166 additions and 20 deletions
32
README.md
32
README.md
|
@ -32,7 +32,7 @@
|
||||||
- [Post Meta](#post-meta)
|
- [Post Meta](#post-meta)
|
||||||
- [Related Content](#related-content)
|
- [Related Content](#related-content)
|
||||||
- [Share Buttons](#share-buttons)
|
- [Share Buttons](#share-buttons)
|
||||||
- [Thumbnail Image](#thumbnail-image)
|
- [Featured Image](#featured-image)
|
||||||
- [Footer Social Icons](#footer-social-icons)
|
- [Footer Social Icons](#footer-social-icons)
|
||||||
- [Web App Manifest](#web-app-manifest)
|
- [Web App Manifest](#web-app-manifest)
|
||||||
- [Contributing](#contributing)
|
- [Contributing](#contributing)
|
||||||
|
@ -154,6 +154,9 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
|
||||||
mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config. Optional
|
mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config. Optional
|
||||||
hideNoPostsWarning = false # Don't show no posts empty state warning in main page, if true
|
hideNoPostsWarning = false # Don't show no posts empty state warning in main page, if true
|
||||||
|
|
||||||
|
[Params.Featured]
|
||||||
|
previewOnly = false # Show only preview featured image
|
||||||
|
|
||||||
[Params.Social]
|
[Params.Social]
|
||||||
email = "example@example.com"
|
email = "example@example.com"
|
||||||
facebook = "username"
|
facebook = "username"
|
||||||
|
@ -305,11 +308,34 @@ To display share buttons, set up `[Params.Share]` specific parameters in your si
|
||||||
|
|
||||||
Available share buttons: Facebook, Twitter, Reddit, Telegram, LinkedIn, VK, Pocket, Pinterest
|
Available share buttons: Facebook, Twitter, Reddit, Telegram, LinkedIn, VK, Pocket, Pinterest
|
||||||
|
|
||||||
#### Thumbnail Image
|
#### Featured Image
|
||||||
|
|
||||||
You can add thumbnail image to your content page. Just put `thumbnail.*` image file in
|
There are two main different ways to add a featured image for a page.
|
||||||
|
|
||||||
|
**Option 1.** Put `featured.*` or `thumbnail.*` image file in the
|
||||||
[page bundle](https://gohugo.io/content-management/page-bundles/).
|
[page bundle](https://gohugo.io/content-management/page-bundles/).
|
||||||
|
|
||||||
|
**Option 2.** Put any image in the page bundle & specify `featured` param in the page's front matter.
|
||||||
|
|
||||||
|
You may put any image in the page bundle and specify `featured` param in the page's front matter:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
featured: image.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
Or you can add some additional params like `alt`, `caption`, `credit` and `previewOnly`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
featured:
|
||||||
|
url: image.jpg
|
||||||
|
alt: A scale model of the Eiffel tower standing on a map
|
||||||
|
caption: Eiffel tower model
|
||||||
|
credit: Unknown author
|
||||||
|
previewOnly: false
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note**: `caption` and `credit` appear only on single pages, not summaries.
|
||||||
|
|
||||||
#### Footer Social Icons
|
#### Footer Social Icons
|
||||||
|
|
||||||
With Binario, you have the option to display social icons in the footer. To display them, set up `[Params.Social]`
|
With Binario, you have the option to display social icons in the footer. To display them, set up `[Params.Social]`
|
||||||
|
|
BIN
exampleSite/content/post/featured-images/featured.png
Normal file
BIN
exampleSite/content/post/featured-images/featured.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 27 KiB |
72
exampleSite/content/post/featured-images/index.md
Normal file
72
exampleSite/content/post/featured-images/index.md
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
---
|
||||||
|
title: Featured Images
|
||||||
|
description: "In this page, we will explain what featured images are and show you some examples how to add a featured \
|
||||||
|
image for a page."
|
||||||
|
date: 2019-09-12
|
||||||
|
---
|
||||||
|
|
||||||
|
Featured image is the image that appears on summaries at the list pages and the top of content pages. Every content page
|
||||||
|
in this theme can have a featured image.
|
||||||
|
|
||||||
|
<!--more-->
|
||||||
|
|
||||||
|
## How to add a featured image
|
||||||
|
|
||||||
|
Content pages in Hugo can have their images or any other files stored under the same directory of the page itself.
|
||||||
|
In Hugo's terms, it's called **page bundle** and allows us to keep all assets together with a page content file.
|
||||||
|
|
||||||
|
This theme uses page bundles for featured images. There are two main different ways to add a featured image.
|
||||||
|
|
||||||
|
### Option 1. Put `featured.*` or `thumbnail.*` image in the page bundle
|
||||||
|
|
||||||
|
This theme considers `featured` or `thumbnail` image in any popular graphic format in the root of the page bundle as
|
||||||
|
a featured image.
|
||||||
|
|
||||||
|
Directory structure of this page:
|
||||||
|
|
||||||
|
```
|
||||||
|
content
|
||||||
|
└── post
|
||||||
|
└── featured-images // single page folder (page bundle)
|
||||||
|
├── featured.png // featured image
|
||||||
|
└── index.md // page content file
|
||||||
|
```
|
||||||
|
|
||||||
|
### Option 2. Put any image in the page bundle & specify `featured` param
|
||||||
|
|
||||||
|
You may put any image in the page bundle and specify `featured` param in the page's front matter:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
featured: image.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
- `featured` [`String`]: relative path of the image
|
||||||
|
|
||||||
|
Or you can add some additional params like `alt`, `caption`, `credit` and `previewOnly`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
featured:
|
||||||
|
url: image.jpg
|
||||||
|
alt: A scale model of the Eiffel tower standing on a map
|
||||||
|
caption: Eiffel tower model
|
||||||
|
credit: Unknown author
|
||||||
|
previewOnly: false
|
||||||
|
```
|
||||||
|
|
||||||
|
- `featured` [`Map`]:
|
||||||
|
- `url` [`String`]: relative path of the image
|
||||||
|
- `alt` [`String`]: alternate text for the image
|
||||||
|
- `caption` [`String`]: image caption
|
||||||
|
- `credit` [`String`]: image credit
|
||||||
|
- `previewOnly` [`Boolean`]: show only preview image
|
||||||
|
|
||||||
|
## FAQ
|
||||||
|
|
||||||
|
**Q**: _What will happen if I specify `alt`, `caption`, `credit` params, but miss `url`? Featured image will be shown or
|
||||||
|
not?_\
|
||||||
|
**A**: In that case, featured image would appear only if the page bundle contains `featured.*` or `thumbnail.*` image.
|
||||||
|
Otherwise, you'll get nothing.
|
||||||
|
|
||||||
|
**Q**: _Is featured image path case sensitive or insensitive? Featured.png and featured.png are different image relative
|
||||||
|
paths for Hugo?_\
|
||||||
|
**A**: The image matching is case-insensitive. In that case, Featured.png and featured.png are identical for Hugo.
|
|
@ -2,7 +2,7 @@
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div class="single block">
|
<div class="single block">
|
||||||
<article class="post">
|
<article class="post">
|
||||||
{{- partial "post_thumbnail.html" (dict "page" .) }}
|
{{- partial "post_featured.html" (dict "page" . "IsSingle" true) }}
|
||||||
{{- partial "post_meta.html" (dict "dot" . "class" "mb") }}
|
{{- partial "post_meta.html" (dict "dot" . "class" "mb") }}
|
||||||
<h1 class="post__title">{{ .Title }}</h1>
|
<h1 class="post__title">{{ .Title }}</h1>
|
||||||
{{- partial "post_toc.html" . }}
|
{{- partial "post_toc.html" . }}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<article class="post card__box block">
|
<article class="post card__box block">
|
||||||
{{- partial "post_thumbnail.html" (dict "page" . "link" .RelPermalink) }}
|
{{- partial "post_featured.html" (dict "page" . "link" .RelPermalink) }}
|
||||||
<h1 class="post__title title-excerpt"><a class="post__title-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
|
<h1 class="post__title title-excerpt"><a class="post__title-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
|
||||||
{{- with .Summary }}
|
{{- with .Summary }}
|
||||||
<div class="post__content">{{ . }}</div>
|
<div class="post__content">{{ . }}</div>
|
||||||
|
|
41
layouts/partials/post_featured.html
Normal file
41
layouts/partials/post_featured.html
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
{{- with .page.Resources.ByType "image" }}
|
||||||
|
{{- $link := $.link -}}
|
||||||
|
{{- $IsSingle := $.IsSingle -}}
|
||||||
|
{{- $match := $.page.Params.featured -}}
|
||||||
|
{{- $featuredMap := "" -}}
|
||||||
|
|
||||||
|
{{- $IsMap := reflect.IsMap $match -}}
|
||||||
|
{{- if $IsMap }}
|
||||||
|
{{- $featuredMap = $match -}}
|
||||||
|
{{- $match = $match.url -}}
|
||||||
|
{{- end }}
|
||||||
|
|
||||||
|
{{- $featured := .GetMatch ($match | default "{featured.*,thumbnail.*}") -}}
|
||||||
|
{{ if and $featured (not (and $IsSingle ($.page.Param "featured.previewOnly"))) }}
|
||||||
|
<figure class="post__featured featured">
|
||||||
|
{{- with $link }}<a class="featured__link" href="{{ . }}">{{ end }}
|
||||||
|
<img class="featured__img" src="{{ $featured.RelPermalink }}" alt="
|
||||||
|
{{- with $featuredMap -}}
|
||||||
|
{{- .alt | default $featured.Title -}}
|
||||||
|
{{- else -}}
|
||||||
|
{{- $featured.Title -}}
|
||||||
|
{{- end -}}
|
||||||
|
"/>
|
||||||
|
{{- with $link }}</a>{{ end }}
|
||||||
|
{{- with $IsSingle }}
|
||||||
|
{{- with $featuredMap }}
|
||||||
|
{{- if or .caption .credit }}
|
||||||
|
<figcaption class="featured__figcaption">
|
||||||
|
{{- with .caption }}
|
||||||
|
<div class="featured__caption">{{ . | markdownify }}</div>
|
||||||
|
{{- end }}
|
||||||
|
{{- with .credit }}
|
||||||
|
<cite class="featured__credit">{{ . | markdownify }}</cite>
|
||||||
|
{{- end }}
|
||||||
|
</figcaption>
|
||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
|
</figure>
|
||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
|
@ -1,13 +0,0 @@
|
||||||
{{- $img := (.page.Resources.ByType "image").GetMatch "thumbnail.*" }}
|
|
||||||
{{- $link := .link }}
|
|
||||||
{{- with $img }}
|
|
||||||
<figure class="post__thumbnail thumbnail">
|
|
||||||
{{- with $link }}
|
|
||||||
<a class="thumbnail__link" href="{{ . }}">
|
|
||||||
<img class="thumbnail__img" src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}">
|
|
||||||
</a>
|
|
||||||
{{- else }}
|
|
||||||
<img class="thumbnail__img" src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}">
|
|
||||||
{{- end }}
|
|
||||||
</figure>
|
|
||||||
{{- end }}
|
|
|
@ -699,8 +699,28 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post__thumbnail {
|
.post__featured {
|
||||||
|
width: 100%;
|
||||||
min-height: 1px; /* Workaround for IE11 flexbox img height issue https://github.com/philipwalton/flexbugs/issues/75 */
|
min-height: 1px; /* Workaround for IE11 flexbox img height issue https://github.com/philipwalton/flexbugs/issues/75 */
|
||||||
|
text-align: center;
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured__figcaption {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured__credit::before {
|
||||||
|
content: "© ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured__credit {
|
||||||
|
font-size: .875rem;
|
||||||
|
font-style: normal;
|
||||||
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post__content {
|
.post__content {
|
||||||
|
|
|
@ -5,7 +5,7 @@ description = "Responsive card-based & code-light Hugo theme"
|
||||||
homepage = "https://github.com/vimux/binario/"
|
homepage = "https://github.com/vimux/binario/"
|
||||||
tags = ["blog", "dark", "disqus", "google analytics", "responsive"]
|
tags = ["blog", "dark", "disqus", "google analytics", "responsive"]
|
||||||
features = []
|
features = []
|
||||||
min_version = "0.38"
|
min_version = "0.54.0"
|
||||||
|
|
||||||
[author]
|
[author]
|
||||||
name = "Vimux"
|
name = "Vimux"
|
||||||
|
|
Loading…
Reference in a new issue