112 posts in &#39;Images&#39;

Categories: Configuration How to...Images Plugins

Building a personal digital music library with Eleventy and APIs

Feb 25, 2025

by Damian Walsh (1 post) · Website

Categories: Collections Data Cascade Filters Global Data Images Pagination Remote Data

Migrating Posts from Jekyll to 11ty with Python

Feb 12, 2025

by Christopher Bauer (1 post) · Website & RSS feed

Categories: Blogging Images Markdown Migrating to Eleventy

11ty and OG images

Various tricks I've stumbled into.

Feb 11, 2025

by Jay Hannah (1 post) · Website & RSS feed

Categories: Configuration How to...Images Social Media

Loading Pixelfed Photos with Eleventy

How to load my latest photos from Pixelfed

Feb 3, 2025

by Robb Knight (20 posts) · Website & RSS feed

Categories: How to...Images Remote Data

Eleventy, Open Graph images and fun?

Getting 11ty's Image plugin to output Open Graph metadata and images

Feb 2, 2025

by Matt B (1 post) · Website & RSS feed

Categories: Blogging How to...Images Social Media

Making static sites with Glitch and 11ty: Image gallery

Having your own website is great. You can use it to introduce yourself to the world, talk about your hobbies, show off your work achievements, promote causes you care about, and many other things. And you really can keep your site as simple as you want it to be. It is your website after all!...

Jan 24, 2025

by Stefan Bohacek (1 post) · Website & RSS feed

Categories: Deployment Global Data How to...Image Galleries Images Social Media

Thanks to Matthew Paul for the guide

Jan 19, 2025

by Stefan Burke (4 posts) · Website & RSS feed

Categories: Images Social Media

Rewriting My Astro Blog with Eleventy

hi there! please enjoy my blog of things i think are interesting

Jan 18, 2025

by Melanie Kat (2 posts) · Website & RSS feed

Categories: Blogging CSS/Sass Images Migrating to Eleventy Pagination Performance Why Eleventy?

Build-time og:image generation with eleventy-img

The personal website of Dan Cătălin Burzo.

Jan 16, 2025

by Dan Burzo (5 posts) · Website & RSS feed

Categories: How to...Images Social Media

Optimize Your Web Site's Images

Jan 9, 2025

by Eleventy (3 posts) · Website

Categories: From the Source Images Plugins YouTube

How I built the Books page

I went live with my Books page a short while ago. Here's how I built it.

Jan 2, 2025

by Bob Monsour (19 posts) · Website & RSS feed

Categories: Global Data How to...Images Remote Data

An idiot's guide to adding open graph images to an 11ty blog

Wrestling eleventy config errors

Dec 4, 2024

by Chazz Basuta (2 posts) · Website & RSS feed

Categories: Blogging How to...Images Social Media

Going all in with 'native' markdown

I've been typing way too much. There are simpler ways to use markdown for images and tables of contents. Here's how I'm doing it.

Dec 3, 2024

by Bob Monsour (19 posts) · Website & RSS feed

Categories: Configuration How to...Images Markdown

Eleventy Transform speeds local development...a lot!

I just converted all the images on my site to use the Eleventy Transform capability in v3.0.0 and wow did it slash my local build times.

Nov 24, 2024

by Bob Monsour (19 posts) · Website & RSS feed

Categories: Images

Integrating Jupyter Notebook Cells in Eleventy Posts

Blog about programming, scientific machine learning and the related techniques and methods.

Nov 13, 2024

by Valentin Pratz (1 post) · Website & RSS feed

Categories: How to...Images Plugins Shortcodes

Here's how this is all put together

I've been fiddling with this site for the better part of a year now and now that it's fairly stable, I'm putting together what amounts to a public README (or a note to self). This post is that document.

Nov 8, 2024

Categories: CMS Collections Data Cascade Global Data Images Search

Open Graph Metadata and Images in Eleventy Made Easy

Blog posts are meant to be shared. When sharing links, you'll often see a preview on social media and instant messengers. But how does it work and how can you do it with Eleventy?

Oct 26, 2024

by Sebin Nyshkim (3 posts) · Website & RSS feed

Categories: CSS/Sass Front Matter Global Data How to...Images Plugins

Automatically generate unique Open Graph images for each page of your website

Oct 24, 2024

by Sia Karamalegos (13 posts) · Website & RSS feed

Categories: Images Shortcodes Social Media

YouTube video

Oct 23, 2024

by Sia Karamalegos (13 posts)

Categories: How to...Images YouTube

Responsive, Self-hosted Images for Your Eleventy Blog

While you can certainly host your image files with the Git repo your Eleventy site is checked into, or add them manually after building it, neither option is ideal if you want responsive images in multiple formats to save precious bandwidth.

Oct 22, 2024

by Sebin Nyshkim (3 posts) · Website & RSS feed

Categories: CSS/Sass Configuration Images

Prairie Rose Arena - Project Notes

Oct 10, 2024

by Sam Feldstein (3 posts) · Website & RSS feed

Categories: CMS Deployment How to...Images Performance Why Eleventy?

My Decap CMS setup with 11ty hosted on Cloudflare Pages

A web developer living, working and playing in Scotland.

Sep 21, 2024

by Patrick Grey (1 post) · Website & RSS feed

Categories: CMS Deployment How to...Images

Eleventy Images Just Got Better

Eleventy 3.0 adds a new API to optimize images anywhere on your site, without shortcodes.

Sep 3, 2024

by Aleksandr Hovhannisyan (14 posts) · Website & RSS feed

Categories: Configuration Images Markdown Plugins

Building a Web Version of Your Mastodon Archive with Eleventy

Turning your Mastodon archive into a web site with Eleventy

Jul 4, 2024

Categories: Global Data How to...Images Shortcodes Social Media

Adding a Photo Stream to an Eleventy Site

Fetching all my public photos from Flickr & putting them on my page

Jun 30, 2024

by nonnullish (3 posts) · Website & RSS feed

Categories: Global Data How to...Image Galleries Images Pagination Remote Data

Twenty year celebration: Site update number three

Jun 23, 2024

by Peter Sefton (1 post) · Website

Categories: Collections How to...Images Why Eleventy?

Upgrading to Eleventy v3

I took some time this week to upgrade my site to the newest version of Eleventy. Here's what I learned.

Jun 23, 2024

by Alex Zappa (2 posts) · Website & RSS feed

Categories: CSS/Sass Images Upgrading

Responsive Images in HTML: w and x

w is more correct than x except in one scenario, which is going to be fixed, but the CSS must match.

Jun 11, 2024

by Shiv J.M. (11 posts) · Website & RSS feed

Categories: How to...Images

Upgrading to Eleventy 3.0

Netlify Large Media forces my hand.

Jun 11, 2024

by Mark Llobrera (7 posts) · Website & RSS feed

Categories: How to...Images Image Galleries Markdown RSS Upgrading

Get image pixel colours in Eleventy/Node

How to get colour information from images at build time when using Eleventy (or Node more generally).

Jun 7, 2024

by Sam Smith (1 post) · Website & RSS feed

Categories: CSS/Sass How to...Images Plugins

Updating to Eleventy v3

I took some time this week to upgrade my site to the newest version of Eleventy. Here's what I learned.

Jun 1, 2024

by Max Böck (8 posts) · Website & RSS feed

Categories: Collections How to...Images Plugins Upgrading

Convert Obsidian Image Links to Nunjucks Shortcodes in Eleventy

JavaScript code to convert Obsidian image links to Nunjucks short codes.

May 29, 2024

by Amy Khar (1 post) · Website & RSS feed

Categories: How to...Images Obsidian Shortcodes

Eleventy Image problem with Netlify's build

I used wrong slashes in my source code, so Netlify's build step failed while using Eleventy Image.

May 4, 2024

by Sami Määttä (6 posts) · Website

Categories: Debugging Images Plugins

Handling images with B2, Netlify's image CDN, Hazel and Mountain Duck

I've spent a while hosting and fetching images from bunny.net when my 11ty builds. I had multiple pull zones configured and wanted to leverage bunny.net's transforms, but the pricing of $15/month per zone wasn't feasible.

May 1, 2024

Categories: How to...Images

Upgrading to Eleventy 1.0.1

If it ain’t broke, clearly you gotta fix it.

May 1, 2024

by Mark Llobrera (7 posts) · Website & RSS feed

Categories: Images Markdown Shortcodes Upgrading

Fixing a typo shaved 4 minutes off my Netlify build time

Caching images across Netlify builds

Apr 10, 2024

by Thomas Rigby (7 posts) · Website & RSS feed

Categories: Deployment How to...Performance Images

Generating Open Graph preview images for 11ty

Generated Open Graph images, without driving a browser. Here is how I made mine.

Mar 19, 2024

by John Hobbs (4 posts) · Website & RSS feed

Categories: How to...Images Social Media

Automatic image pre-processing in Eleventy, Part 2

A post about the new automatic template image scaling support in Eleventy Image 4.0.0.

Mar 13, 2024

by Martin Gunnarsson (9 posts) · Website & RSS feed

Categories: Configuration How to...Images

I have a Problem with Build Times

Chris McLeod is a software developer with over 20 years of experience. Sometimes he writes about it.

Mar 13, 2024

by Chris McLeod (6 posts) · Website & RSS feed

Categories: Images Performance

Adding inline SVGs to Eleventy.js

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

Mar 3, 2024

by Jordan Kohl (8 posts) · Website

Categories: How to...Images Configuration

Eleventy - Differentiate between dev and production builds with unique favicons

It is easy to mix up the dev and production versions of a website in the browser. Let's make them look unique by using different favicons.

Feb 15, 2024

by Rob O'Leary (12 posts) · Website & RSS feed

Categories: Configuration Data Cascade Deployment Images

Setting up image transforms in Eleventy

Eleventy added a transform option to process images in Eleventy v3.0.0-alpha.5 and Image v4.0.1 so, naturally, I had to set it up on my site. If you don't want to read this post, you can check out the full diff for the changes.

Feb 14, 2024

Categories: How to...Images Plugins

Eleventy 🤝 Immich

A quick image gallery using Eleventy and backed by Immich

Feb 12, 2024

by Chris Burgess (2 posts) · Website & RSS feed

Categories: Collections How to...Images Plugins

Check if images are available before optimizing in Eleventy

How to check if a remote image is available before attempting to optimize it using @11ty/eleventy-img.

Feb 5, 2024

Categories: How to...Images Webmentions

Using 11ty to generate Open Graph images

Create unique images for each page at build time

Jan 24, 2024

by John Brooks (4 posts) · Website & RSS feed

Categories: Configuration How to...Images Social Media

Super fast responsive image loading in Eleventy

Automatically optimise and serve images by type and size in Eleventy.

Jan 17, 2024

by Eystein Mack Alnaes (2 posts) · Website & RSS feed

Categories: How to...Images Performance Plugins

Eleventy Photo Gallery

How I used JPEGs as templates in Eleventy to build a photo gallery

Jan 5, 2024

by Evan Sheehan (7 posts) · Website & RSS feed

Categories: Configuration How to...Images Layouts Image Galleries

Automatic pre-processing of post images in Eleventy

A brief description of how I set up automatic image scaling in Eleventy.

Dec 29, 2023

by Martin Gunnarsson (9 posts) · Website & RSS feed

Categories: Configuration How to...Images Plugins

Generating and Caching Open Graph Images with Eleventy

How I'm caching my open graph images with eleventy-plugin-og-image instead of generating them on every build

Dec 24, 2023

by Robb Knight (20 posts) · Website & RSS feed

Categories: Configuration How to...Images Layouts Social Media

Generating Open Graph Images in Eleventy

Autogenerating image previews with Eleventy filter functions and node-canvas

Dec 17, 2023

by nonnullish (3 posts) · Website & RSS feed

Categories: Filters How to...Images Social Media

Migrating from WordPress to Eleventy (part 4)

Placeholder text. Can't generate excerpt

Nov 22, 2023

by Carlos Araya (5 posts) · Website & RSS feed

Categories: Blogging Deployment Images Migrating to Eleventy

VSCode Pasting 11ty Images

Creating content locally like a hosted editor

Nov 21, 2023

by Jeff Sheets (5 posts) · Website

Categories: How to...Images Markdown Plugins

A new technique for image optimization: SVG short circuiting

A post by Zach Leatherman (zachleat)

Nov 15, 2023

Categories: How to...Images Plugins

Automatically optimize your images with Eleventy Image and CloudCannon

Websites are becoming increasingly visual and we're adding more and more image content to our sites — but these images need to be optimized.

Nov 14, 2023

Categories: Images Performance Plugins

Building a photography website

The setup for sharing my photo gallery.

Oct 25, 2023

by Darek Kay (5 posts) · Website & RSS feed

Categories: How to...Images Navigation Image Galleries

Twitter X recently removed headlines and descriptions from link previews, in the name of “esthetics.” Inspired by Steph Ango, while we try not to run our business on the whims of a social media platform, this change did push us into making a change we’ve been meaning to for awhile: adding social preview images for our blog posts. For example, this is now what you’ll see when you share this post:

Oct 17, 2023

by Matthew Lettini (1 post) · Website & RSS feed

Categories: How to...Images Social Media

Making a lighthouse-fast website with a static site generator like 11ty

Creating an SSG flow to generate a highly optimized static website.

Oct 7, 2023

by Piotr Maliński (3 posts) · Website & RSS feed

Categories: Configuration How to...Images CSS/Sass Social Media

Headless kiosk application (with Kirby CMS)

Use Kirby and 11ty to generate a headless kiosk application that works offline.

Oct 1, 2023

by James Steel (1 post) · Website & RSS feed

Categories: CMS How to...Images

Eleventy Category Images

Describes a solution I implemented in this site to add Category-specific header images to posts. I modified my eleventy-generate-category-pages module to generate additional properties for the header images and some shortcodes to add the image and attribution to the site's pages.

Aug 4, 2023

by John M. Wargo (45 posts) · Website & RSS feed

Categories: Images How to...

Favicon Generation In Eleventy

Generating favicon from svg in 11ty using sharp

Jul 14, 2023

by equilibriumuk (18 posts) · Website & RSS feed

Categories: Configuration How to...Images

Markdown Image Optimization In Eleventy

I'm equilibriumuk, a software engineer. I write about programming & computer related topics

Jun 24, 2023

by equilibriumuk (18 posts) · Website & RSS feed

Categories: How to...Images Markdown

Image Optimization In Eleventy

I'm equilibriumuk, a software engineer. I write about programming & computer related topics

Jun 23, 2023

by equilibriumuk (18 posts) · Website & RSS feed

Categories: How to...Images Shortcodes

Adding game cover art to my /now page

How I'm using Eleventy-Fetch and the Steam API to fetch recently played games, the games cover art and store page URL to display on my /now page.

Jun 19, 2023

by fLaMEd (10 posts) · Website & RSS feed

Categories: Images Remote Data How to...Now Page

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.

Jun 6, 2023

by Simon Cox (14 posts) · Website & RSS feed

Categories: Images How to...Markdown Shortcodes

Generating Custom OpenGraph Cards with Gatsby and the 11ty Screenshot Service

A post from Matt Steele

Mar 13, 2023

by Matt Steele (3 posts) · Website & RSS feed

Categories: How to...Images Social Media

Farewell Netlify Large Media, Welcome eleventy-img

Not too complex once I had finished making my mistakes.

Feb 19, 2023

by Shiv J.M. (11 posts) · Website & RSS feed

Categories: Images How to...

Take your 11ty build from 1 second to 2 minutes by generating OG images

I tried to generate OG images during build and it ended up taking a long time

Feb 16, 2023

by Mike Street (13 posts) · Website & RSS feed

Categories: Social Media Images

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 3.01.

Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe

Trying out CSS Grid’s new Masonry Layout, with a PhotoSwipe lightbox

Jan 22, 2023

by Mark Llobrera (7 posts) · Website & RSS feed

Categories: Images Image Galleries

Hello 2023

Maybe I'm writing again.

Jan 7, 2023

by Chris Coleman (2 posts) · Website

Categories: How to...Images

Integrating Cloudinary into Eleventy

A look at integrating Cloudinary image processing with Eleventy

Oct 20, 2022

Categories: Images How to...

Manage your SVG files with Eleventy's render plugin

Using renderFile to keep things tidy.

Oct 2, 2022

by Christopher Kirk-Nielsen (11 posts) · Website & RSS feed

Categories: Plugins Images

Processing images linked from frontmatter with eleventy-img to use in meta tags

Engineering Management, SQL, and a dash of front-end from NYC.

Aug 31, 2022

by TJ Addison (2 posts) · Website

Categories: Front Matter Images How to...

Reading Comic Books in the Jamstack

Adding support for digital comic books to your Jamstack site

Jul 1, 2022

Categories: Global Data How to...Images

Optimizing Images with the 11ty Image Plugin

While imagery can enrich your content, it can also slow down your site if it’s not used responsibly. Learn how to use the official 11ty image plugin to create optimized and responsive images.

Jun 10, 2022

by Aleksandr Hovhannisyan (14 posts) · Website & RSS feed

Categories: Images Plugins

Using the Eleventy Image plugin without a central image folder

Eleventy’s official image pre-processing plugin assumes you have a single folder with all your images in it. I needed something different, and this is how I did it.

May 29, 2022

by Graham F. Scott (4 posts) · Website & RSS feed

Categories: Plugins Images How to...

Responsive Images in Markdown with Eleventy Image

I love markdown's simplicity and convenience, but sometimes you need a little more than the default image tag. In this post, I walk through how responsive images (with the picture tag) are handled on this blog in a way that doesn't compromise the authoring experience.

Apr 16, 2022

by Tomi Chen (1 post) · Website

Categories: Markdown Images How to...

Generating Apple Touch Icons with Eleventy

Creating the various sizes of Apple Touch Icons is one of the more tedious tasks in web development, but we can use JavaScript templates in Eleventy to automatically generate Apple Touch Icons.

Mar 30, 2022

by Florian Eckerstorfer (9 posts) · Website & RSS feed

Categories: Images How to...

Easily Create Gravatar Images With Eleventy

If you're moving your Wordpress site to Eleventy, you will want to convert your Gravatar images too. Find out how easy it is using an Eleventy shortcode.

Jan 30, 2022

by Marc Littlemore (4 posts) · Website & RSS feed

Categories: Images How to...

My complete blogging workflow

Here is my complete blogging workflow from how I manage ideas all the way to publishing and sharing.

Jan 29, 2022

Categories: Blogging How to...Images Front Matter

Using a Google Photos Album in your Eleventy Site with Pipedream

Integrating a Google Photos Album in your Eleventy site with Pipedream

Jan 28, 2022

Categories: Images How to...Remote Data Image Galleries

Fetching remote images with Eleventy

Following up on last month’s article about doing this in Hugo, we explain how to get there in a JavaScript-based SSG.

Jan 25, 2022

by Bryce Wray (26 posts) · Website & RSS feed

Categories: Images Remote Data

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 3.01.

Prettier previews, built with many moving parts.

Aug 16, 2021

by Shiv J.M. (11 posts) · Website & RSS feed

Categories: Images How to...

Adding figures with captions to images in markdown with eleventy

Jul 25, 2021

by Al Power (9 posts) · Website & RSS feed

Categories: How to...Images

Setting a conditional variable in Javascript

Power Platform Developer and all around cool guy

Jul 19, 2021

Categories: Images How to...

Improving my automated open graph image process w/ Eleventy

Power Platform Developer and all around cool guy

Jul 14, 2021

Categories: Images Social Media How to...

Improving upon my image processing with Eleventy

I recently relaunched my website and I believe I have improved upon my image processing setup using eleventy-img. Here is what I did.

Jul 13, 2021

Categories: Images How 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

May 10, 2021

by Bernard Nijenhuis (8 posts) · Website

Categories: Filters How to...Images Social Media

Eleventy 1.0

In the changelog, I’m documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work. This time it’s about the update to Eleventy 1.0 and some things that changed while updating.

Apr 21, 2021

by Martin Schneider (7 posts) · Website & RSS feed

Categories: Images Social Media How to...

Using Eleventy’s official image plugin

The what, why, and how of Eleventy Image.

Apr 17, 2021

by Bryce Wray (26 posts) · Website & RSS feed

Categories: Images How to...

Building a Simple Image Gallery with Eleventy

Using the Image plugin with Eleventy to build a simple gallery

Apr 7, 2021

Categories: Images How to...Plugins Configuration Image Galleries

Using the Eleventy image plugin to generate images

In the changelog I'm documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work.

Mar 21, 2021

by Martin Schneider (7 posts) · Website & RSS feed

Categories: Images How to...

Don't shut down your business! Instead use Eleventy Image

A post by Zach Leatherman (zachleat)

Jan 25, 2021

Categories: Images

Let's Learn Eleventy (11ty) - Images

In the fourth part of the Let't Learn Eleventy series, we'll learn how use images with eleventy-img plugin

Jan 23, 2021

by Rares Portan (5 posts) · Website & RSS feed

Categories: Images How to...

An async function walks into a loop.

A solution for async functionality in template loops, using `eleventy-image` as an example, some basics about JavaScript loops, and debugging advice. All in what should be a short note.

Jan 15, 2021

by Oscar (3 posts) · Website & RSS feed

Categories: Images

Jan 10, 2021

by Mark Thomas Miller (5 posts) · Website

Categories: Images Social Media How to...

Power Platform Developer and all around cool guy

Jan 9, 2021

Categories: How to...Images

This is part four of how I used 11ty to setup my personal site. This is how I setup open graph protocol, search and favicons.

Jan 3, 2021

Categories: Social Media Images How to...

Maximally optimizing image loading for the web

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the...

Dec 28, 2020

by Malte Ubl (2 posts) · Website & RSS feed

Categories: Images How to...

Configuring responsive and optimized images with Eleventy

Power Platform Developer and all around cool guy

Dec 21, 2020