Images 147 posts

I cleaned up my site's web feed so feed readers get better post content and images, while humans who open the feed in a browser get something that feels like part of the site.

Kyle Reddoch (8)

Using Claude at home, and finding that I don’t like the taste.

Mark Llobrera (8)

A walk through the build-time plugin that gives every blog post here its own social-share image.

Bob Monsour (26)

A short glance at the few steps I’ve taken to optimize images on this website, without compromising on build time.

Kitty Giraudel (16)

What have I added to my site since I started in December? Quality-of-life improvements, new pages, interesting features, and of course, easter eggs! When you add a little each day, it really adds up.

Brennan Kenneth Brown (13)

Lee Cattarin... on the internet!

Lee Cattarin (1)

A quick guide to how I dynamically generate custom Open Graph images for each post on my 11ty blog, using satori.

DeepakNess (8)

Better image handling on my blog and pre-optimizing them all instead of using @11ty/eleventy-img plugin.

DeepakNess (8)

Saneef H. Ansari (5)

Don't get me wrong: I love using Eleventy . I am benefiting so much of its little and big conveniences and generally agree…

Martin Hähnel (14)

DSri Seah (2)

Software engineering leader and occasional side project hacker.

Brian Cantoni (6)

As I discussed previously, I’ve been rewriting this blog in a new tool called 11ty (aka Eleventy - the project’s devs aren’t consistent so I won’t be either). This is the first blog post written in the new blog engine, and the migration is complete!

Ash Furrow (2)

I turned a blog entry into a profile of myself as a developer.

Shiv J.M. (13)

Alex Russell on browsers, standards, and the process of progress.

Alex Russell (1)

Walking through the fixes that led us from stretched screenshots to a lean Eleventy Img pipeline, plus a quick primer on how responsive image markup really works.

Nicholas Clooney (7)

How to migrate a blog from Dotclear on to eleventy 3- Content Migration

Alix Guillard (4)

Quick start to production-ready Eleventy shortcodes: responsive images with @11ty/eleventy-img and inline SVG helpers you can copy-paste and use immediately.

Emiliano Soravia (2)

Never mix up dev and prod again! (due to identical icons, at least)

Christopher Kirk-Nielsen (15)

An easier approach to OG images (for me!)

Jason Moser (6)

Software engineering leader and occasional side project hacker.

Brian Cantoni (6)

A post by Zach Leatherman (zachleat)

Zach Leatherman (88)

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

Chris McLeod (7)

The Problem Cloudflare offers build caching for static site generators like Eleventy . Both are powering this blog. Great.…

Martin Hähnel (14)

Software engineering leader and occasional side project hacker.

Brian Cantoni (6)

So it's been a little while! Nope, this project is NOT inactive! Just slow moving. Work and life has been taking its toll. Since we last spoke, I've gotte

Jessie Heald (16)

At some point I will write about my Obsidian as a blog editor setup in more detail, but I just wanted to make a note here,…

Martin Hähnel (14)

Hi, I’m Jeremy. I build things on the web and share what I learn on my blog.

Jeremy Robert Jones (1)

I was tagged several days ago on Mastodon, as someone was looking for a "90s-style 88x31 footer GIF" for pages built with Eleventy, and [... I] gave animating the badge a shot!

Chris Burnell (8)

Wow. 11tyCMS has gone through some really rough times these past 24 hours. What happened you ask? Well: * I found out that MDXEditor, the core WYSIWYG edi

Jessie Heald (16)

I code more than I write.

Floh Gro (2)

custom emoji shortcodes!

actuallysomecat (4)

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

Valentin Pratz (2)

My not very sophisticated but very understandable approach to making social media share images for a blog in Eleventy.

Chip Cullen (2)

Software developer, game developer. Writer of ideas.

Judah Perez (1)

It’s time for documenting my current stack and process for writing and publishing a blog post.

Juha-Matti Santala (23)

I’ve upgraded my site’s social media preview images, using a combination of ImageMagick and Eleventy. Here’s entirely too many words about how I made it all happen.

Ethan Marcotte (2)

Add a low-quality webp placeholder image to the HTML of your site

Stefan Burke (4)

In this guide, I'll walk you through an approach of utilizing disk cache while using the HTML transform method of the eleventy image plugin. Disk cache is a persistent cache which allows you to not re-optimize every single image at every single build. However, there are some caveats which I ran

Murtuzaali Surti (5)

A post by Zach Leatherman (zachleat)

Zach Leatherman (88)

Building a personal digital music library with Eleventy and APIs

Damian Walsh (3)

Various tricks I've stumbled into.

Jay Hannah (2)

Various tricks I've stumbled into.

Jay Hannah (2)

How to load my latest photos from Pixelfed

Robb Knight (20)

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

Matt B (1)

Thanks to Matthew Paul for the guide

Stefan Burke (4)

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

Melanie Kat (2)

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

Dan Cătălin Burzo (6)

Getting og:image to work with a plugin and some grit

Jason Moser (6)

YouTube video

Zach Leatherman (88)

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

Bob Monsour (26)

Wrestling eleventy config errors

Chazz Basuta (2)

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.

Bob Monsour (26)

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.

Bob Monsour (26)

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

Valentin Pratz (2)

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.

Cory Dransfeldt (46)

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?

Sebin Nyshkim (3)

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

Sia Karamalegos (13)

YouTube video

Sia Karamalegos (13)

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.

Sebin Nyshkim (3)

Prairie Rose Arena - Project Notes

Sam Feldstein (2)

A web developer living, working and playing in Scotland.

Patrick Grey (1)

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

Aleksandr Hovhannisyan (14)

Turning your Mastodon archive into a web site with Eleventy

Raymond Camden (105)

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

nonnullish (3)

Peter Sefton (1)

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

Alex Zappa (3)

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

Shiv J.M. (13)

Netlify Large Media forces my hand.

Mark Llobrera (8)

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

Sam Smith (1)

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

Max Böck (8)

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

Amy Khar (1)

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

Sami Määttä (6)

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.

Cory Dransfeldt (46)

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

Mark Llobrera (8)

Caching images across Netlify builds

Thomas Rigby (8)

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

John Hobbs (4)

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

Martin Gunnarsson (9)

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

Chris McLeod (7)

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

Jordan Kohl (8)

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.

Rob O'Leary (13)

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.

Cory Dransfeldt (46)

A quick image gallery using Eleventy and backed by Immich

Chris Burgess (2)

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

Cory Dransfeldt (46)

Create unique images for each page at build time

John Brooks (4)

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

Eystein Mack Alnaes (2)

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

Evan Sheehan (8)

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

Martin Gunnarsson (9)

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

Robb Knight (20)

Autogenerating image previews with Eleventy filter functions and node-canvas

nonnullish (3)

Placeholder text. Can't generate excerpt

Carlos Araya (5)

Creating content locally like a hosted editor

Jeff Sheets (5)

A post by Zach Leatherman (zachleat)

Zach Leatherman (88)

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

Zach Leatherman (88)

The setup for sharing my photo gallery.

Darek Kay (5)

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 pre

Matthew Lettini (1)

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

Piotr Maliński (3)

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

James Steel (1)

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.

John M. Wargo (47)

Generating favicon from svg in 11ty using sharp

equilibriumuk (21)

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

equilibriumuk (21)

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

equilibriumuk (21)

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.

fLaMEd (11)

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.

Simon Cox (17)

Matt Steele (3)

Not too complex once I had finished making my mistakes.

Shiv J.M. (13)

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

Mike Street (13)

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

Mark Llobrera (8)

Maybe I'm writing again.

Chris Coleman (2)

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.

Prabashwara Seneviratne (1)

A look at integrating Cloudinary image processing with Eleventy

Raymond Camden (105)

Using renderFile to keep things tidy.

Christopher Kirk-Nielsen (15)

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

TJ Addison (2)

Adding support for digital comic books to your Jamstack site

Raymond Camden (105)

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.

Aleksandr Hovhannisyan (14)

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.

Graham F. Scott (5)

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.

Tomi Chen (1)

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.

Florian Eckerstorfer (9)

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.

Marc Littlemore (4)

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

Michael Harley (14)

Integrating a Google Photos Album in your Eleventy site with Pipedream

Raymond Camden (105)

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

Bryce Wray (26)

Prettier previews, built with many moving parts.

Shiv J.M. (13)

Al Power (9)

Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.

Michael Harley (14)

Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.

Michael Harley (14)

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

Michael Harley (14)

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

Bernard Nijenhuis (8)

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.

Martin Schneider (7)

The what, why, and how of Eleventy Image.

Bryce Wray (26)

Using the Image plugin with Eleventy to build a simple gallery

Raymond Camden (105)

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

Martin Schneider (7)

A post by Zach Leatherman (zachleat)

Zach Leatherman (88)

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

Rares Portan (5)

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.

Oscar (3)

Writings from Mark Thomas Miller.

Mark Thomas Miller (5)

Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.

Michael Harley (14)

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.

Michael Harley (14)

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

Malte Ubl (2)

Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.

Michael Harley (14)

Learn the fundamentals behind responsive images and how to set them up in Eleventy using Cloudinary and Eleventy shortcodes

Sia Karamalegos (13)

Standing on the shoulders of giants makes it possible to generate social sharing images with very little code.

Steven Hicks (1)

Ramblings about software development, privacy, and whatever happens to strike my fancy.

Ryan Cao (3)

I have created a remark plugin called @fec/remark-images that can be used with Eleventy to automatically generate responsive images.

Florian Eckerstorfer (9)

I wanted to find a way to dynamically generate a unique Opengraph images for each blog post automatically using post data, Cloudinary API & Eleventy

Juan Fernandes (4)

You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page.

Phil Hawksworth (6)

Eleventy might not have multilingual and localisation capabilities out of the box, but you can build a pretty good setup using global data files, collections and Nunjucks as a templating language.

Jérôme Coupé (10)