michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

carousel support for URLs

Browse source
This commit is contained in:
Nuno Coração 2024-02-10 18:44:07 +00:00
parent e87e066aa7
commit 02bcbb7a12
2 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
exampleSite/content/docs/shortcodes/index.md
View file

@ -127,7 +127,7 @@ Call to action
<!-- prettier-ignore-start -->
| Parameter | Description |
| ------------- | ----------------------------------------------------------------------------------------------------------------- |
| `images` | **Required.** A regex string to match image names. |
| `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. |
| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) |
<!-- prettier-ignore-end -->
@ -135,10 +135,10 @@ Call to action
**Example 1:** 16:9 aspect ratio and verbose list of images
```md
{{</* carousel images="{gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
```
{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
**Example 2:** 21:9 aspect ratio and regex-ed list of images
@ -319,9 +319,9 @@ Unlike `github` it can't display the main programming language of a project.
Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments.
<!-- prettier-ignore-start -->
| Parameter | Description |
| ----------- | ---------------------------------------------------------------------- |
| `projectID` | [String] gitlab numeric ProjectID |
| Parameter | Description |
| ----------- | ----------------------------------------------------------------------- |
| `projectID` | [String] gitlab numeric ProjectID |
| `baseURL` | [String] optional gitlab instance URL, default is `https://gitlab.com/` |
<!-- prettier-ignore-end -->
@ -385,9 +385,9 @@ The `keyword` component can be used to visually highlight certain important word
<!-- prettier-ignore-start -->
| Parameter | Description |
| ----------- | -------------------------------------------- |
| `icon` | Optional icon to be used in the keyword |
| Parameter | Description |
| --------- | --------------------------------------- |
| `icon` | Optional icon to be used in the keyword |
<!-- prettier-ignore-end -->
The input is written in Markdown so you can format it however you please.
@ -576,7 +576,7 @@ The `timeline` creates a visual timeline that can be used in different use-cases
| ----------- | -------------------------------------------- |
| `icon` | the icon to be used in the timeline visuals. |
| `header` | header for each entry |
| `badge` | text to place within the top right badge |
| `badge` | text to place within the top right badge |
| `subheader` | entry's subheader |
<!-- prettier-ignore-end -->

17
layouts/shortcodes/carousel.html
View file

@ -1,8 +1,21 @@
{{ $id := delimit (slice "carousel" (partial "functions/uid.html" .)) "-" }}
{{ $aspect := default "16-9" (.Get "aspectRatio") }}
{{ $images := .Page.Resources.Match (.Get "images") }}
{{ $interval := default "2000" (.Get "interval") }}
{{ $page := .Page.Resources }}
{{ $imagesTemp := .Get "images" }}
{{ $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 (resources.GetRemote .) }}
{{ else }}
{{ $images = $images | append ($page.GetMatch .) }}
{{ end }}
{{ end }}
<div id="{{ $id }}" class="relative" data-te-carousel-init data-te-ride="carousel">
<div class="absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-10 flex list-none justify-center p-0"
data-te-carousel-indicators>
@ -26,7 +39,7 @@
<div class="relative float-left -mr-[100%] {{ if not (eq $num 0) }} hidden {{ end }} w-full transition-transform duration-[{{ $interval }}ms] ease-in-out motion-reduce:transition-none"
data-te-carousel-item {{ if eq $num 0 }} data-te-carousel-active {{ end }}>
<div class="ratio-{{ $aspect }} single_hero_background">
<img src="{{ . }}" class="block absolute top-0 object-cover w-full h-full nozoom" alt="carousel image {{$num}}"/>
<img src="{{ .RelPermalink }}" class="block absolute top-0 object-cover w-full h-full nozoom" alt="carousel image {{$num}}"/>
</div>
</div>