My Kirby-Plu­g­ins


2 minutes


Published on


Comments (1)


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

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

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. <p>A curated list of almost all Kirby plu¬≠g¬≠ins out there: <a href=¬Ľ¬ę></a>&#160;<a href=¬ę#fnref1:1¬ę rev=¬Ľfootnote¬ę class=¬Ľfootnote-backref¬ę>&#8617;</a></p>
  2. <p>I‚Äôll try to keep this list updated. If you <a href=¬Ľ¬ę>subscribe</a> to my (super infre¬≠quent) newslet¬≠ter I¬†promise you wont miss a¬†single one.&#160;<a href=¬ę#fnref1:2¬ę rev=¬Ľfootnote¬ę class=¬Ľfootnote-backref¬ę>&#8617;</a></p>
  3. <p>This means video-con¬≠trols are hidden, auto¬≠play and loop¬≠ing are enabled by default and the video plays inline (<a href=¬Ľ¬ę>iOS 10+</a>)&#160;<a href=¬ę#fnref1:3¬ę rev=¬Ľfootnote¬ę class=¬Ľfootnote-backref¬ę>&#8617;</a></p>


Leave yours, too ūüíõ

Starckio wrote

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

Write a comment