Make captions move
This commit is contained in:
Alex Haslam
@@ -1,93 +1,75 @@
|
||||
{{ $id := delimit (slice "carousel" (partial "functions/uid.html" .) (now.UnixNano)) "-" }}
|
||||
{{ $aspect := (split (.Get "aspectRatio") "-") }}
|
||||
{{ $aspectx := default "16" (index $aspect 0) }}
|
||||
{{ $aspecty := default "9" (index $aspect 1) }}
|
||||
{{ $aspectx := default "16" (index $aspect 0) }}
|
||||
{{ $aspecty := default "9" (index $aspect 1) }}
|
||||
{{ $interval := default "2000" (.Get "interval") }}
|
||||
{{ $imagesParam := .Get "images" }}
|
||||
|
||||
{{ $items := slice }}
|
||||
{{ $page := .Page.Resources }}
|
||||
{{ $imagesTemp := .Get "images" }}
|
||||
{{ $imagesTemp := $imagesParam }}
|
||||
{{ $imagesTemp = strings.TrimPrefix "{" $imagesTemp }}
|
||||
{{ $imagesTemp = strings.TrimSuffix "}" $imagesTemp }}
|
||||
{{ $imagesTemp := strings.Split $imagesTemp "," }}
|
||||
{{ $images := slice }}
|
||||
{{ range $imagesTemp }}
|
||||
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
|
||||
{{ $images = $images | append (dict "resource" (resources.GetRemote .) "key" .) }}
|
||||
{{ else }}
|
||||
{{ range ($page.Match .) }}
|
||||
{{ $images = $images | append (dict "resource" . "key" .Name) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
|
||||
{{ $items = $items | append (dict "resource" (resources.GetRemote .) "key" .) }}
|
||||
{{ else }}
|
||||
{{ range ($page.Match .) }}
|
||||
{{ $items = $items | append (dict "resource" . "key" .Name) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $captionsParam := .Get "captions" }}
|
||||
{{ $captions := dict }}
|
||||
{{ if $captionsParam }}
|
||||
{{ $captionsTemp := strings.TrimPrefix "{" $captionsParam }}
|
||||
{{ $captionsTemp = strings.TrimSuffix "}" $captionsTemp }}
|
||||
{{ range (strings.Split $captionsTemp ",") }}
|
||||
{{ $pair := strings.Split . ":" }}
|
||||
{{ if ge (len $pair) 2 }}
|
||||
{{ $key := strings.TrimSpace (index $pair 0) }}
|
||||
{{ $value := strings.TrimSpace (delimit (after 1 $pair) ":") }}
|
||||
{{ $captions = merge $captions (dict $key $value) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $captionsTemp := strings.TrimPrefix "{" $captionsParam }}
|
||||
{{ $captionsTemp = strings.TrimSuffix "}" $captionsTemp }}
|
||||
{{ range (strings.Split $captionsTemp ",") }}
|
||||
{{ $pair := strings.Split . ":" }}
|
||||
{{ if ge (len $pair) 2 }}
|
||||
{{ $key := strings.TrimSpace (index $pair 0) }}
|
||||
{{ $value := strings.TrimSpace (delimit (after 1 $pair) ":") }}
|
||||
{{ $captions = merge $captions (dict $key $value) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not .Parent }}<div class="width-patch"></div>{{ end }}
|
||||
<div
|
||||
id="{{ $id }}"
|
||||
class="relative"
|
||||
class="relative not-prose"
|
||||
data-twe-carousel-init
|
||||
data-twe-ride="carousel"
|
||||
data-twe-interval="{{ $interval }}">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
|
||||
data-twe-carousel-indicators>
|
||||
{{ $num := 0 }}
|
||||
{{ range $images }}
|
||||
<button
|
||||
type="button"
|
||||
data-twe-target="#{{ $id }}"
|
||||
data-twe-slide-to="{{ $num }}"
|
||||
{{ if eq $num 0 }}data-twe-carousel-active aria-current="true"{{ end }}
|
||||
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
|
||||
aria-label="Slide {{ $num }}"></button>
|
||||
{{ $num = add $num 1 }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
|
||||
{{ range $index, $image := $images }}
|
||||
{{ $hiddenClass := cond (eq $index 0) "" "hidden" }}
|
||||
{{ $resource := index $image "resource" }}
|
||||
<div
|
||||
class="relative float-left -mr-[100%] {{ $hiddenClass }} w-full transition-transform ease-in-out motion-reduce:transition-none"
|
||||
data-twe-carousel-item style="transition-duration: {{ $interval }}ms;" {{ if eq $index 0
|
||||
}}data-twe-carousel-active{{ end }}>
|
||||
<div class="single_hero_background relative overflow-hidden"
|
||||
style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
|
||||
<img src="{{ $resource.RelPermalink }}"
|
||||
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
|
||||
alt="carousel image {{ add $index 1 }}">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div
|
||||
class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
|
||||
data-twe-carousel-indicators>
|
||||
{{ $num := 0 }}
|
||||
{{ range $items }}
|
||||
<button
|
||||
type="button"
|
||||
data-twe-target="#{{ $id }}"
|
||||
data-twe-slide-to="{{ $num }}"
|
||||
{{ if eq $num 0 }}data-twe-carousel-active aria-current="true"{{ end }}
|
||||
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
|
||||
aria-label="Slide {{ $num }}"></button>
|
||||
{{ $num = add $num 1 }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
{{ range $index, $image := $images }}
|
||||
<div
|
||||
class="relative w-full overflow-visible after:clear-both after:block after:content-['']"
|
||||
style="clip-path: inset(0 0 -9999px 0);">
|
||||
{{ range $index, $item := $items }}
|
||||
{{ $hiddenClass := cond (eq $index 0) "" "hidden" }}
|
||||
{{ $resource := index $image "resource" }}
|
||||
{{ $key := index $image "key" }}
|
||||
{{ $resource := index $item "resource" }}
|
||||
{{ $key := index $item "key" }}
|
||||
{{ $caption := "" }}
|
||||
{{ $candidates := slice }}
|
||||
{{ if $resource }}
|
||||
{{ $candidates = $candidates | append $resource.Name (path.Base $resource.Name) $resource.RelPermalink (path.Base
|
||||
$resource.RelPermalink) }}
|
||||
{{ $candidates = $candidates | append $resource.Name (path.Base $resource.Name) $resource.RelPermalink (path.Base $resource.RelPermalink) }}
|
||||
{{ end }}
|
||||
{{ if $key }}
|
||||
{{ $candidates = $candidates | append $key (path.Base $key) }}
|
||||
@@ -98,10 +80,24 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div
|
||||
class="{{ $hiddenClass }} text-left text-sm text-neutral-500 not-prose leading-snug [&>p]:m-0"
|
||||
{{ if eq $index 0 }}data-twe-carousel-active{{ end }}
|
||||
data-twe-carousel-item>
|
||||
{{ $caption | markdownify }}
|
||||
class="relative float-left -mr-[100%] {{ $hiddenClass }} w-full transition-transform ease-in-out motion-reduce:transition-none"
|
||||
data-twe-carousel-item
|
||||
style="transition-duration: {{ $interval }}ms;"
|
||||
{{ if eq $index 0 }}data-twe-carousel-active{{ end }}>
|
||||
<figure class="m-0 relative">
|
||||
<div class="single_hero_background relative overflow-hidden" style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
|
||||
<img
|
||||
src="{{ $resource.RelPermalink }}"
|
||||
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
|
||||
alt="carousel image {{ add $index 1 }}">
|
||||
</div>
|
||||
{{ if $caption }}
|
||||
<figcaption
|
||||
class="absolute left-0 right-0 text-left text-sm text-neutral-500 not-prose leading-snug [&>p]:m-0"
|
||||
style="top: calc(100% + 0.5rem);"
|
||||
>{{ $caption | markdownify }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user