Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Princesseuh/astro-eleventy-img
Astro + eleventy-img
https://github.com/Princesseuh/astro-eleventy-img
Last synced: 10 days ago
JSON representation
Astro + eleventy-img
- Host: GitHub
- URL: https://github.com/Princesseuh/astro-eleventy-img
- Owner: Princesseuh
- License: mit
- Archived: true
- Created: 2022-01-28T19:01:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-30T15:39:41.000Z (over 1 year ago)
- Last Synced: 2024-10-16T02:03:56.700Z (21 days ago)
- Language: TypeScript
- Size: 403 KB
- Stars: 43
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-astro - astro-eleventy-img - Generate images using [eleventy-img](https://github.com/11ty/eleventy-img) (What Do I Use... / If I want to add optimized images?)
- awesome-astro - Astro Eleventy Image
README
# Astro + eleventy-img
> **Warning**
> This project is not supported anymore. Please use the official [`astro:assets`](https://docs.astro.build/en/guides/assets/) instead.
A tiny script and component intended to be used with [Astro](https://astro.build/) for generating images with [eleventy-img](https://github.com/11ty/eleventy-img). It also supports creating blurry placeholders for said images
It was mostly made for my own website and I do not intend to really support this outside of my own needs. For more generalist solutions, check out the official [@astrojs/image](https://docs.astro.build/en/guides/integrations-guide/image/) integration or [astro-imagetools](https://github.com/RafidMuhymin/astro-imagetools).
**This package is intended to be used in Astro's static mode and does NOT support Server-Side Rendering.**
## Installation
```shell
npm install astro-eleventy-img
```
## Usage
The best way to use this in my opinion is to use it to generate images in the `public` folder. That way, they're copied directly to the result website. This is the default behavior.
### Javascript Usage
#### Generating images
```astro
---
import { generateImage } from 'astro-eleventy-img';
const myImage = await generateImage('src/assets/my_image.png', {
// The options here are passed directly to eleventy-img
widths: [300],
formats: ['webp', 'avif'],
});
---
```
`generateImage` returns an object containing all the formats generated and metadata you can use in your HTML, so myImage is equal to:
```js
{
webp: [
{
format: 'webp',
width: 300,
height: 240,
url: '/assets/images/RfSNa8TCUW-300.webp',
sourceType: 'image/webp',
srcset: '/assets/images/RfSNa8TCUW-300.webp 300w',
filename: 'RfSNa8TCUW-300.webp',
outputPath: 'public/assets/images/RfSNa8TCUW-300.webp'
}
],
avif: [
{
format: 'avif',
width: 300,
height: 240,
url: '/assets/images/RfSNa8TCUW-300.avif',
sourceType: 'image/avif',
srcset: '/assets/images/RfSNa8TCUW-300.avif 300w',
filename: 'RfSNa8TCUW-300.avif',
outputPath: 'public/assets/images/RfSNa8TCUW-300.avif'
}
]
}
```
The following files will be generated in the `public/assets/images` folder:
```shell
RfSNa8TCUW-300.webp
RfSNa8TCUW-300.avif
```
#### Generating placeholders
```astro
---
import { generatePlaceholder } from 'astro-eleventy-img';
const myPlaceholder = generatePlaceholder('src/assets/my_image.png');
---
```
`generatePlaceholder` return an object containing all the properties needed for showing the image. So `myPlaceholder` in this example is equal to:
```js
{
dataURI: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAIAAABV+fA3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAz0lEQVQImQHEADv/AJ7Ho7PYwTt5UhdkNjmLSUOPUCB4MSFzMkGMNACixqksb04WUy4wdz9cnFxPnksbaS0HTCo3hDUAnLmcRnFLQ289ZpZXn7Z9MpA+OYU9EFstVZpHAJ3GaqnPbJXFW5iyZNzLqZWvco+9YHeqVlKXSACu1myt13Cc1GW6ynnFrIjK4ouSzFZ/vlNsskgAytqD1d6Q3+Kevsl/xb951+OXyt6FstVytNRzAIS0S4i2S5u8TK3NXrPOZ57CYqLGXWiqOoi4Rz9UYMGpm241AAAAAElFTkSuQmCC';
width: 640;
height: 514;
quality: 60;
}
```
### Component Usage
Alternatively, it can also be used through a provided component to automatically generate the proper HTML for including the image and its placeholder:
```astro
---
import { Image } from 'astro-eleventy-img';
---
```
will generate the following HTML:
```html
This is my favorite image.
```
and the following files will be generated in the `public/assets/images` folder:
```shell
4dWK95ygTq-640.avif
4dWK95ygTq-640.webp
4dWK95ygTq-640.png
```
The included `Image` component is a thin wrapper around `generateImage` and `generatePlaceholder`, it works for most needs but do not hesitate to build your own!
## [Complete Docs available here](./Docs.md)
## Troubleshooting
### require is not defined
Add the following to your `astro.config.js` config:
```js
vite: {
ssr: {
external: ["@11ty/eleventy-img"],
},
},
```