80 posts in 'Images'
11ty : how to use the image plugin to generate responsive images for CSS
Medium post
Jul 13, 2024
by Phil Rentier Digital (1 post)
Categories: CSS/SassConfigurationHow to...ImagesShortcodes
Building a Web Version of Your Mastodon Archive with Eleventy
Turning your Mastodon archive into a web site with Eleventy
Jul 4, 2024
by Raymond Camden (100 posts) · Website & RSS feed
Categories: Global DataHow to...ImagesShortcodesSocial 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
Categories: Global DataHow to...Image GalleriesImagesPaginationRemote Data
Twenty year celebration: Site update number three
Jun 23, 2024
by Peter Sefton (1 post) · Website
Categories: CollectionsHow to...ImagesWhy 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
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
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...ImagesImage GalleriesMarkdownRSSUpgrading
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
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 (7 posts) · Website & RSS feed
Categories: CollectionsHow to...ImagesPluginsUpgrading
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...ImagesShortcodes
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
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
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: ImagesMarkdownShortcodesUpgrading
Fixing a typo shaved 4 minutes off my Netlify build time
Caching images across Netlify builds
Apr 10, 2024
by Thomas Rigby (6 posts) · Website & RSS feed
Categories: DeploymentHow to...PerformanceImages
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...ImagesSocial 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: ConfigurationHow 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 (5 posts) · Website & RSS feed
Categories: ImagesPerformance
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...ImagesConfiguration
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 (9 posts) · Website & RSS feed
Categories: ConfigurationData CascadeDeploymentImages
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
Eleventy 🤝 Immich
A quick image gallery using Eleventy and backed by Immich
Feb 12, 2024
by Chris Burgess (2 posts) · Website & RSS feed
Categories: CollectionsHow to...ImagesPlugins
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
by Cory Dransfeldt (34 posts) · Website & RSS feed
Categories: How to...ImagesWebmentions
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...ImagesPerformancePlugins
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
Categories: ConfigurationHow to...ImagesLayoutsImage 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: ConfigurationHow to...ImagesPlugins
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 (18 posts) · Website & RSS feed
Categories: ConfigurationHow to...ImagesLayoutsSocial 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
Categories: FiltersHow to...ImagesSocial Media
Migrating from WordPress to Eleventy (part 4)
Nov 22, 2023
by Carlos Araya (5 posts) · Website & RSS feed
Categories: BloggingDeploymentImagesMigrating to Eleventy
VSCode Pasting 11ty Images
Creating content locally like a hosted editor
Nov 21, 2023
A new technique for image optimization: SVG short circuiting
A post by Zach Leatherman (zachleat)
Nov 15, 2023
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
by Zach Leatherman (38 posts) · Website & RSS feed
Categories: ImagesPerformancePlugins
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...ImagesNavigationImage Galleries
Adding Social Preview Images To Our 11ty Blog
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...ImagesSocial 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: ConfigurationHow to...ImagesCSS/SassSocial Media
Headless kiosk application (with Kirby CMS)
Use Kirby and 11ty to generate a headless kiosk application hat works offline.
Oct 1, 2023
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
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: ImagesRemote DataHow to...Now Page
11ty image shortcode best practice
Quick reminder to myself about how to use the 11ty shortcode for images
Jun 6, 2023
by Simon Cox (9 posts) · Website & RSS feed
Categories: ImagesHow to...MarkdownShortcodes
Farewell Netlify Large Media, Welcome eleventy-img
Not too complex once I had finished making my mistakes.
Feb 19, 2023
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 MediaImages
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.
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: ImagesImage Galleries
Integrating Cloudinary into Eleventy
A look at integrating Cloudinary image processing with Eleventy
Oct 20, 2022
Manage your SVG files with Eleventy's render plugin
Using renderFile to keep things tidy
Oct 2, 2022
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 MatterImagesHow to...
Reading Comic Books in the Jamstack
Adding support for digital comic books to your Jamstack site
Jul 1, 2022
by Raymond Camden (100 posts) · Website & RSS feed
Categories: Global DataHow 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
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
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
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
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
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
by Michael Harley (14 posts) · Website & RSS feed
Categories: BloggingHow to...ImagesFront 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
by Raymond Camden (100 posts) · Website & RSS feed
Categories: ImagesHow to...Remote DataImage 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: ImagesRemote 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 2.0.1. Eleventy v3.0 is currently under development and available for testing.
Automatically Generated Social Media Images with HTML, CSS, Eleventy & Puppeteer
Prettier previews, built with many moving parts.
Aug 16, 2021
Adding figures with captions to images in markdown with eleventy
Eleventy (11ty) Tutorial
Jul 25, 2021
Setting a conditional variable in Javascript
Power Platform Developer and all around cool guy
Jul 19, 2021
Improving my automated open graph image process w/ Eleventy
Power Platform Developer and all around cool guy
Jul 14, 2021
by Michael Harley (14 posts) · Website & RSS feed
Categories: ImagesSocial MediaHow 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
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 (6 posts) · Website
Categories: FiltersHow to...ImagesSocial 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: ImagesSocial MediaHow to...
Using Eleventy’s official image plugin
The what, why, and how of Eleventy Image.
Apr 17, 2021
Building a Simple Image Gallery with Eleventy
Using the Image plugin with Eleventy to build a simple gallery
Apr 7, 2021
by Raymond Camden (100 posts) · Website & RSS feed
Categories: ImagesHow to...PluginsConfigurationImage 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
Don't shut down your business! Instead use Eleventy Image
A post by Zach Leatherman (zachleat)
Jan 25, 2021
by Zach Leatherman (38 posts) · Website & RSS feed
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
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
Automatic social sharing images for Eleventy
Jan 10, 2021
by Mark Thomas Miller (5 posts) · Website
Categories: ImagesSocial MediaHow to...
Automated social sharing images with Eleventy and Puppeteer
Power Platform Developer and all around cool guy
Jan 9, 2021
Setup social sharing previews, SEO, and favicons on Eleventy
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
by Michael Harley (14 posts) · Website & RSS feed
Categories: Social MediaImagesHow 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
Configuring responsive and optimized images with Eleventy
Power Platform Developer and all around cool guy
Dec 21, 2020
Optimize Images in Eleventy Using Cloudinary
Learn the fundamentals behind responsive images and how to set them up in Eleventy using Cloudinary and Eleventy shortcodes
Dec 11, 2020
by Sia Karamalegos (8 posts) · Website & RSS feed
Categories: Images
Generating Social Sharing Images In Eleventy
Standing on the shoulders of giants makes it possible to generate social sharing images with very little code.
Dec 10, 2020
by Steven Hicks (1 post) · Website
Categories: Social MediaImagesHow to...
Responsive Images with Eleventy & Sharp
High school student and open source developer.
Oct 23, 2020
Eleventy and Responsive Images
I have created a remark plugin called @fec/remark-images that can be used with Eleventy to automatically generate responsive images.
Oct 12, 2020
by Florian Eckerstorfer (8 posts) · Website & RSS feed
Categories: Images
Automated Open Graph images with 11ty and Cloudinary
I wanted to find a way to dynamically generate a unique Opengraph images for each blog post automatically using post data, Cloudinary API & Eleventy
Sep 22, 2020
by Juan Fernandes (2 posts) · Website & RSS feed
Categories: Social MediaImagesHow to...
Tips for rolling your own lazy loading
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.
Jul 15, 2019
Multilingual sites with Eleventy
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.
Apr 27, 2019