hmc-guide/themes/lotusdocs/layouts/partials/landing/image_compare.html

68 lines
3.8 KiB
HTML

{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
{{ with (index .Site.Data.landing $sectionTitle) }}
{{ if eq .enable true }}
<section id="{{ $sectionTitle }}">
<div class="container mt-100 mt-60">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title mb-4 pb-2">
{{ with .title }}
<h4 class="title fw-bold mb-4">{{ . }}</h4>
{{ end }}
{{ with .subtitle }}
<p class="text-muted para-desc mb-0 mx-auto">{{ . | markdownify }}</p>
{{ end }}
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-lg-8 col-md-12 mt-3 pt-2 text-center">
<ul class="nav nav-pills nav-justified flex-column flex-sm-row rounded bg-primary" id="pills-tab-{{ $sectionTitle }}" role="tablist">
{{ range $index, $value := .items }}
<li class="nav-item">
<a class="nav-link rounded{{ if (eq $index 0) }} active{{ end }}" id="{{ anchorize .title }}-tab" data-bs-toggle="pill" href="#pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tab" aria-controls="pills-{{ anchorize .title }}" aria-selected="false">
<div class="text-center py-2">
<p class="mb-0 fs-6 fw-semibold">{{ .title }}</p>
</div>
</a><!--end nav link-->
</li><!--end nav item-->
{{ end }}
</ul><!--end nav pills-->
</div>
</div>
<div class="row">
<div class="col-12 mt-4 pt-2">
<div class="tab-content" id="pills-tab-{{ $sectionTitle }}Content">
{{ range $index, $value := .items }}
<div class="tab-pane fade show{{ if (eq $index 0) }} active{{ end }}" id="pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tabpanel" aria-labelledby="{{ anchorize .title }}-tab">
<div class="row align-items-center">
<div class="col-md-12">
{{ $title := .title }}
{{ $path := .imagePath | default "images" }}
{{ $imageBefore := .imageBefore }}
{{ $imageAfter := .imageAfter }}
{{ $pathBefore := printf "%s/%s" $path $imageBefore }}
{{ $pathAfter := printf "%s/%s" $path $imageAfter }}
{{ with and $imageBefore $imageAfter }}
<div id="{{ anchorize $title }}-compare" class="image-compare rounded-md border">
{{ with $imageBefore := resources.Get $pathBefore }}
<img src="{{ .RelPermalink }}" alt="{{ $imageBefore }}" />
{{ end }}
{{ with $imageAfter := resources.Get $pathAfter }}
<img src="{{ .RelPermalink }}" alt="{{ $imageAfter }}" />
{{ end }}
</div>
{{ end }}
</div><!--end col-->
</div><!--end row-->
</div><!--end teb pane-->
{{ end }}
</div><!--end tab content-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section>
{{ end }}
{{ end }}