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.toml

@@ -32,4 +32,14 @@
 
   [katex.autoRender]
     url = "https://cdn.jsdelivr.net/npm/katex@%s/dist/contrib/auto-render.min.js"
-    sri = "sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
+    sri = "sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
+
+[tinyslider]
+  version = "2.9.3"
+
+  [tinyslider.css]
+    url = "https://cdn.jsdelivr.net/npm/tiny-slider@%s/dist/tiny-slider.css"
+
+  [tinyslider.js]
+    url = "https://cdn.jsdelivr.net/npm/tiny-slider@%s/dist/tiny-slider.min.js"
+

exampleSite/content/posts/carousel.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
+
+carousel = [
+	{ image = "../carousel1.png", description = "Caption of the first image." },
+	{ image = "../carousel2.png", description = "Caption of the second image." },
+	{ image = "../carousel3.png", description = "The next image does not have a caption." },
+	{ image = "../carousel4.png" }
+]
++++
+
+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.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
+
+carousel = ["../carousel1.png", "../carousel2.png", "../carousel3.png", "../carousel4.png"]
++++
+
+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

@@ -17,6 +17,11 @@ <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
         <div class="content">
             {{ .Content}}
         </div>
+
+        {{ if isset $.Params "carousel" }}
+        {{ partial "components/carousel" . }}
+        {{ end }}
+
         {{ with .GetTerms "tags" }}
         {{ partial "components/post-tags" . }}
         {{ end }}
@@ -62,4 +67,4 @@ <h2 class="text-lg font-semibold mb-4">{{ i18n "seeAlso" }}</h2>
         hljs.initHighlightingOnLoad();
     })
 </script>
-{{ end }}
+{{ end }}

layouts/partials/components/carousel.html

@@ -0,0 +1,54 @@
+<section>
+	<div id="tinyslider-carousel">
+		{{ range $.Params.carousel }}
+		<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.carousel }}
+			<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,
+		nav: true,
+		navContainer: "#customize-thumbnails",
+		controlsContainer: "#customize-controls",
+		navAsThumbnails: true,
+		autoHeight: true,
+	  });
+	</script>
+
+</section>

layouts/partials/components/doc-layout.html

@@ -24,6 +24,10 @@ <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
                     <div class="content">
                         {{ .Content}}
                     </div>
+                    {{ if isset $.Params "carousel" }}
+                    {{ partial "components/carousel" . }}
+                    {{ end }}
+
                     {{ with .GetTerms "tags" }}
                     {{ partial "components/post-tags" . }}
                     {{ end }}
@@ -166,4 +170,4 @@ <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
 {{ $versions := .context.Scratch.Get "versions" }}
 {{ .context.Scratch.Delete "versions" }}
 {{ return $versions }}
-{{ end }}
+{{ end }}

layouts/partials/head.html

@@ -52,9 +52,15 @@
 {{ end }}
 <title>{{ partial "get-title" . }}</title>
 
+{{- $assets := .Site.Data.assets }}
 {{- $eurekaCSS := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js") }}
 {{- $eurekaCSS := $eurekaCSS | minify }}
 <link rel="stylesheet" href="{{ $eurekaCSS.Permalink }}">
+{{ if isset $.Params "carousel" }}
+<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 }}
 
 {{- $eurekaJS := resources.Get "js/eureka.js" | minify }}
 <script defer src="{{ $eurekaJS.Permalink }}"></script>
@@ -64,7 +70,6 @@
   href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Noto+Serif+SC:wght@400;600;700&display=swap"
   as="style" onload="this.onload=null;this.rel='stylesheet'">
 
-{{- $assets := .Site.Data.assets }}
 <link rel="stylesheet" href="{{ printf $assets.highlightjs.css.url $assets.highlightjs.version }}"
   {{ with $assets.highlightjs.css.sri }} integrity="{{ . }}" {{ end }} media="print"
   onload="this.media='all';this.onload=null" crossorigin>
@@ -149,4 +154,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 }}