flax-plugins/plugins/flax-image-management.js

@@ -2,22 +2,10 @@ const Image = require("@11ty/eleventy-img");
 const fs = require("fs");
 
 // Only one module.exports per configuration file, please!
-module.exports = function(eleventyConfig) {
-  eleventyConfig.addShortcode("flaxImage", async function(src, alt) {
-    // Check if the file exists
-    fs.access(src, fs.constants.F_OK, (err) => {
-      if (err) {
-        console.error("File does not exist");
-        return "";
-      } else {
-        console.log("File exists");
-      }
-    });
-
-    let imgSrcUrl = !src.startsWith("https") ? `./static/images/${src}` : src;
-    // "./static/images/" + src;
-
-    console.log("whe4e is the damn image", imgSrcUrl);
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addShortcode("flaxImage", async function (src, alt) {
+    //check if the url is external
+    let imgSrcUrl = !src.startsWith("http") ? `./static/images/${src}` : src;
 
     let metadata = await Image(imgSrcUrl, {
       widths: [600],
@@ -28,8 +16,7 @@ module.exports = function(eleventyConfig) {
 
     let data = metadata.jpeg[metadata.jpeg.length - 1];
     return `<img src="${data.url}" width="${data.width}" height="${data.height}" alt="${alt}" loading="lazy" decoding="async">`;
-
-    // let data = metadata.jpeg[metadata.jpeg.length - 1];
-    // return `<img src="${imgSrcUrl}"  alt="${alt}" loading="lazy" decoding="async">`;
   });
 };
+
+

flax-plugins/plugins/flax-slideshow.js

 // based on Gregory’s Cadars css only slide show system, thanks infinitely
 // https://codepen.io/cadars/pen/GRMopvj
+// but it changed quite a lot (still, Cadars is amazing, get him to work with you):D
 
+const Image = require("@11ty/eleventy-img");
+const fs = require("fs");
 const slugify = require("slugify");
 
-module.exports = function(eleventyConfig, options = {}) {
-  eleventyConfig.addShortcode("flax-slider-image", (src, alt) => {
-    let output = `<figure>
-    <a id="${slugify(src)}" href="#$(slugify-src)">
-      <img loading="lazy" src="${src}" alt="${alt}" title="${alt}">
-    </a>
-  </figure>`;
+module.exports = function (eleventyConfig) {
+  // create the image for the block
+  eleventyConfig.addAsyncShortcode("flaxSliderImage", async (src, alt) => {
+    //check if the url is external
+    let imgSrcUrl = !src.startsWith("http") ? `./static/images/${src}` : src;
+
+    // lets create the images
+    let metadata = await Image(imgSrcUrl, {
+      widths: [600],
+      formats: ["jpeg"],
+      outputDir: "./public/images",
+      urlPath: "/images/",
+    });
+
+    let data = metadata.jpeg[metadata.jpeg.length - 1];
+
+    let output = ` 
+
+<a id="#${slugify(src)}" href="#${slugify(src)}">
+<figure id="${slugify(src)}">
+        <img src="${data.url}" width="${data.width}" height="${
+          data.height
+        }" alt="${alt}" loading="lazy" decoding="async">
+<figcaption>
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+</figcaption>
+      </figure>
+</a>
+`;
 
     return output;
   });
-};
-
-module.exports = function(eleventyConfig, options = {}) {
-  eleventyConfig.addPairedShortcode("flax-slider", (content) => {
-    let output = `<div class="flax-slideshow">${content}</div>`;
 
+  eleventyConfig.addPairedShortcode("flaxSlider", (content) => {
+    let output = `<div class="flax-slideshow">${content}<p class="empty"><p></div>`;
     return output;
   });
 };

src/content/pages/slideshow-demo.md

+---
+title: Slideshow demo
+menutitle: slideshow
+layout: page/slideshow.njk
+permalink: /slideshow/
+order: 1000
+tags:
+  - slideshow
+---
+
+this is funny
+
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+
+{% flaxSlider %}
+{% flaxSliderImage "img1.jpg", "this is not a png" %}
+{% flaxSliderImage "img2.jpg", "this is not a png" %}
+{% flaxSliderImage "img3.jpg", "this is not a png" %}
+{% flaxSliderImage "img4.jpg", "this is not a png" %}
+{% flaxSliderImage "img5.jpg", "this is not a png" %}
+{% flaxSliderImage "img6.jpg", "this is not a png" %}
+{% flaxSliderImage "img7.jpg", "this is not a png" %}
+{% flaxSliderImage "img8.jpg", "this is not a png" %}
+{% flaxSliderImage "img9.jpg", "this is not a png" %}
+{% endflaxSlider %}
+
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

src/css/themes/default/main.css

@@ -13,4 +13,5 @@
 @import url("./modules/_catalog.css");
 @import url("./modules/_splash.css");
 @import url("./modules/_flax-custom.css");
+@import url("./modules/_flax-slideshow.css")
 

src/css/themes/default/modules/_flax-slideshow.css

+/* ------------------------------------- */
+/* the slideshow ----------------------- */
+/* ------------------------------------- */
+
+.flax-slideshow {
+  margin-top: 3em;
+  margin-bottom: 3em;
+  overflow-x: hidden;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: contain;
+  gap: 3em 5ch;
+  display: flex;
+
+  &:hover {
+    scroll-behavior: smooth;
+  }
+
+  & a {
+    display: block;
+    background: #efefef;
+    text-decoration: none;
+    &:hover {
+      background: black;
+      color: #efefef;
+    }
+  }
+  & figure {
+    width: unset;
+    padding: 0;
+    margin: 0;
+    scroll-margin: 10vw 10vh;
+    scroll-snap-align: center;
+    width: 1000px;
+    display: flex;
+    margin: auto;
+    flex-direction: column;
+    padding: 2em 2ch;
+    align-items: start;
+    justify-content: start;
+    &:target {
+      flex: 0 100 auto;
+    }
+
+    & img {
+      margin-bottom: 3ch;
+      object-fit: contain;
+      max-height: 60vh;
+      max-width: 60vw;
+      width: unset;
+      height: unset;
+    }
+    & figcaption {
+      padding: 0.5em;
+      max-width: 50ch;
+      font-family: var(--font-sans);
+      font-size: 0.8em;
+    }
+  }
+}

src/css/themes/default/modules/_flax-slideshoww.css

+.flax-slideshow {
+  background: lightgrey;
+  overflow: hidden;
+  overflow-x: overflow-x;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: contain;
+  display: flex;
+
+  & :hover {
+    scroll-behavior: smooth;
+    /* on :hover so it doesn't fire when linking directly to an image #id */
+  }
+
+  & a:hover {
+    background: unset;
+  }
+
+  & figure {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: center;
+  }
+  & figure a {
+    display: block;
+    padding-inline: 25%;
+    margin-inline: 25%;
+    scroll-margin: 0 50%;
+    position: relative;
+    min-width: 100px;
+  }
+  & figure:first-of-type a {
+    padding-inline-start: 0;
+    margin-inline-end: 0;
+  }
+  & figure:last-of-type a {
+    padding-inline-end: 0;
+    margin-inline-start: 0;
+  }
+
+  & figure a img {
+    display: block;
+    height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contains;
+    user-select: none;
+  }
+
+}

src/layouts/page/slideshow.njk

+{% extends "base.njk" %}
+
+{% block bodyclass %}slideshow-home{% endblock bodyclass %}
+
+{% block content %}
+    <main>
+        <header>
+            <h1>{{ title }}</h1>
+            {% if intro %}<p class="intro">{{ intro }}</p>{% endif %}
+        </header>
+        <article class="content">{{ content | safe }}</article>
+    </main>
+{% endblock content %}
+
+
+

src/layouts/page/splash.njk

@@ -10,9 +10,8 @@
 {% endblock topbar %}
 {% block background %}
     <div class="background">
-        {# <img src="images/{{ background.img }}" alt="{{ background.altext }}"> #}
-        {# testgin the image with the 11ty plugins #}
         {% flaxImage background.img, background.altext %}
+
     </div>
 {% endblock background %}
 {% block content %}