diff --git a/README.md b/README.md index 6205ad4..97a696d 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ - [Post Meta](#post-meta) - [Related Content](#related-content) - [Share Buttons](#share-buttons) - - [Thumbnail Image](#thumbnail-image) + - [Featured Image](#featured-image) - [Footer Social Icons](#footer-social-icons) - [Web App Manifest](#web-app-manifest) - [Contributing](#contributing) @@ -154,6 +154,9 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config. Optional 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] email = "example@example.com" 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 -#### 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/). +**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 With Binario, you have the option to display social icons in the footer. To display them, set up `[Params.Social]` diff --git a/exampleSite/content/post/featured-images/featured.png b/exampleSite/content/post/featured-images/featured.png new file mode 100644 index 0000000..911eac6 Binary files /dev/null and b/exampleSite/content/post/featured-images/featured.png differ diff --git a/exampleSite/content/post/featured-images/index.md b/exampleSite/content/post/featured-images/index.md new file mode 100644 index 0000000..ae5167a --- /dev/null +++ b/exampleSite/content/post/featured-images/index.md @@ -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. + + + +## 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. diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 0f77667..ea1c1bc 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,7 +2,7 @@
- {{- partial "post_thumbnail.html" (dict "page" .) }} + {{- partial "post_featured.html" (dict "page" . "IsSingle" true) }} {{- partial "post_meta.html" (dict "dot" . "class" "mb") }}

{{ .Title }}

{{- partial "post_toc.html" . }} diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index 67b3ee5..30596e5 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -1,5 +1,5 @@
- {{- partial "post_thumbnail.html" (dict "page" . "link" .RelPermalink) }} + {{- partial "post_featured.html" (dict "page" . "link" .RelPermalink) }}

{{ .Title }}

{{- with .Summary }}
{{ . }}
diff --git a/layouts/partials/post_featured.html b/layouts/partials/post_featured.html new file mode 100644 index 0000000..e38966e --- /dev/null +++ b/layouts/partials/post_featured.html @@ -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"))) }} +
+ {{- with $link }}{{ end }} + + {{- with $featuredMap -}} + {{- .alt | default $featured.Title -}} + {{- else -}} + {{- $featured.Title -}} + {{- end -}} + + {{- with $link }}{{ end }} + {{- with $IsSingle }} + {{- with $featuredMap }} + {{- if or .caption .credit }} +
+ {{- with .caption }} +
{{ . | markdownify }}
+ {{- end }} + {{- with .credit }} + {{ . | markdownify }} + {{- end }} +
+ {{- end }} + {{- end }} + {{- end }} +
+ {{- end }} +{{- end }} \ No newline at end of file diff --git a/layouts/partials/post_thumbnail.html b/layouts/partials/post_thumbnail.html deleted file mode 100644 index 36899bc..0000000 --- a/layouts/partials/post_thumbnail.html +++ /dev/null @@ -1,13 +0,0 @@ -{{- $img := (.page.Resources.ByType "image").GetMatch "thumbnail.*" }} -{{- $link := .link }} -{{- with $img }} -
- {{- with $link }} - - {{ $img.Title }} - - {{- else }} - {{ $img.Title }} - {{- end }} -
-{{- end }} \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index b810b82..a91d5d0 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -699,8 +699,28 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box { 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 */ + 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 { diff --git a/theme.toml b/theme.toml index 555aef8..0c7a49f 100644 --- a/theme.toml +++ b/theme.toml @@ -5,7 +5,7 @@ description = "Responsive card-based & code-light Hugo theme" homepage = "https://github.com/vimux/binario/" tags = ["blog", "dark", "disqus", "google analytics", "responsive"] features = [] -min_version = "0.38" +min_version = "0.54.0" [author] name = "Vimux"