From 02bcbb7a12542501b28137641943841745de767a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Sat, 10 Feb 2024 18:44:07 +0000
Subject: [PATCH] carousel support for URLs

---
 exampleSite/content/docs/shortcodes/index.md | 20 ++++++++++----------
 layouts/shortcodes/carousel.html             | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 978fd688..8e7b9283 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -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 -->
diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index ccfb4595..016c792e 100644
--- 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>