# @blaze-cms/image-cdn-react
> Image cdn react.
Latest version **0.3.0-alpha.6** (published 2023-10-16) · ISC license · 0 weekly downloads
## Install
```sh
npm install @blaze-cms/image-cdn-react
pnpm add @blaze-cms/image-cdn-react
yarn add @blaze-cms/image-cdn-react
bun add @blaze-cms/image-cdn-react
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.0-alpha.6 |
| Published | 2023-10-16 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 80.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ismael_haytam, emcleandev, tanane, daoyong, marekb9, mcabrerapf, jan_byte9, grzegorzi, andypail, sleep.totem, ishrat, adrdilauro |
## Links
- npm: https://www.npmjs.com/package/@blaze-cms/image-cdn-react
- npm.io page: https://npm.io/package/@blaze-cms/image-cdn-react
## Dependencies (2)
- [qs](https://npm.io/package/qs.md) ^6.9.3
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
## Recent versions
- 0.3.0-alpha.6 (latest) — 2023-10-16
- 0.3.0-alpha.7 (alpha) — 2024-11-12
- 0.3.0-alpha.5 — 2022-10-31
- 0.3.0-alpha.3 — 2022-06-29
- 0.3.0-alpha.2 — 2022-06-09
- 0.3.0-alpha.1 — 2022-06-08
- 0.3.0-alpha.0 — 2022-06-08
- 0.2.1-alpha.1 — 2021-07-30
- 0.2.1-alpha.0 — 2021-07-30
- 0.2.0 — 2021-07-21
- 0.1.0-alpha.19 — 2021-07-16
- 0.1.0-alpha.18 — 2021-03-08
- 0.1.0-alpha.15 — 2020-07-31
- 0.1.0-alpha.13 — 2020-06-02
- 0.1.0-alpha.12 — 2020-06-02
- … 7 more at https://npm.io/package/@blaze-cms/image-cdn-react/versions
## README
# Blaze image cdn React
This package uses an aws service that will reescale our images and will return us a batch of image urls ready to be render in a responsive way.
## How to use this package
## Config and sizeKey
The image sizes are defined in a config object similar to below. This defines sizes based on certain "size keys".
```json
{
"sizes": {
"landscape": {
"widths": {
"300w": {
"r": {
"width": 300,
"height": 200
}
},
"600w": {
"r": {
"width": 600,
"height": 400
}
}
},
"sizes": "(max-width: 300px) 100vw, 80vw"
},
"landscape:logo": {
"disabled": true
},
"landscape:variation": {
"widths": {
"200w": {
"r": {
"width": 200,
"height": 100
}
}
},
"sizes": "(max-width: 200px) 100vw, 80vw"
},
"portrait": {
"widths": {
"300w": {
"r": {
"width": 300,
"height": 400
}
},
"600w": {
"r": {
"width": 600,
"height": 800
}
}
},
"sizes": "(max-width: 300px) 100vw, 80vw"
},
"card": {
"widths": {
"300w": {
"r": {
"width": 300,
"height": 200
}
},
"600w": {
"r": {
"width": 600,
"height": 400
}
}
},
"sizes": "(max-width: 300px) 100vw, 80vw"
},
"social": {
"single": {
"r": {
"width": 300,
"height": 300
}
}
}
}
}
```
When rendering an image or getting a converted url the config and a certain **sizeKey** are used to get the dimensions specific for the sizeKey (examples below)
Size keys can be hierarchical so you can specify a sizeKey variation and if the key isn't present it will fall back on the parent.
For example for the sizeKey "hero:landscape:small" this would check the config for the following keys in order and use the first match
1. hero:landscape:small
2. hero:landscape
3. hero
So if no config had been set for 1 and 2 then the config for 3 would be returned.
Component will render an standard image tag using the provided src e.g
```html
```
in following cases:
- there is no matching size key in config
- size key is disabled in config using **disabled: true** syntax
- image extension is disabled e.g. *.svg
### React component
```js
import { ResponsiveImageProvider, ResponsiveImage } from '@blaze-cms/@blaze-cms/image-cdn-react';
...
```
As you notice this package will export two react components:
- ResponsiveImageProvider: Will receive a config file that should match with the format defined in Config format example.
- ResponsiveImage: Will receive a src and alt attributes as regular img tag but also will receive a sizeKey that should be included as a key in our config file.
The `ResponsiveImage` will use the props and config to render a `picture` tag with webp and original format `source` tags. It sets the first `webp` image as the `img` src property to help optimise loading for browsers like safari which can load the responsive images inconsistently. So if you want the smallest image as the src put that key first, if a larger image put that key first.
Example
```html
```
#### Preloading images
It is possible to preload the responsive images by passing a `HeadComponent` to the the `ResponsiveImage` component. The `HeadComponent` should be something like [react-helment](https://github.com/nfl/react-helmet) or [next/head](https://nextjs.org/docs/api-reference/next/head) that are able to render child components in the `head` of a page. The is component will have responsive image preload link tags added to it.
```js
import Head from 'next/head';
...
```
This would add something like the following wrapped in the HeadComponent
```html
```
### Single image util - getSingleConvertedImagePath
The package also exports a helper function "getSingleConvertedImagePath" to get a single image path for use in places like social meta tags. For example
```js
import { getSingleConvertedImagePath } from '@blaze-cms/image-cdn-react';
const convertedSrc = getSingleConvertedImagePath({ src, config, sizeKey: 'social' });
console.log(convertedSrc); // 'https://images.blazecms.app/convert/logo.png/r%5Bwidth%5D=300&r%5Bheight%5D=300/logo.png
```
This function will try and get the image config for the _sizeKey_ from the one specified in _size_ property then the _single_ property (see social example below). If neither are found it will use the first entry from widths e.g
```js
import { getSingleConvertedImagePath } from '@blaze-cms/image-cdn-react';
const convertedSrc = getSingleConvertedImagePath({ src, config, sizeKey: 'landscape' });
console.log(convertedSrc); // 'https://images.blazecms.app/convert/logo.png/r%5Bwidth%5D=300&r%5Bheight%5D=200/logo.png
...
const convertedSrc = getSingleConvertedImagePath({ src, config, sizeKey: 'landscape', size: '600w' });
console.log(convertedSrc); // 'https://images.blazecms.app/convert/logo.png/r%5Bwidth%5D=600/logo.png
```
---
_Source: https://npm.io/package/@blaze-cms/image-cdn-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
```
in following cases:
- there is no matching size key in config
- size key is disabled in config using **disabled: true** syntax
- image extension is disabled e.g. *.svg
### React component
```js
import { ResponsiveImageProvider, ResponsiveImage } from '@blaze-cms/@blaze-cms/image-cdn-react';
...