Web designer + front-end developer with experience in high-traffic ecommerce sites for some well known brands.

CodePen Kirbytag for Kirby 2

I recently installed the overhauled Kirby 2 CMS to see whats new. The extension that previously allowed me to embed CodePen examples in my blog no longer functioned, so I created one based on Kirbytext Codepen by ClementRoy for Kirby 1.

Get the extension

Codepen extension for Kirby 2

Download the files and then follow the readme instructions. Sorry, not compatible with Kirby 1.

Features

By default enables you to embed a Pen result, with the default theme, 350 pixels height.

The kirbytag extension allows you to override defaults to specify:

  • Pen height - specified as plain numerical value i.e. 500 = 500px.
  • Pen type - the tab displayed i.e. html, css or result by default.
  • Pen class - wrap the Pen iframe in a presentational CSS class.
  • Pen theme - a $theme variable in codepen.php can be amended to specify an embed theme.

I recommend you read the full readme on GitHub for more detailed instruction of the project.

paulfosterdesign.co.uk is made with Kirby and ♥

Posted

Share on Mastodon or Share on Bluesky

Respond to this post via webmention from your own site!

Check out my CodePen profile for more code demos. Subscribe via RSS or the Fediverse (@plfstr@mastodon.social) to follow my posts.