feat: re-add Slider widget's height option

Although Slider height is now automatically normalised, it can be useful
to override the height when using the Slider as an image gallery.

Close #1086

assets/sass/academic/_widgets.scss

@@ -205,6 +205,13 @@ a.hero-cta-alt:hover {
  *  Slider Widget
  **************************************************/
 
+/* Clear `.home-section` as padding and animation interferes with Slider's layout and animations. */
+.home-section.wg-slider {
+  padding: 0;
+  animation: none;
+  animation-delay: unset;
+}
+
 /* The Slider widget reuses the Hero widget's `.wg-hero` class.
  * We must remove the `animation` and `clear` in this instance or
  * multiple slides can be `.active` at once. */

exampleSite/content/home/slider.md

@@ -9,6 +9,10 @@ weight = 1  # Order that this section will appear.
 # Use `false` to disable animation or enter a time in ms, e.g. `5000` (5s).
 interval = false
 
+# Slide height (optional).
+# E.g. `500px` for 500 pixels or `calc(100vh - 70px)` for full screen.
+height = ""
+
 # Slides.
 # Duplicate an `[[item]]` block to add more slides.
 [[item]]

layouts/partials/widget_page.html

@@ -49,7 +49,7 @@
     {{ $style = print $style . }}
   {{ end }}
 
-  {{ $params := dict "root" $ "page" $st }}
+  {{/* Fix Hugo's ContentBaseName returning wrong file base name when page section is within a bundle. */}}
   {{ $hash_id := replace $st.File.ContentBaseName "index" (path.Base (path.Split .Path).Dir) }}
 
   {{ $widget := or $st.Params.widget "blank" }}
@@ -57,15 +57,23 @@
   {{ if eq $widget "projects" }}{{ $widget = "portfolio" }}{{ end }}{{/* Support legacy Projects widget */}}
 
   {{ $widget_path := printf "widgets/%s.html" $widget }}
+  {{ $widget_args := dict "root" $ "page" $st "hash_id" $hash_id }}
+  {{ $css_classes := $st.Params.advanced.css_class | default "" }}
+  {{ $extra_attributes := "" }}
+  {{ $use_container := true }}
+
+  {{/* Special case: Slider widget. */}}
   {{ if in (slice "slider") $widget }}
-    {{ partial $widget_path $params }}
-  {{ else }}
-  <section id="{{ $hash_id }}" class="home-section {{ printf "wg-%s" (replace $widget "_" "-") }} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}}parallax{{end}} {{ with $st.Params.advanced.css_class }}{{ . }}{{ end }}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
-    <div class="container">
-      {{ partial $widget_path $params }}
-    </div>
-  </section>
+    {{ $css_classes = print $css_classes " carousel slide" }}
+    {{ $extra_attributes = printf "data-ride=\"carousel\" data-interval=\"%s\"" (string $st.Params.interval | default "5000") }}
+    {{ $use_container = false }}
   {{ end }}
+
+  <section id="{{$hash_id}}" class="home-section {{printf "wg-%s" (replace $widget "_" "-")}} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}}parallax{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
+    {{if $use_container}}<div class="container">{{end}}
+      {{ partial $widget_path $widget_args }}
+    {{if $use_container}}</div>{{end}}
+  </section>
 {{ end }}
 
 {{ partial "footer_container.html" . }}

layouts/partials/widgets/slider.html

@@ -1,61 +1,58 @@
 {{ $ := .root }}
 {{ $page := .page }}
+{{ $hash_id := .hash_id }}
 
-<section id="{{ $page.File.TranslationBaseName }}" class="carousel slide" data-ride="carousel" data-interval="{{if isset $page.Params "interval"}}{{$page.Params.interval}}{{else}}5000{{end}}">
+<!-- Indicators -->
+<ol class="carousel-indicators">
+  {{ range $index, $item := $page.Params.item }}
+  <li data-target="#{{$hash_id}}" data-slide-to="{{$index}}" {{if eq $index 0}}class="active"{{end}}></li>
+  {{ end }}
+</ol>
 
-  <!-- Indicators -->
-  <ol class="carousel-indicators">
-    {{ range $index, $item := $page.Params.item }}
-    <li data-target="#{{ $page.File.TranslationBaseName }}" data-slide-to="{{ $index }}" {{ if eq $index 0 }}class="active"{{ end }}></li>
+<!-- Carousel slides wrapper -->
+<div class="carousel-inner">
+  {{ range $index, $item := $page.Params.item }}
+  <div class="wg-hero dark carousel-item{{if eq $index 0}} active{{end}}" style="{{with $page.Params.height}}{{printf "height: %s;" . | safeCSS}}{{end}}
+    {{ if $item.overlay_color }}
+    background-color: {{ $item.overlay_color | default "transparent" }};
     {{ end }}
-  </ol>
-
-  <!-- Carousel slides wrapper -->
-  <div class="carousel-inner">
-    {{ range $index, $item := $page.Params.item }}
-    <div class="wg-hero dark carousel-item{{ if eq $index 0 }} active{{ end }}" style="
-      {{ if $item.overlay_color }}
-      background-color: {{ $item.overlay_color | default "transparent" }};
-      {{ end }}
-      {{ if $item.overlay_img }}
-      background-image:
-      {{ if $item.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $item.overlay_filter }}), rgba(0, 0, 0, {{ $item.overlay_filter }})), {{ end }}
-      url('{{ printf "img/%s" $item.overlay_img | absURL }}');
-      {{ end }}
-      ;">
-      <div class="container" style="text-align: {{$item.align | default "left"}};">
-          <h1 class="hero-title" itemprop="headline">
-            {{ with $item.title }}{{ . | markdownify | emojify }}{{ end }}
-          </h1>
+    {{ if $item.overlay_img }}
+    background-image:
+    {{ if $item.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $item.overlay_filter }}), rgba(0, 0, 0, {{ $item.overlay_filter }})), {{ end }}
+    url('{{ printf "img/%s" $item.overlay_img | absURL }}');
+    {{ end }}
+    ;">
+    <div class="container" style="text-align: {{$item.align | default "left"}};">
+        <h1 class="hero-title" itemprop="headline">
+          {{ with $item.title }}{{ . | markdownify | emojify }}{{ end }}
+        </h1>
 
-          {{ with $item.content }}
-          <p class="hero-lead" style="{{if eq $item.align "center"}}margin: 0 auto 0 auto;{{else if eq $item.align "right"}}margin-left: auto; margin-right: 0{{end}}">
-            {{ . | markdownify | emojify }}
-          </p>
-          {{ end }}
+        {{ with $item.content }}
+        <p class="hero-lead" style="{{if eq $item.align "center"}}margin: 0 auto 0 auto;{{else if eq $item.align "right"}}margin-left: auto; margin-right: 0{{end}}">
+          {{ . | markdownify | emojify }}
+        </p>
+        {{ end }}
 
-          {{ if $item.cta_url }}
-          {{ $pack := or .icon_pack "fa" }}
-          <p>
-            <a href="{{ $item.cta_url }}" class="btn btn-light btn-lg">
-              {{- with $item.cta_icon -}}<i class="{{ $pack }} {{ $pack }}-{{ . }}" style="padding-right: 10px;"></i>{{- end -}}
-              {{- $item.cta_label | emojify | safeHTML -}}
-            </a>
-          </p>
-          {{ end }}
-        </div>
-    </div>
-    {{ end }}
+        {{ if $item.cta_url }}
+        {{ $pack := or .icon_pack "fa" }}
+        <p>
+          <a href="{{ $item.cta_url }}" class="btn btn-light btn-lg">
+            {{- with $item.cta_icon -}}<i class="{{ $pack }} {{ $pack }}-{{ . }}" style="padding-right: 10px;"></i>{{- end -}}
+            {{- $item.cta_label | emojify | safeHTML -}}
+          </a>
+        </p>
+        {{ end }}
+      </div>
   </div>
+  {{ end }}
+</div>
 
-  <!-- Left and right controls -->
-  <a class="carousel-control-prev" href="#{{ $page.File.TranslationBaseName }}" data-slide="prev">
-    <span class="carousel-control-prev-icon"></span>
-    <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#{{ $page.File.TranslationBaseName }}" data-slide="next">
-    <span class="carousel-control-next-icon"></span>
-    <span class="sr-only">Next</span>
-  </a>
-
-</section>
+<!-- Left and right controls -->
+<a class="carousel-control-prev" href="#{{$hash_id}}" data-slide="prev">
+  <span class="carousel-control-prev-icon"></span>
+  <span class="sr-only">Previous</span>
+</a>
+<a class="carousel-control-next" href="#{{$hash_id}}" data-slide="next">
+  <span class="carousel-control-next-icon"></span>
+  <span class="sr-only">Next</span>
+</a>