Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ carousel support for URLs #1226

Merged
merged 1 commit into from
Feb 10, 2024
Merged

✨ carousel support for URLs #1226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions exampleSite/content/docs/shortcodes/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,18 +127,18 @@ 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 -->

**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

Expand Down Expand Up @@ -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 -->

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 -->
Expand Down
17 changes: 15 additions & 2 deletions layouts/shortcodes/carousel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>

Expand Down
Loading