From 7c3cc6206603994e499e9ca1ae03b6366b3929de Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Mon, 16 Jan 2023 00:34:49 +0000 Subject: [PATCH 1/4] (feat) Initial Draft --- layouts/shortcodes/swiper.html | 64 ++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 layouts/shortcodes/swiper.html diff --git a/layouts/shortcodes/swiper.html b/layouts/shortcodes/swiper.html new file mode 100644 index 00000000..d2fee95c --- /dev/null +++ b/layouts/shortcodes/swiper.html @@ -0,0 +1,64 @@ +{{ $images := .Page.Resources.Match (.Get "pattern") }} +{{ $id := .Get "id" }} + + + + + +
+ +
+ + {{ range $images }} +
+
+ +
+
+ {{ end }} + +
+ +
+ + +
+
+
+ + + + \ No newline at end of file From b5bab8284d816533505450c31d2128681d5d5cbf Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Mon, 16 Jan 2023 00:48:42 +0000 Subject: [PATCH 2/4] Rename shortcode --- layouts/shortcodes/{swiper.html => slider.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename layouts/shortcodes/{swiper.html => slider.html} (100%) diff --git a/layouts/shortcodes/swiper.html b/layouts/shortcodes/slider.html similarity index 100% rename from layouts/shortcodes/swiper.html rename to layouts/shortcodes/slider.html From 9fb95600b743b776e213d9ad630872ebd7df867a Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Mon, 16 Jan 2023 00:48:53 +0000 Subject: [PATCH 3/4] Add doc entry about the shortcode --- exampleSite/content/docs/shortcodes/index.md | 29 +++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 511e77dc..2b2f2a7a 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -388,4 +388,31 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your {{}} ``` -{{< github repo="nunocoracao/blowfish" >}} \ No newline at end of file +{{< github repo="nunocoracao/blowfish" >}} + +## Swiper + +`swiper` is used to showcase multiple images in a limited space, in an interactive and visually appealing way. It provides a standar swiper/slider/carousel feature, allowing the user to slide through multiple images while only taking up the vertical space of a single one. + + +| Parameter | Description | +| --------- | ------------------------ | +| `id` | [String] A unique identifier so that multiple sliders can work in the same page | +| `pattern` | [String] Go glob to match image names | + + +{{< alert "circle-info" >}} +It doesn't really matter the value set for the slider `id` as long as each slider in a given page has a unique identifier. +{{< /alert >}} +
+{{< alert "circle-info" >}} +A good resource for testing your go glob string is [this url](https://www.digitalocean.com/community/tools/glob?comments=true&glob=img%2F%7Biac%2Ck8s_all%7D.png&matches=false&tests=img%2Fiac.png&tests=img%2Fk8s_all.png) +{{< /alert >}} + +**Example:** + +```md +{{}} +``` + +{{< slider id="1" pattern="{abstract.jpg,featured.png}" >}} From 782db8ffdbb5def04d1d06468a3100e7b0bc3b7e Mon Sep 17 00:00:00 2001 From: Mircea-Pavel ANTON Date: Mon, 16 Jan 2023 17:21:10 +0000 Subject: [PATCH 4/4] Remove ` -