Skip to main content

Official 11ty docs

Filters

Template Filters — Eleventy

58 posts in 'Filters'

Some of my Eleventy Filters

In refactoring my website earlier this year, part of my process was to evaluate and revise the many, many Eleventy Filters I use throughout my website’s build, so in this post, I’ll run through a handful of them.

Categories: DraftsFiltersMarkdown

A custom collection to sort events with Eleventy

I made a custom collection with a filter to sort events by their custom date data.

Categories: CollectionsDatesFiltersFront MatterNunjucks/Macros

Eleventy excerpts

Everybody seems to implement their own way of generating post excerpts in Eleventy, and here's mine.

Categories: BloggingFiltersHow to...

Surfacing most used tags in Eleventy

I made some lightweight design changes to my site, keeping things simple but moving the date up above post headers, surfacing tags below and restoring `Read more` links.

Categories: CollectionsFiltersHow to...

Math equations with Eleventy using TeXZilla

I demonstrate how to make MathML equations using LaTeX markup with TeXZilla.

Categories: FiltersHow to...

Eleventy: custom markup alongside item contents

Short and quick tutorial on how to embed custom HTML content between post paragraphs on an Eleventy site.

Categories: ConfigurationFiltersHow to...

Refactor by shortcode

I decided to take on some overdue refactoring of the 11tybundle.dev site. Here's what I did.

Categories: FiltersHow to...Nunjucks/MacrosShortcodes

Eleventy now support automatic transforms from local paths to output URLs right out of the box.

Categories: FiltersHow to...Plugins

Eleventy - Fetch data from the Github REST API to populate a projects page

We will populate a page with data from GitHub. We will use the eleventy-fetch plugin to do this with minimal code and refresh the data every 2 days.

Categories: FiltersGlobal DataLayoutsRemote Data

Eleventy Filter to Turn a URL Into a Domain Name

ZOMG my first 11ty filter!

Categories: FiltersHow to...

Slashing by caching

I've reduced the build time for the 11ty Bundle site from 30 seconds to 10 seconds. Here's how.

Categories: FiltersHow to...Performance

Community websites with Eleventy

With Eleventy’s data files, I’ve come up with a good setup to build landing pages for communities that organize events.

Categories: Data CascadeFiltersGlobal DataHow to...

Adding webmentions to my site

I had told myself that I wouldn't do this...but, seeing them on other people's sites changed my mind.

Categories: FiltersGlobal DataHow to...Social MediaWebmentions

Adding a git based changelog in 11ty

How to add a changelog to your 11ty pages based on commits made to your site's git repository.

Categories: Data CascadeDatesFilters

Generating Open Graph Images in Eleventy

I added the og:media image tags yesterday, and the approach seems to work, so I'm going to share it in this post.

Categories: FiltersHow to...ImagesSocial Media

Updating my Eleventy plugin tagCloud

A blog about web development, handy tutorials, quick rants, thoughts, and everything in between.

Categories: FiltersHow to...

How I'm using the Fathom API to show a list of popular blogs posts in my Eleventy site

Categories: Data CascadeFiltersHow to...Remote Data

Using 11ty to bring back tag clouds

Tag clouds are a good way of seeing what kind of posts are floating around in your blog, lets bring them back

Categories: FiltersHow to...Plugins

Eleventy Date-only Filter

I noticed recently that the site's stats page displayed the first and last post dates with time information even though the values only contained dates. I created a simple Eleventy Filter to trim them to date only with the format I wanted. This post shows how I did it.

Categories: DatesFilters

Feedbin is rendering my RSS feed wrong, let's fix it!

Feedbin is removing the wrong elements, so let's make up for it on our own

Categories: FiltersHow to...RSS

Eleventy JSON Output

For a small Eleventy-based project I wanted to output an example.json file – stored in the data folder – in a nunjucks template. If you simply output the variable example you'll see the unhe…

Categories: How to...Filters

How to add a custom slugify filter to 11ty

During my recent blog migrations, I discovered the new slugify filter handles apostrophes differently. I'd prefer they were dropped. Here are the steps.

Categories: FiltersHow to...

Creating a Category Filter in Eleventy

Now I have a few posts, it would be good to have some way to narrow them down when looking for something specific.

Categories: FiltersHow to...Nunjucks/Macros

A series on doing more with your Jamstack site's front matter

Categories: Front MatterFiltersHow to...

Eleventy Filter Parameters

How to add parameters to an Eleventy filter.

Categories: FiltersHow to...

Eleventy tag filter

Web development blog. The good, bad, and ugly (mostly bad and ugly)

Categories: Filters

Eleventy tag filter

Web development blog. The good, bad, and ugly (mostly bad and ugly)

Categories: FiltersHow to...

Alphabetising Glossary Terms

Blog and general digital garden of the full stack programmer Simon Dann.

Categories: BloggingFiltersHow to...

Filtering tags within Eleventy.js collections

JavaScript software development tips, strategies for salary negotiation, and other helpful advice for navigating software as a career.

Categories: FiltersCollectionsHow to...

CAUTION

The posts below were published before the release of Eleventy v2.0.0 (Feb 8, 2023). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

Adding statistics to 11ty

Blog and general digital garden of the full stack programmer Simon Dann.

Categories: BloggingFilters

Using Eleventy filters in Directory Computed Data

Eleventy Computed Data makes it easy to reuse your filters outside of your templates.

Categories: ConfigurationData CascadeFilters

Using Puppeteer with 11ty to automate generating social share images

Blog and general digital garden of the full stack programmer Simon Dann.

Categories: FiltersHow to...PaginationSocial Media

11ty Second 11ty: Creating Template Filters

This week, we’re going to dive into 11ty filters. We’ll use 1 built-in filter, and make 2 custom filters.

Categories: How to...Filters

A Set of Useful 11ty Filters

One of my favorite things about 11ty is its flexibility and how easily you can customize your chosen template language without having to leave the familiar comfort of the Node ecosystem.

Categories: How to...Filters

Building blocks for my first Eleventy site

Different choices that go into building an Eleventy website from scratch.

Categories: CSS/SassDatesDeploymentFiltersHow to...NavigationPaginationSocial Media

CAUTION

The posts below were published before the release of Eleventy v1.0.0 (Jan 9, 2022). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

Filter Titles for RSS and Social Shares

Replace characters that are often stripped out of post titles by RSS readers and social network link embeds

Categories: How to...Social MediaFiltersRSS

Blog post filter with Netlify Functions

I built my first ever serverless feature to add tag filtering to my blog listing. Here's how I integrated that to my Ghost & Eleventy setup with Netlify Functions.

Categories: FiltersHow to...ServerlessRemote Data

Accessing 11ty filters within data files to keep your code DRY

11ty filters can exist as JS functions inside the declared filters directory - these can be accessed by other files not processed by 11ty

Categories: FiltersHow to...

Automatically generate open graph images in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats

Categories: FiltersHow to...ImagesSocial Media

11ty Date Shortcodes and Filters

Use this shortcode and filter as a starting point for your date transformation needs.

Categories: DatesHow to...FiltersShortcodes

Filters for 11ty Content

Includes filters for creating an excerpt and other content enhancements.

Categories: Filters

Create an Eleventy podcast feed

Want to add an iTunes and Google friendly podcast feed to your Eleventy site? Here's how.

Categories: FiltersBloggingHow to...Configuration

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.

Categories: Data CascadeHow to...FiltersShortcodes

Adding a Warning for Old Posts to Your Jamstack Site

How to add a message to older content on your static site.

Categories: How to...Filters

Selecting Random Posts in Eleventy

A look at adding links to random pages in Eleventy

Categories: How to...FiltersConfiguration

Supporting Multiple Authors in an Eleventy Blog

How to handle multiple authors in Eleventy, with custom author profile pages.

Categories: Front MatterHow to...FiltersPagination

Hiding Future Content with Eleventy

How to use custom filters and collections to hide Eleventy content for the future.

Categories: How to...Front MatterFiltersCollections

Five Critical Things To Do Before Working With 11ty

Five pieces of knowledge I wish I knew before working with 11ty, the JavaScript-based static site generator. Get a jump start using this fantastic tool.

Categories: ConfigurationData CascadeFiltersGetting Started

Checking (and Upgrading) Template Engines in Eleventy

How to check the version of embedded template engines in Eleventy

Categories: How to...ConfigurationFilters

Scheduled and draft 11ty posts

This post explains how you can add scheduled publishing to your 11ty blog (with a bonus for drafts). Before I jump in though, 11ty is a surprisingly simple sys…

Categories: CollectionsFiltersHow to...DraftsScheduling

Get the blog by email (or RSS)

Powered by Buttondown