My Kirby-Plu­g­ins

Reading-Time

2 minutes

Posted

Published on

GitHub

Comments (1)

S

The file-based CMS Kirby became an inte¬≠gral part of my tool belt for devel¬≠op¬≠ing web¬≠sites with dynamic con¬≠tent. One of its strengths is the focus on sim¬≠plic¬≠ity and exten¬≠si¬≠bil¬≠ity. With lit¬≠er¬≠ally every project I¬†come to a¬†point where you are in need of some spe¬≠cific extra func¬≠tion¬≠al¬≠ity‚ÄČ‚ÄĒ‚ÄČthat‚Äôs how Kirby is designed to work. In a¬†lot of cases there is already some¬≠thing out there pro¬≠vided by Kirby‚Äôs great com¬≠mu¬≠nity1 but often I¬†need either some¬≠thing com¬≠pletely new or my use¬≠case is a¬†bit spe¬≠cific. In the latter case obvi¬≠ously I¬†have to build a¬†solu¬≠tion myself and just recently I‚Äôve made it a¬†habit to go the extra mile and bundle them up to self-con¬≠tained, highly con¬≠fig¬≠urable plu¬≠g¬≠ins. I¬†open-source them on GitHub and col¬≠lect a¬†list below.2

This plugin allows the con­tent-editor to insert beau­ti­fully aligned gal­leries with a one-liner. It comes with light­box-sup­port via Pho­to­Swipe out of the box and has a lot of options to play with.

Get it on GitHub | Demo

2
HTML5-Video Kir¬≠by¬≠tag ūüďĻ

Videos-embeds in HTML get­ting right is hard. I tried my best to max out the actual- and per­ceived per­for­mance by load­ing them lazily, dis­play­ing col­ored place­hold­ers, auto­mat­i­cally detect­ing avail­able video-sources and pro­vid­ing image-fall­backs.

This plugin also enables GIF-like styled videos3 so you can ben¬≠e¬≠fit from lower file¬≠sizes and the amaz¬≠ing qual¬≠ity of videos. Actu¬≠ally even the ¬ĽGIF¬ę you see below is a¬†video embed¬≠ded with this plugin‚ÄČ‚ÄĒ‚ÄČjust open your Dev-Tools.¬†ūü§ď

Get it on GitHub | Demo

3
Kirby Anchor-Head¬≠ings ‚öď

An impor­tant part of the web are hyper­links, they are even more prac­ti­cal when they can point directly to spe­cific para­graphs. This plugin auto­mat­i­cally gen­er­ates iden­ti­fiers for each head­ing and inserts anchors right in front of them. I’ve also writ­ten an advanced-guide about which markup and styling needs to be applied for cre­at­ing the nice anchor hover-effect like you can see on this page. 

Get it on GitHub | Demo


  1. A curated list of almost all Kirby plu¬≠g¬≠ins out there: https://‚Äčgithub‚Äč.com/‚Äčj‚Äče‚Äčn‚Äčs‚Äčt‚Äčo‚Äčr‚Äčn‚Äče‚Äčl‚Äčl‚Äč/‚Äčk‚Äči‚Äčr‚Äčb‚Äčy‚Äč-‚Äčp‚Äčl‚Äčugins¬†‚Ü©

  2. I’ll try to keep this list updated. If you sub­scribe to my (super infre­quent) newslet­ter I promise you wont miss a single one. ↩

  3. This means video-con­trols are hidden, auto­play and loop­ing are enabled by default and the video plays inline (iOS 10+) ↩

Comments

Leave yours, too ūüíõ

Starckio wrote

I love ¬ĽKirby Light¬≠box-Gallery¬ę !

Write a comment