# @mentor-medier/resizer-image-content-source-block

> Pass in a raw image url, get some size options for that image generated via thumbor-lite

Latest version **5.13.3** (published 2021-07-05) · CC-BY-NC-ND-4.0 license · 0 weekly downloads

## Install

```sh
npm install @mentor-medier/resizer-image-content-source-block
pnpm add @mentor-medier/resizer-image-content-source-block
yarn add @mentor-medier/resizer-image-content-source-block
bun add @mentor-medier/resizer-image-content-source-block
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.13.3 |
| Published | 2021-07-05 |
| First published | 2021-01-14 |
| Weekly downloads | 0 |
| License | CC-BY-NC-ND-4.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jack Howard |
| Maintainers | mentor-devops |
| Keywords | thumbor, thumbor-lite, image-resizer, responsive, images |

## Links

- npm: https://www.npmjs.com/package/@mentor-medier/resizer-image-content-source-block
- Repository: https://github.com/mentor-medier/fusion-news-theme-blocks
- Issues: https://github.com/mentor-medier/fusion-news-theme-blocks/issues
- npm.io page: https://npm.io/package/@mentor-medier/resizer-image-content-source-block

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 5.13.3 (latest) — 2021-07-05
- 0.0.0-beta.0be28ab.20210705141632 (beta) — 2021-07-05
- 0.0.0-canary.b3b3816 (canary) — 2021-02-11
- 5.13.2 — 2021-07-05
- 0.0.0-beta.82a454f.20210702074328 — 2021-07-02
- 0.0.0-beta.0dee386.20210628085431 — 2021-06-28
- 0.0.0-beta.7455c82 — 2021-05-20
- 0.0.0-beta.2aab3f5 — 2021-05-12
- 0.0.0-beta.362b9c3 — 2021-05-11
- 0.0.0-beta.3012b7c — 2021-05-11
- 5.11.3 — 2021-05-11
- 0.0.0-beta.a2f7906 — 2021-05-07
- 0.0.0-beta.26a07bc — 2021-05-05
- 0.0.0-beta.d6cd4be — 2021-05-05
- 0.0.0-beta.10c101b — 2021-05-05
- … 47 more at https://npm.io/package/@mentor-medier/resizer-image-content-source-block/versions

## README

# `@wpmedia/resizer-image-content-source-block`
_This is specifically to make sure that resized image urls are available at themes' `blocks.json` widths._

## Acceptance Criteria
- Add AC relevant to the block

## Endpoint
- Add the endpoint that this content source is hitting

## ANS Schema
Detail the data structure returned from this content source

### ANS Fields
- n/a

## Configurable Params
| **Param** | **Type** | **Description** |
|---|---|---|
| **param** |  |  |

## TTL
- Add the TTL of the content source

## Additional Considerations
### Usage

```
import React from 'react';
import PropTypes from 'prop-types';
import getProperties from 'fusion:properties';
import { Image } from '@wpmedia/engine-theme-sdk';
import { useContent } from 'fusion:content';

const ManualBlock = ({ customFields, arcSite }) => {
  const resizedImageOptions = useContent({
    source: 'resize-image-api',
    query: { raw_image_url: customFields.imageURL },
  });

  return (
    <Image
      url={customFields.imageURL}
      alt={customFields.headline}
      smallWidth={274}
      smallHeight={206}
      mediumWidth={274}
      mediumHeight={206}
      largeWidth={377}
      largeHeight={283}
      breakpoints={getProperties(arcSite)?.breakpoints}
      resizerURL={getProperties(arcSite)?.resizerURL}
      resizedImageOptions={resizedImageOptions}
    />
  )


ManualBlock.propTypes = {
  customFields: PropTypes.shape({
    imageURL: PropTypes.string.tag({
      label: 'Image URL',
      group: 'Configure Content',
    })
  }),
};

ManualBlock.label = 'Manual Block – Arc Block';

export default ManualBlock;
```

---
_Source: https://npm.io/package/@mentor-medier/resizer-image-content-source-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._