Add carousel option to the posts

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; }
+

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

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

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.
+
+<!--more-->
+
+## 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.

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.
+
+<!--more-->
+
+## 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.

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

layouts/partials/components/carousel.html

@@ -0,0 +1,56 @@
+<section>
+	<div id="tinyslider-carousel" class="w-full">
+		{{ range .Params.featuredimage }}
+		<div class="item">
+			<div>
+				{{ if reflect.IsMap . }}
+				{{ $image := partial "utils/get-image" (dict "context" $ "url" .image "keyword" .image) }}
+				<img class="img-responsive" src="{{ $image }}" alt="{{ .description }}" />
+			</div>
+					{{ if .description }}
+					<p>{{ .description }}</p>
+					{{ end }}
+				{{ else }}
+				{{ $image := partial "utils/get-image" (dict "context" $ "url" . "keyword" .) }}
+				<img class="img-responsive" src="{{ $image }}" />
+			</div>
+				{{ end }}
+		</div>
+		{{ end }}
+	</div>
+	<div class="tinyslider-controls">
+		<ul class="thumbnails" id="customize-thumbnails">
+		{{ range .Params.featuredimage }}
+			<li class="item">
+				{{ if reflect.IsMap . }}
+				{{ $image := partial "utils/get-image" (dict "context" $ "url" .image "keyword" .image) }}
+				<img class="img-responsive" src="{{ $image }}" alt="{{ .description }}" width="50px" />
+				{{ else }}
+				{{ $image := partial "utils/get-image" (dict "context" $ "url" . "keyword" .) }}
+				<img class="img-responsive" src="{{ $image }}" width="50px" />
+				{{ end }}
+			</li>
+		{{ end }}
+		</ul>
+		<ul class="controls" id="customize-controls">
+			<li class="prev"><i class="fas fa-angle-left"></i></li>
+			<li class="next"><i class="fas fa-angle-right"></i></li>
+		</ul>
+	</div>
+	<script src="{{ printf .Site.Data.assets.tinyslider.js.url .Site.Data.assets.tinyslider.version }}"></script>
+	<script>  const slider = tns({
+		container: '#tinyslider-carousel',
+		items: 1,
+		autoplay: false,
+		center: true,
+		controls: true,
+		nav: true,
+		navContainer: "#customize-thumbnails",
+		controlsContainer: "#customize-controls",
+		navAsThumbnails: true,
+		autoWidth: true,
+		autoHeight: true,
+	  });
+	</script>
+
+</section>

layouts/partials/components/doc-layout.html

@@ -12,7 +12,15 @@
             <div class="flex">
                 <div class="w-full lg:w-3/4 px-6">
                     {{ 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 }}
+{{ end }}

layouts/partials/components/post-article.html

@@ -9,4 +9,5 @@ <h1 class="mb-4">{{ .Title }}</h1>
   {{ end }}
 
   {{ .Content }}
+
 </article>

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 }}
     ]
 }
 </script>
-{{- end }}
+{{- end }}

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 }}"
 }
-</script>
+</script>

layouts/partials/components/summary-plain.html

@@ -5,8 +5,8 @@
   </div>
 
   {{ with $featured }}
-  <div class="w-full lg:w-1/3 mb-4 lg:mb-0 lg:ms-8">
+  <div class="w-full lg:w-1/3 mb-4 lg:mb-0 lg:ml-8">
     {{ . }}
   </div>
   {{ end }}
-</div>
+</div>

layouts/partials/head.html

@@ -54,8 +54,18 @@
 
 <meta name="generator" content="Hugo Eureka {{ .Site.Data.eureka.version }}" />
 
+{{- $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" }}
 <link rel="stylesheet" href="{{ $eurekaCSS.Permalink }}">
+{{ if isset .Params "featuredimage" }}
+{{ if (reflect.IsSlice .Params.featuredimage) }}
+{{ if (gt (len .Params.featuredimage) 1) }}
+<link preload rel="stylesheet" href="{{ printf $assets.tinyslider.css.url $assets.tinyslider.version }}" crossorigin>
+{{- $carouselCSS := resources.Get "css/carousel.css" | minify }}
+<link rel="stylesheet" href="{{ $carouselCSS.Permalink }}">
+{{ end }}
+{{ end }}
+{{ end }}
 
 {{- $eurekaJS := resources.Get "js/eureka.js" | resources.ExecuteAsTemplate "js/eureka.js" . | minify | fingerprint "sha384" }}
 <script defer src="{{ $eurekaJS.Permalink }}"></script>
@@ -100,6 +110,16 @@
 <script defer type="text/javascript" src="{{ $fontawesomeJS.Permalink }}"></script>
 
 
+{{ 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 `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
-{{- end }}
+{{- end }}

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 "<img src=\"" $image "\" class=\"w-full\" alt=\"Featured Image\">" | 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 "<img src=\"" $image "\" class=\"w-full\" alt=\"Featured Image\">" | safeHTML }}
 {{ end }}
-{{ return $featured }}
+{{ return $featured }}

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 }}
+    <img src="{{ $image }}" class="w-full" alt="Featured Image">
+  {{ end }}
+{{ end }}