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. <p>A curated list of almost all Kirby plu­g­ins out there: <a href=»https://github.com/jenstornell/kirby-plugins«>https://github.com/jenstornell/kirby-plugins</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=»https://eepurl.com/cWhDnv«>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=»https://webkit.org/blog/6784/new-video-policies-for-ios/«>iOS 10+</a>)&#160;<a href=«#fnref1:3« rev=»footnote« class=»footnote-backref«>&#8617;</a></p>

Comments

Leave yours, too 💛

Starckio wrote

I love »Kirby Light­box-Gallery« !

Write a comment