diff --git a/assets/css/carousel.css b/assets/css/carousel.css new file mode 100644 index 00000000..483d4cd8 --- /dev/null +++ b/assets/css/carousel.css @@ -0,0 +1,34 @@ +.thumbnails { + margin: 20px 0; + text-align: center; +} +.thumbnails li { + display: inline-block; + cursor: pointer; + border: 5px solid #fff; +} +.thumbnails .tns-nav-active { + background: none; + border-color: #000; +} +.thumbnails li { width: 50px; } +.thumbnails img { vertical-align: bottom; height: auto; max-height: 50px; } +.controls { text-align: center; } +.controls li { + display: block; + position: relative; + height: 60px; + width: 32px; + line-height: 60px; + /* margin-top: calc(-60% - 50px); */ + margin-top: -70px; + padding: 0px 0px; + cursor: pointer; + transition: background 0.3s; +} +.controls li img { display: inline-block; vertical-align: middle; } +.controls .prev { left: 0; } +.controls .next { float: right; + margin-top: -63px;} +.controls li:hover { background: #f2f2f2; } + diff --git a/data/assets.yaml b/data/assets.yaml index 59b51972..d33c1d14 100644 --- a/data/assets.yaml +++ b/data/assets.yaml @@ -36,3 +36,11 @@ valine: js: url: https://cdn.jsdelivr.net/npm/valine@%s/dist/Valine.min.js sri: sha384-e0+DNUCJo75aOAzHQbFWYBCM9/S4f0BhRJXvEgbE3mMS85RM20MSSGStHuNdY2QK + +# TinySlider +tinyslider: + version: 2.9.3 + css: + url: https://cdn.jsdelivr.net/npm/tiny-slider@%s/dist/tiny-slider.css + js: + url: https://cdn.jsdelivr.net/npm/tiny-slider@%s/dist/tiny-slider.min.js diff --git a/exampleSite/config/_default/params.yaml b/exampleSite/config/_default/params.yaml index d278263c..44d8447e 100644 --- a/exampleSite/config/_default/params.yaml +++ b/exampleSite/config/_default/params.yaml @@ -11,9 +11,14 @@ titleSeparator: # Options: auto, light and dark. Default is auto. colorScheme: + +# Use carousels first image as featured image on posts list +carouselFeatured: true + # Colors and fonts. Default style is data/styles/default.yaml/ style: + # E.g. Person, Organization, LocalBusiness, Project, EducationalOrganization siteType: Person icon: images/icon.png diff --git a/exampleSite/content/posts/carousel1/carousel1.jpg b/exampleSite/content/posts/carousel1/carousel1.jpg new file mode 100644 index 00000000..3df137fb Binary files /dev/null and b/exampleSite/content/posts/carousel1/carousel1.jpg differ diff --git a/exampleSite/content/posts/carousel1/carousel2.jpg b/exampleSite/content/posts/carousel1/carousel2.jpg new file mode 100644 index 00000000..9a142e08 Binary files /dev/null and b/exampleSite/content/posts/carousel1/carousel2.jpg differ diff --git a/exampleSite/content/posts/carousel1/carousel3.jpg b/exampleSite/content/posts/carousel1/carousel3.jpg new file mode 100644 index 00000000..1f2eb62d Binary files /dev/null and b/exampleSite/content/posts/carousel1/carousel3.jpg differ diff --git a/exampleSite/content/posts/carousel1/carousel4.jpg b/exampleSite/content/posts/carousel1/carousel4.jpg new file mode 100644 index 00000000..7e66ceb4 Binary files /dev/null and b/exampleSite/content/posts/carousel1/carousel4.jpg differ diff --git a/exampleSite/content/posts/carousel1/index.md b/exampleSite/content/posts/carousel1/index.md new file mode 100644 index 00000000..d377cbb9 --- /dev/null +++ b/exampleSite/content/posts/carousel1/index.md @@ -0,0 +1,42 @@ ++++ +title = "Carousel with image description" +description = "Post with carousel which has image description, but can also omit it " +summary = "" +toc = true +authors = ["Example Author"] +tags = ["image"] +categories = ["themes"] +series = ["Themes Guide"] +date = "2020-05-26" +lastmod = "2020-05-26" +draft = false + +featuredImage = [ + { image = "carousel1.jpg", description = "Caption of the first image." }, + { image = "carousel2.jpg", description = "Caption of the second image." }, + { image = "carousel3.jpg", description = "The next image does not have a caption." }, + { image = "carousel4.jpg" } +] ++++ + +This post includes a carousel on the end. It is displayed like a gallery and you can +move around the images so that they do not take too much space. Style is at the moment +not configurable, but configuration of the carousel style could be done in the future. + + + +## Example subtitle for carousel + +Aenean vehicula non elit id varius. Mauris condimentum lacinia mollis. Nullam quis cursus metus, eget mattis erat. Aliquam nec ante lacus. In tellus augue, iaculis vitae sollicitudin quis, tempor nec urna. Aenean ut fermentum erat, vel gravida ligula. Etiam sed ex aliquet, egestas nibh eu, iaculis mi. Nunc sit amet fermentum ex. Sed convallis ac arcu tristique rhoncus. Suspendisse potenti. + +Proin justo purus, porttitor et semper ut, commodo et nibh. Nam malesuada id arcu in tempus. Ut ornare vestibulum ultrices. Nullam tempor lectus quis ornare viverra. Vestibulum fringilla turpis ac leo fermentum, et dictum nisi consectetur. Integer ullamcorper fringilla mi, non volutpat sapien ultrices vel. Phasellus at blandit neque, pulvinar rutrum ante. + +Etiam auctor, elit vel pretium consequat, orci magna aliquet dolor, quis varius felis purus ut elit. Sed ultrices feugiat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut accumsan pulvinar purus et ornare. Vestibulum et tortor eget lacus hendrerit porttitor. Cras dapibus ac est posuere mattis. Pellentesque eu ligula ultricies, interdum nulla vel, sollicitudin ligula. Suspendisse sit amet massa sed dui placerat pharetra. Vestibulum massa sem, congue in vehicula vitae, aliquam eu mi. Suspendisse eget laoreet velit. Cras felis enim, molestie in enim nec, mollis venenatis lectus. Donec tincidunt, mi vel interdum varius, urna metus aliquet velit, ut venenatis nulla orci nec lectus. Nam id tortor imperdiet, tempor massa eget, congue nisl. Suspendisse venenatis facilisis orci, non scelerisque risus volutpat sit amet. + +## Example subtitle2 for the carousel + +After this section, you are suppose to see the carousel. + +Aliquam posuere diam non ligula tristique congue. Donec dignissim eu justo sed dictum. Praesent at massa erat. Praesent mollis viverra velit. Aliquam maximus pharetra massa a efficitur. Sed tempus egestas purus sit amet tempor. Donec porttitor varius nisi, eu venenatis risus gravida id. Pellentesque blandit nunc non urna consectetur commodo. Sed at feugiat felis, sit amet malesuada nunc. Curabitur in tempor nisl. Pellentesque accumsan est orci, in commodo felis accumsan facilisis. Nulla maximus suscipit posuere. Nulla et consequat mauris, fermentum ultricies tellus. + +Maecenas consectetur ac libero vitae congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tortor eu lectus placerat varius. Mauris a nisi consectetur, ornare dolor ut, rutrum ligula. Sed enim nisl, fermentum a dictum vel, vestibulum ut odio. Suspendisse laoreet quis urna eu vestibulum. Maecenas commodo augue ex, eu egestas nulla aliquet ut. Cras aliquam dui ipsum, nec sodales erat convallis sit amet. Donec porttitor posuere hendrerit. Sed imperdiet at purus eget tempus. In ac est urna. diff --git a/exampleSite/content/posts/carousel2/carousel1.jpg b/exampleSite/content/posts/carousel2/carousel1.jpg new file mode 100644 index 00000000..3df137fb Binary files /dev/null and b/exampleSite/content/posts/carousel2/carousel1.jpg differ diff --git a/exampleSite/content/posts/carousel2/carousel2.jpg b/exampleSite/content/posts/carousel2/carousel2.jpg new file mode 100644 index 00000000..9a142e08 Binary files /dev/null and b/exampleSite/content/posts/carousel2/carousel2.jpg differ diff --git a/exampleSite/content/posts/carousel2/carousel3.jpg b/exampleSite/content/posts/carousel2/carousel3.jpg new file mode 100644 index 00000000..1f2eb62d Binary files /dev/null and b/exampleSite/content/posts/carousel2/carousel3.jpg differ diff --git a/exampleSite/content/posts/carousel2/carousel4.jpg b/exampleSite/content/posts/carousel2/carousel4.jpg new file mode 100644 index 00000000..7e66ceb4 Binary files /dev/null and b/exampleSite/content/posts/carousel2/carousel4.jpg differ diff --git a/exampleSite/content/posts/carousel2/index.md b/exampleSite/content/posts/carousel2/index.md new file mode 100644 index 00000000..507e562c --- /dev/null +++ b/exampleSite/content/posts/carousel2/index.md @@ -0,0 +1,37 @@ ++++ +title = "Carousel with image array" +description = "Post with carousel which does not have description per image" +summary = "" +toc = true +authors = ["Example Author"] +tags = ["image"] +categories = ["themes"] +series = ["Themes Guide"] +date = "2020-05-26" +lastmod = "2020-05-26" +draft = false + +featuredImage = ["carousel1.jpg", "carousel2.jpg", "carousel3.jpg", "carousel4.jpg"] ++++ + +This post includes a carousel without descriptions on the end. It is displayed like a gallery and you can +move around the images so that they do not take too much space. Style is at the moment +not configurable, but configuration of the carousel style could be done in the future. + + + +## Example subtitle for carousel + +Aenean vehicula non elit id varius. Mauris condimentum lacinia mollis. Nullam quis cursus metus, eget mattis erat. Aliquam nec ante lacus. In tellus augue, iaculis vitae sollicitudin quis, tempor nec urna. Aenean ut fermentum erat, vel gravida ligula. Etiam sed ex aliquet, egestas nibh eu, iaculis mi. Nunc sit amet fermentum ex. Sed convallis ac arcu tristique rhoncus. Suspendisse potenti. + +Proin justo purus, porttitor et semper ut, commodo et nibh. Nam malesuada id arcu in tempus. Ut ornare vestibulum ultrices. Nullam tempor lectus quis ornare viverra. Vestibulum fringilla turpis ac leo fermentum, et dictum nisi consectetur. Integer ullamcorper fringilla mi, non volutpat sapien ultrices vel. Phasellus at blandit neque, pulvinar rutrum ante. + +Etiam auctor, elit vel pretium consequat, orci magna aliquet dolor, quis varius felis purus ut elit. Sed ultrices feugiat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut accumsan pulvinar purus et ornare. Vestibulum et tortor eget lacus hendrerit porttitor. Cras dapibus ac est posuere mattis. Pellentesque eu ligula ultricies, interdum nulla vel, sollicitudin ligula. Suspendisse sit amet massa sed dui placerat pharetra. Vestibulum massa sem, congue in vehicula vitae, aliquam eu mi. Suspendisse eget laoreet velit. Cras felis enim, molestie in enim nec, mollis venenatis lectus. Donec tincidunt, mi vel interdum varius, urna metus aliquet velit, ut venenatis nulla orci nec lectus. Nam id tortor imperdiet, tempor massa eget, congue nisl. Suspendisse venenatis facilisis orci, non scelerisque risus volutpat sit amet. + +## Example subtitle2 for the carousel + +After this section, you are suppose to see the carousel. + +Aliquam posuere diam non ligula tristique congue. Donec dignissim eu justo sed dictum. Praesent at massa erat. Praesent mollis viverra velit. Aliquam maximus pharetra massa a efficitur. Sed tempus egestas purus sit amet tempor. Donec porttitor varius nisi, eu venenatis risus gravida id. Pellentesque blandit nunc non urna consectetur commodo. Sed at feugiat felis, sit amet malesuada nunc. Curabitur in tempor nisl. Pellentesque accumsan est orci, in commodo felis accumsan facilisis. Nulla maximus suscipit posuere. Nulla et consequat mauris, fermentum ultricies tellus. + +Maecenas consectetur ac libero vitae congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tortor eu lectus placerat varius. Mauris a nisi consectetur, ornare dolor ut, rutrum ligula. Sed enim nisl, fermentum a dictum vel, vestibulum ut odio. Suspendisse laoreet quis urna eu vestibulum. Maecenas commodo augue ex, eu egestas nulla aliquet ut. Cras aliquam dui ipsum, nec sodales erat convallis sit amet. Donec porttitor posuere hendrerit. Sed imperdiet at purus eget tempus. In ac est urna. diff --git a/layouts/_default/single.html b/layouts/_default/single.html index d79d528b..9a5110ab 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -7,9 +7,17 @@ {{- print "lg:col-start-2" -}} {{ end }} bg-secondary-bg col-span-2 rounded px-6 py-8 lg:col-span-6" > + {{ partial "components/post-article" . }} + {{ if eq .Site.Params.carouselPosition "bottom" }} + {{ if isset $.Params "carousel" }} + {{ partial "components/carousel" . }} + {{ end }} + {{ end }} + {{ with .GetTerms "tags" }} + {{ partial "components/post-tags" . }} {{ end }} diff --git a/layouts/partials/components/carousel.html b/layouts/partials/components/carousel.html new file mode 100644 index 00000000..c43b0f5e --- /dev/null +++ b/layouts/partials/components/carousel.html @@ -0,0 +1,56 @@ +
+ + {{ end }} + +
+ + +
+ + + +
diff --git a/layouts/partials/components/doc-layout.html b/layouts/partials/components/doc-layout.html index 3740e91f..29e7fdda 100644 --- a/layouts/partials/components/doc-layout.html +++ b/layouts/partials/components/doc-layout.html @@ -12,7 +12,15 @@
{{ partial "components/post-article" . }} - + + {{ if isset $.Params "carousel" }} + {{ if $.Params.carousel.enable }} + {{ if gt (len $.Params.carousel.images) 0 }} + {{ partial "components/carousel" . }} + {{ end }} + {{ end }} + {{ end }} + {{ with .GetTerms "tags" }} {{ partial "components/post-tags" . }} {{ end }} @@ -156,4 +164,4 @@ {{ $versions := .context.Scratch.Get "versions" }} {{ .context.Scratch.Delete "versions" }} {{ return $versions }} -{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/partials/components/post-article.html b/layouts/partials/components/post-article.html index f558cbef..3805f4bb 100644 --- a/layouts/partials/components/post-article.html +++ b/layouts/partials/components/post-article.html @@ -9,4 +9,5 @@

{{ .Title }}

{{ end }} {{ .Content }} + diff --git a/layouts/partials/components/schema-node.html b/layouts/partials/components/schema-node.html index dbcae7a5..cfa16627 100644 --- a/layouts/partials/components/schema-node.html +++ b/layouts/partials/components/schema-node.html @@ -16,14 +16,16 @@ "position": {{ add $index 1 }}, "name": {{ .Title }}, "description": {{ if .Description }}{{ .Description }}{{ else if .Summary }}{{ .Summary }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ end }}, - {{- $img := partial "utils/get-image" (dict "context" . "url" .Params.featuredImage "keyword" "*featured*") }} + {{- if isset .Params "featuredImage" }} + {{- $img := partial "utils/get-image" (dict "context" . "url" (first 1 .Params.featuredImage) "keyword" "*featured*") }} {{- with $img }} "image": {{ . }}, {{- end }} + {{- end }} "url": {{ .Permalink }} } {{- end }} ] } -{{- end }} \ No newline at end of file +{{- end }} diff --git a/layouts/partials/components/schema-page.html b/layouts/partials/components/schema-page.html index 2e71322b..a7a45d0b 100644 --- a/layouts/partials/components/schema-page.html +++ b/layouts/partials/components/schema-page.html @@ -7,11 +7,12 @@ "@id": {{ .Permalink }} }, "headline": "{{ partial "get-title" . }}", - {{- $img := partial "utils/get-image" (dict "context" . "url" .Params.featuredImage "keyword" "*featured*") }} + {{ if isset .Params "featuredImage" }} + {{- $img := partial "utils/get-image" (dict "context" . "url" (first 1 .Params.featuredImage) "keyword" "*featured*") }} {{- with $img }} "image": {{ . }}, {{ end -}} - + {{ end }} {{ if .IsPage -}} {{ if not .PublishDate.IsZero -}} "datePublished": {{ .PublishDate.Format "2006-01-02T15:04:05-07:00" }}, @@ -59,4 +60,4 @@ }, "description": "{{ if .Description }}{{ .Description }}{{ else if .Summary }}{{ .Summary }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ end }}" } - \ No newline at end of file + diff --git a/layouts/partials/components/summary-plain.html b/layouts/partials/components/summary-plain.html index 59ad067f..87bd051d 100644 --- a/layouts/partials/components/summary-plain.html +++ b/layouts/partials/components/summary-plain.html @@ -5,8 +5,8 @@
{{ with $featured }} -
+
{{ . }}
{{ end }} -
\ No newline at end of file +
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 7b5d536c..a088c377 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -54,8 +54,18 @@ +{{- $assets := .Site.Data.assets }} {{- $eurekaCSS := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js" "inlineImports" true) | resources.ExecuteAsTemplate "css/eureka.css" . | minify | fingerprint "sha384" }} +{{ if isset .Params "featuredimage" }} +{{ if (reflect.IsSlice .Params.featuredimage) }} +{{ if (gt (len .Params.featuredimage) 1) }} + +{{- $carouselCSS := resources.Get "css/carousel.css" | minify }} + +{{ end }} +{{ end }} +{{ end }} {{- $eurekaJS := resources.Get "js/eureka.js" | resources.ExecuteAsTemplate "js/eureka.js" . | minify | fingerprint "sha384" }} @@ -100,6 +110,16 @@ +{{ define "partials/get-bundles" }} +{{ $currentPage := . }} +{{ $bundles := slice $currentPage }} +{{ if and (ne $currentPage.Kind "taxonomy") (or (ne $currentPage $currentPage.FirstSection) (eq $currentPage.Kind "term")) }} +{{ $currentBundles := partial "get-bundles" $currentPage.Parent }} +{{ $bundles = $bundles | append $currentBundles }} +{{ end }} +{{ return $bundles }} +{{ end }} + {{- $enableMath := false }} {{- if .Site.Params.math.handler }} {{- $bundles := partial "utils/get-bundles" . }} @@ -185,4 +205,4 @@ {{- partial "components/opengraph" . }} {{- range .AlternativeOutputFormats }} {{- printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} -{{- end }} \ No newline at end of file +{{- end }} diff --git a/layouts/partials/utils/get-featured.html b/layouts/partials/utils/get-featured.html index 89483aef..5ca8312f 100644 --- a/layouts/partials/utils/get-featured.html +++ b/layouts/partials/utils/get-featured.html @@ -2,8 +2,25 @@ {{ $image := partial "utils/get-image" (dict "context" . "url" .Params.featuredImage "keyword" "*featured*") }} {{ $featured := ""}} {{ if $video }} -{{ $featured = $video }} + {{ $featured = $video }} {{ else if $image }} -{{ $featured = print "\"Featured" | safeHTML }} + {{ if and (reflect.IsSlice .Params.featuredimage) (gt (len .Params.featuredimage) 1) }} + {{ if .Site.Params.carouselfeatured }} + {{ range first 1 .Params.featuredimage }} + {{ if reflect.IsMap . }} + {{ $image = partial "utils/get-image" (dict "context" $ "url" .image "keyword" .image ) }} + {{ else }} + {{ $image = partial "utils/get-image" (dict "context" $ "url" . "keyword" . ) }} + {{ end }} + {{ end }} + {{ end }} + {{ else if reflect.IsSlice .Params.featuredimage }} + {{ if .Site.Params.carouselfeatured }} + {{ $image = partial "utils/get-image" (dict "context" . "url" (first 1 .Params.featuredimage) "keyword" "*featured*") }} + {{ end }} + {{ else }} + {{ $image = partial "utils/get-image" (dict "context" . "url" .Params.featuredimage "keyword" "*featured*") }} + {{ end }} + {{ $featured = print "\"Featured" | safeHTML }} {{ end }} -{{ return $featured }} \ No newline at end of file +{{ return $featured }} diff --git a/layouts/partials/utils/render-featured.html b/layouts/partials/utils/render-featured.html new file mode 100644 index 00000000..2f1627df --- /dev/null +++ b/layouts/partials/utils/render-featured.html @@ -0,0 +1,15 @@ +{{ $image := "" }} +{{ if .Params.featuredvideo }} + {{ partial "utils/get-video" (dict "context" . "url" .Params.featuredvideo "keyword" "*featured*") }} +{{ else if .Params.featuredimage }} + {{ if and (reflect.IsSlice .Params.featuredimage) (gt (len .Params.featuredimage) 1) }} + {{ partial "components/carousel" . }} + {{ else if reflect.IsSlice .Params.featuredimage }} + {{ $image = partial "utils/get-image" (dict "context" . "url" (first 1 .Params.featuredimage) "keyword" "*featured*") }} + {{ else }} + {{ $image = partial "utils/get-image" (dict "context" . "url" .Params.featuredimage "keyword" "*featured*") }} + {{ end }} + {{ if $image }} + Featured Image + {{ end }} +{{ end }}