Merge pull request #1226 from nunocoracao/736-carousel-with-remote-im…

…ages ✨ carousel support for URLs
nunocoracao · Feb 10, 2024 · 7d06ca6 · 7d06ca6
2 parents e87e066 + 02bcbb7
commit 7d06ca6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
@@ -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
 
@@ -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 -->

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
@@ -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>