Shortcodes 45 posts
Category: SHORTCODES (45 posts)
2025
Embedding Mastodon Posts in Eleventy: My Journey
What finally worked to embed Mastodon posts in Eleventy: a tiny shortcode that lets embed.js set height and supports a clean full-bleed layout.
By Kyle Reddoch (4 posts)
Wrapper Elements around Code Blocks in Markdown
TypeScript Mini Apps in Eleventy
By DSri Seah (2 posts)
11ty Hacks for Fun and Performance
Alex Russell on browsers, standards, and the process of progress.
By Alex Russell (1 post)
Introducing Brewventy: Your Coffee-Themed Eleventy Starter Kit
“Discover Brewventy, a customizable coffee-themed Eleventy starter with dark/light modes, SCSS-driven theming, and built-in deployment workflows for effortless site launches.”
By Kyle Reddoch (4 posts)
From Dotclear to Eleventy 4
How to migrate a blog from Dotclear on to eleventy 4- Rebuild pages and navigation
By Alix Guillard (4 posts)
Creating proportional, equal-height image rows with CSS, 11ty, and Nunjucks
Hi, I’m Jeremy. I build things on the web and share what I learn on my blog.
By Jeremy Robert Jones (1 post)
yearsSince
JavaScript that calculates the number of years that have passed since a given date, utilized in an Eleventy shortcode.
By Marc Amos (1 post)
A Slightly Improved Image Gallery for Eleventy
Blog about programming, scientific machine learning and the related techniques and methods.
By Valentin Pratz (2 posts)
Adding base64 placeholder background images to eleventy-img
Add a low-quality webp placeholder image to the HTML of your site
By Stefan Burke (4 posts)
Dynamically creating QR codes in Eleventy
Using an 11ty Shortcode to craft a custom CSS pipeline
In this blog post, I'll show you how I've written an 11ty Shortcode to manipulate my CSS file, thus allowing for optimal long-life cache-control response headers. Any feedback on this build process would be greatly appreciated.
By Matt Hobbs (7 posts)
WP.SCSS
Increasingly I've been including 11ty in my WordPress builds as part of the theme. Great for static assets, such as
By Rich Holman (2 posts)
2024
Adding Random Content Using Eleventy
Learn how to use Eleventy to add dynamic, random content like film quotes or targeted Q&A sections to your website. A step-by-step guide with practical examples and code snippets.
By Stu Robson (1 post)
Integrating Jupyter Notebook Cells in Eleventy Posts
Blog about programming, scientific machine learning and the related techniques and methods.
By Valentin Pratz (2 posts)
Dynamic social share images using Cloudinary
Automatically generate unique Open Graph images for each page of your website
By Sia Karamalegos (13 posts)
Building a Blog with Eleventy
I recently felt like getting back into blogging. But setting up and maintaining WordPress felt like more than I was looking for. I was looking for something much simpler. Preferably file-based and with Markdown support. That was my introduction to Eleventy.
By Sebin Nyshkim (3 posts)
Dynamic Importing with Eleventy
After organising Eleventy filters, shortcodes etc I had an idea to tidy the code even more and make it dynamic. I wanted to automatically import any new functions that were added, including new when using files.
By Trevor Morris (8 posts)
Organising Eleventy Filters, Shortcodes and more…
I work a lot with the Laravel framework, which scaffolds much of your initial setup and has conventions for where code should be stored. Starting a brand new Eleventy project from scratch doesn't give you this boilerplate and means you have to make decisions about where everything lives.
By Trevor Morris (8 posts)
Highlighting the Active Navigation Link in Eleventy Using Templates, Shortcodes, and the Page Object
Using templates, shortcodes, and the Eleventy supplied data for highlighting the current page in navigation
By nonnullish (3 posts)
Building a Web Version of Your Mastodon Archive with Eleventy
Turning your Mastodon archive into a web site with Eleventy
By Raymond Camden (104 posts)
Convert Obsidian Image Links to Nunjucks Shortcodes in Eleventy
JavaScript code to convert Obsidian image links to Nunjucks short codes.
By Amy Khar (1 post)
Getting started with Eleventy
The missing getting-started guide for the Eleventy (11ty) static-site generator.
By Sean McPherson (3 posts)
Upgrading to Eleventy 1.0.1
How I Eleventy
Documenting a refactor that introduced a folder structure and configuration changes, which summarises how I Eleventy.
By Declan Byrd (2 posts)
Refactor by shortcode
I decided to take on some overdue refactoring of the 11tybundle.dev site. Here's what I did.
By Bob Monsour (20 posts)
2023
Image Optimization In Eleventy
I'm equilibriumuk, a software engineer. I write about programming & computer related topics
By equilibriumuk (19 posts)
11ty image shortcode best practice
Simon Cox outlines how to properly set up and use the 11ty image shortcode, fixing issues with high-res sources, spacing in markdown, and rendering bugs.
By Simon Cox (16 posts)
2022
Creating image galleries in eleventy(11ty) with elventy-img
I wanted to have image galleries on my site and Eleventy didn't have any plugins that did this already. So I added support for it on my own.
By Prabashwara Seneviratne (1 post)
Eleventy - Shortcode for Embedding Codepen
Don't know what eleventy is? Before you read further, check out this amazing series of articles by... Tagged with webdev, javascript, beginners, eleventy.
By Murtuzaali Surti (5 posts)
Using Storybook With 11ty
Storybook is great for component-driven development. This blog post shows you how to use Storybook with 11ty.
By Paul Everitt (2 posts)
2021
Enabling Emoji Shortcodes in Eleventy Markdown Files
Turn on emoji shortcodes in markdown files in Eleventy by adding the markdwon-it-emoji plugin.
By Wes Goulet (1 post)
Reusable code snippets and components in Eleventy
Some cunning ways to use Nunjucks and 11ty shortcodes for reusable blocks
By Laurence Hughes (4 posts)
Using Nunjucks shortcodes in Markdown files in Eleventy
11ty Date Shortcodes and Filters
Use this shortcode and filter as a starting point for your date transformation needs.
By Stephanie Eckles (21 posts)
2020
Understanding Filters, Shortcodes and Data in 11ty
Sometimes it’s a little confusing what the difference between shortcodes, data and filters really is, and frankly the boundaries can become a little blurred with 11ty.
By Mike (1 post)
Let's Learn Eleventy (11ty) - Slots, includes and shortcodes
This is the third part of the Let't Learn Eleventy series. We'll learn how to use slots, includes and shortcodes.
By Rares Portan (5 posts)
