kirby-plugin-before-after

Een Kirby CMS-plugin voor het toevoegen van twee afbeeldingen die een voor en na van elkaar zijn. Aan de front-end zal er een werkende slider zijn om meer of minder van de na afbeelding zichtbaar te maken.

---

✨ Features

• Kirby field: Voeg dit als veld toe aan je blueprint.
• Kirby content blok: Voeg dit toe al vrije content in een layout of blocks field op een pagina

⚠️ Requirements

• Kirby 5+
• PHP >= 8.3

Instalatie

Docker

Laat de plugin in je docker image draaien en zet enkel de pagina's die je wilt aanpassen of bijcreëren (zie project structuur) in je project zelf.

ARG KIRBY_PLUGIN_BEFORE_AFTER_BRANCH=main
RUN wget --no-verbose "https://github.com/libis/kirby-plugin-before-after/archive/${KIRBY_PLUGIN_BEFORE_AFTER_BRANCH}.zip" -O /var/www/html/site/plugins/before-after.zip \
    && unzip -q /var/www/html/site/plugins/before-after.zip -d /var/www/html/site/plugins/ \
    && rm /var/www/html/site/plugins/before-after.zip \
    && mv /var/www/html/site/plugins/kirby-plugin-before-after-${KIRBY_PLUGIN_BEFORE_AFTER_BRANCH} /var/www/html/site/plugins/kirby-before-after-image \
    && chown -R www-data:www-data /var/www/html/site/plugins/kirby-before-after-image

Manually

1. Download of clone deze repository.
2. Plaats de plugin in de map:

Stijl & functionaliteiten

Stijl

Deze plugin komt met een standaard styling deze kan je aanpassen door de classes in je iegen css op te roepen en aan te passen. Gebruik je tailwind voeg deze file dan niet toe en kopieer alle snippet files naar je project in site/snippets en voeg de classes toe. Voeg dit in je head toe:

<link rel="stylesheet" href="/media/plugins/libis/before-after-image/css/index.css">

Functionaliteiten

Voeg volgende JS file toe in je footer (zonder deze file zal de plugin niet werken):

<script defer type="module" src='/media/plugins/libis/before-after-image/js/index.js'></script>

Gebruik

In layout of block fields:

- before-after

In je blueprint als field:

beforeAfter:
  type: beforeAfterImage
  label: libis.beforeAfter.beforeAfter
  query: page('media-folder/realisaties').children.files