dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2507 from tekdahl/carousel-aspectratio

Browse Source 
Carousel support any aspect ratio
This commit is contained in:
Nuno C.
2025-10-14 09:53:15 +01:00
committed by GitHub
parent ce18bf1134 132e932bd4
commit 1a86ce0bd7
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
exampleSite/content/docs/shortcodes/index.md
View File

@@ -124,13 +124,13 @@ Call to action
## Carousel
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and the aspect ratio you set with a default of `16:9`.
<!-- prettier-ignore-start -->
| Parameter | Description |
| --- | --- |
| `images` | **Required.** A regex string to match image names or URLs. |
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. It is set to `16-9` by default. |
| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) |
<!-- prettier-ignore-end -->

10
layouts/shortcodes/carousel.html
View File

@@ -1,5 +1,7 @@
{{ $id := delimit (slice "carousel" (partial "functions/uid.html" .) (now.UnixNano)) "-" }}
{{ $aspect := default "16-9" (.Get "aspectRatio") }}
{{ $aspect := (split (.Get "aspectRatio") "-") }}
{{ $aspectx := default "16" (index $aspect 0) }}
{{ $aspecty := default "9" (index $aspect 1) }}
{{ $interval := default "2000" (.Get "interval") }}
{{ $page := .Page.Resources }}
@@ -47,10 +49,12 @@
data-twe-carousel-item
style="transition-duration: {{ $interval }}ms;"
{{ if eq $index 0 }}data-twe-carousel-active{{ end }}>
<div class="ratio-{{ $aspect }} single_hero_background">
<div
class="single_hero_background"
style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
<img
src="{{ $image.RelPermalink }}"
class="block absolute top-0 object-cover w-full h-full nozoom"
class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
alt="carousel image {{ add $index 1 }}">
</div>
</div>