Better bigimg support
Add support for bigimg's on the front page, multiple images that rotate on both the front page and regular pages and posts, also added test images and a sample to demonstrate the functionality and how to specify bigimg's.
This commit is contained in:
parent
d3ebf37be4
commit
f84ba895a8
@ -16,6 +16,16 @@ pygmentCodeFences = true
|
||||
rss = true
|
||||
comments = true
|
||||
|
||||
#[[Params.bigimg]]
|
||||
# src = "img/triangle.jpg"
|
||||
# desc = "Triangle"
|
||||
#[[Params.bigimg]]
|
||||
# src = "img/sphere.jpg"
|
||||
# desc = "Sphere"
|
||||
#[[Params.bigimg]]
|
||||
# src = "img/hexagon.jpg"
|
||||
# desc = "Hexagon"
|
||||
|
||||
[Author]
|
||||
name = "Some Person"
|
||||
email = "youremail@domain.com"
|
||||
@ -50,22 +60,22 @@ pygmentCodeFences = true
|
||||
name = "Samples"
|
||||
weight = 2
|
||||
|
||||
[[menu.main]]
|
||||
parent = "samples"
|
||||
name = "Big Image Sample"
|
||||
url = "/post/2017-03-07-bigimg-sample"
|
||||
weight = 1
|
||||
|
||||
[[menu.main]]
|
||||
parent = "samples"
|
||||
name = "Math Sample"
|
||||
url = "/post/2017-03-05-math-sample"
|
||||
weight = 1
|
||||
weight = 2
|
||||
|
||||
[[menu.main]]
|
||||
parent = "samples"
|
||||
name = "Code Sample"
|
||||
url = "/post/2016-03-08-code-sample"
|
||||
weight = 2
|
||||
|
||||
[[menu.main]]
|
||||
parent = "samples"
|
||||
name = "Test Markdown"
|
||||
url = "/post/2015-02-20-test-markdown"
|
||||
weight = 3
|
||||
|
||||
[[menu.main]]
|
||||
|
@ -2,7 +2,7 @@
|
||||
title: Flake it till you make it
|
||||
subtitle: Excerpt from Soulshaping by Jeff Brown
|
||||
date: 2015-02-26
|
||||
bigimg: /img/path.jpg
|
||||
bigimg: [{src: "/img/path.jpg", desc: "Path"}]
|
||||
---
|
||||
|
||||
Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who hit me, no one would say that I had a commitment problem. But if I walk away from a seemingly secure route because my soul has other ideas, I am a flake?
|
||||
|
26
exampleSite/content/post/2017-03-07-bigimg-sample.md
Normal file
26
exampleSite/content/post/2017-03-07-bigimg-sample.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Big Image Sample
|
||||
subtitle: Using Multiple Images
|
||||
date: 2017-03-07
|
||||
tags: ["example", "bigimg"]
|
||||
bigimg: [{src: "/img/triangle.jpg", desc: "Triangle"}, {src: "/img/sphere.jpg", desc: "Sphere"}, {src: "/img/hexagon.jpg", desc: "Hexagon"}]
|
||||
---
|
||||
|
||||
The image banners at the top of the page are refered to as "bigimg" in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.
|
||||
|
||||
<!--more-->
|
||||
|
||||
A single bigimg can be specified in the front matter by the following YAML:
|
||||
```
|
||||
bigimg: [{src: "/img/triangle.jpg", desc: "Triangle"}]
|
||||
```
|
||||
|
||||
Multiple bigimgs can be specified in the front matter by the following YAML:
|
||||
```
|
||||
bigimg: [{src: "/img/triangle.jpg", desc: "Triangle"}, {src: "/img/sphere.jpg", desc: "Sphere"}, {src: "/img/hexagon.jpg", desc: "Hexagon"}]
|
||||
```
|
||||
|
||||
Also note that the description field is optional, and images could instead be specified by:
|
||||
```
|
||||
bigimg: [{src: "/img/triangle.jpg"}, {src: "/img/sphere.jpg"}, {src: "/img/hexagon.jpg"}]
|
||||
```
|
@ -7,8 +7,12 @@
|
||||
|
||||
{{ partial "nav.html" . }}
|
||||
|
||||
<header class="header-section ">
|
||||
<div class="intro-header no-img">
|
||||
{{ if .Site.Params.bigimg }}
|
||||
<div id="header-big-imgs" data-num-img={{len .Site.Params.bigimg}} {{range $i, $img := .Site.Params.bigimg}}data-img-src-{{add $i 1}}="{{$img.src}}" data-img-desc-{{add $i 1}}="{{$img.desc}}"{{end}}></div>
|
||||
{{ end }}
|
||||
|
||||
<header class="header-section {{ if .Site.Params.bigimg }}has-img{{ end }}">
|
||||
<div class="intro-header {{ if .Site.Params.bigimg }}big-img{{ else }}no-img{{ end }}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||
@ -22,6 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="img-desc" style="display: inline;"></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
@ -1,17 +1,13 @@
|
||||
{{ if or .Params.bigimg .Title }}
|
||||
|
||||
{{ if .Params.bigimg }}
|
||||
<div id="header-big-imgs" data-num-img=1 data-img-src-1="{{.Params.bigimg}}"></div>
|
||||
<div id="header-big-imgs" data-num-img={{len .Params.bigimg}} {{range $i, $img := .Params.bigimg}}data-img-src-{{add $i 1}}="{{$img.src}}" {{ if $img.desc}}data-img-desc-{{add $i 1}}="{{$img.desc}}"{{end}}{{end}}></div>
|
||||
{{ end }}
|
||||
|
||||
<header class="header-section {{ if .Params.bigimg }}has-img{{ end }}">
|
||||
{{ if .Params.bigimg }}
|
||||
<div class="big-img intro-header">
|
||||
{{ partial "header.html" . }}
|
||||
<span class='img-desc'></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="intro-header no-img">
|
||||
<div class="intro-header {{ if .Params.bigimg }}big-img{{ else }}no-img{{ end }}">
|
||||
{{ partial "header.html" . }}
|
||||
<span class="img-desc" style="display: inline;"></span>
|
||||
</div>
|
||||
</header>
|
||||
{{ else }}
|
||||
|
BIN
static/img/hexagon.jpg
Normal file
BIN
static/img/hexagon.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 170 KiB |
BIN
static/img/sphere.jpg
Normal file
BIN
static/img/sphere.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 48 KiB |
BIN
static/img/triangle.jpg
Normal file
BIN
static/img/triangle.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 133 KiB |
Loading…
Reference in New Issue
Block a user