mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 00:14:05 +00:00
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
This commit is contained in:
George Cushen committed
1 parent
aeab0b6618
commit
9b3e1baa46
4 files changed
+77
-61
No files matched your search
@@ -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. */
|
||||
|
||||
@@ -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]]
|
||||
|
||||
@@ -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" . }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
{{ 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>
|
||||
{{ 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 }}
|
||||
|
||||
{{ 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>
|
||||
Reference in new issue
Block a user