Add carousel gallery shortcode

themes/lhs-retro/layouts/shortcodes/gallery.html

@@ -0,0 +1 @@
+{{ .Inner }}

themes/lhs/assets/sass/bulma-carousel.sass

@@ -0,0 +1,145 @@
+.slider
+	position: relative
+	width: 100%
+	// overflow: hidden
+.slider-container
+	display: flex
+	flex-wrap: nowrap
+	flex-direction: row
+	overflow: hidden
+	transform: translate3d(0, 0, 0)
+	min-height: 100%
+	&.is-vertical
+		flex-direction: column
+	.slider-item
+		flex: none
+		.image
+			&.is-covered
+				img
+					object-fit: cover
+					object-position: center center
+					height: 100%
+					width: 100%
+		// Responsive embedded objects
+		.video-container
+			height: 0
+			padding-bottom: 0
+			padding-top: 56.25% // ratio 16:9
+			margin: 0
+			position: relative
+			&.is-1by1,
+			&.is-square
+				padding-top: 100%
+			&.is-4by3
+				padding-top: 75%
+			&.is-21by9
+				padding-top: 42.857143%
+			& iframe,
+			& object,
+			& embed
+				position: absolute
+				top: 0
+				left: 0
+				width: 100% !important
+				height: 100% !important
+
+
+.slider-navigation-previous,
+.slider-navigation-next
+	display: flex
+	justify-content: center
+	align-items: center
+	position: absolute
+	width: 42px
+	height: 42px
+	background: white center center no-repeat
+	background-size: 20px 20px
+	border: 1px solid white
+	border-radius: 25091983px
+	box-shadow: 0 2px 5px #3232321a
+	top: 50%
+	margin-top: -20px
+	left: 0px
+	cursor: pointer
+	transition: transform .3s, opacity .3s
+	&:hover
+		transform: scale(1.2)
+	&.is-hidden
+		display: none
+		opacity: 0
+	svg
+		width: 25%
+.slider-navigation-next
+	left: auto
+	right: 0px
+	background: white center center no-repeat
+	background-size: 20px 20px
+
+.slider-pagination
+	display: none
+	justify-content: center
+	align-items: center
+	position: absolute
+	bottom: 0
+	left: 0
+	right: 0
+	padding: .5rem 1rem
+	text-align: center
+	.slider-page
+		background: white
+		width: 10px
+		height: 10px
+		border-radius: 25091983px
+		display: inline-block
+		margin: 0 3px
+		box-shadow: 0 2px 5px #3232321a
+		transition: transform .3s
+		cursor: pointer
+		&.is-active,
+		&:hover
+			transform: scale(1.4)
+
+	@media screen and (min-width: 800px)
+		display: flex
+
+
+// Hero Carousel
+=hero-carousel
+	position: absolute
+	top: 0
+	left: 0
+	bottom: 0
+	right: 0
+	height: auto
+	border: none
+	margin: auto
+	padding: 0
+	z-index: 0
+
+.hero
+	&.has-carousel
+		position: relative
+		+ .hero-body,
+		+ .hero-head,
+		+ .hero-footer
+			z-index: 10
+			overflow: hidden
+		.hero-carousel
+			+hero-carousel
+			.slider
+				width: 100%
+				max-width: 100%
+				overflow: hidden
+				height: 100% !important
+				max-height: 100%
+				z-index: 0
+				.has-background
+					max-height: 100%
+					.is-background
+						object-fit: cover
+						object-position: center center
+						height: 100%
+						width: 100%
+		.hero-body
+			margin: 0 3rem
+			z-index: 10

themes/lhs/assets/sass/leighhack.scss

@@ -27,6 +27,9 @@ $body-font-size: 1.25em;
 // Import Bulmas styles
 @import "bulma.sass";
 
+// Add Carousel add-on
+@import "bulma-carousel.sass";
+
 
 // -------------------------------------------------------
 // Custom SCSS overrides

themes/lhs/layouts/partials/foot.html

@@ -2,10 +2,19 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 
 {{ if .Page.Store.Get "hasMermaid" }}
-  <script type="module">
+<script type="module">
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
-  </script>
+</script>
+{{ end }}
+
+{{ if .Page.Store.Get "hasCarousel" }}
+{{ with resources.Get "js/bulma-carousel.min.js" }}
+<script src="{{ .RelPermalink }}"></script>
+{{ end }}
+<script>
+  bulmaCarousel.attach('.carousel', { pagination: false });
+</script>
 {{ end }}
 
 {{ $theme := resources.Get "js/theme.js" }}

themes/lhs/layouts/shortcodes/gallery.html

@@ -0,0 +1,7 @@
+<!-- Start Carousel -->
+<div class="carousel">
+    {{ .Inner }}
+</div>
+<!-- End Carousel -->
+
+{{ .Page.Store.Set "hasCarousel" true }}

themes/lhs/layouts/shortcodes/image.html

@@ -3,6 +3,9 @@
 {{ $img = $img.Resize (print (default "1264x" $width) " webp") }}
 {{ $title := .Get "title" }}
 {{ $class := .Get "class" }}
+{{- with .Parent -}}
+<div>
+{{ end }}
 <figure class="image{{ if $class }} {{ $class }}{{ end }}">
   <img src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}" {{ if $title }}
     alt="{{ $title }}" {{ end }}>
@@ -14,3 +17,6 @@
   </figcaption>
   {{ end }}
 </figure>
+{{- with .Parent -}}
+</div>
+{{ end }}