0.2.1-alpha.1 • Published 2 months ago

@blaze-cms/image-cdn-react v0.2.1-alpha.1

Weekly downloads
390
License
ISC
Repository
-
Last release
2 months ago

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

{
  "sizes": {
    "landscape": {
      "widths": {
        "300w": {
          "r": {
            "width": 300,
            "height": 200
          }
        },
        "600w": {
          "r": {
            "width": 600,
            "height": 400
          }
        }
      },
      "sizes": "(max-width: 300px) 100vw, 80vw"
    },
    "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.

If there is no match then the component will render an stanard image tag using the provided src. e.g

<img src="https://images.blaze/fakealt.png" />

React component

import { ResponsiveImageProvider, ResponsiveImage } from '@blaze-cms/@blaze-cms/image-cdn-react';
...
<ResponsiveImageProvider config={config}>
  <ResponsiveImage
    src="https://images.blaze/fakealt.png"
    alt="fakealt.png"
    sizeKey="landscape"
  />
</ResponsiveImageProvider>

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.

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

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

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
0.2.1-alpha.0

2 months ago

0.2.1-alpha.1

2 months ago

0.2.0

2 months ago

0.1.0-alpha.19

2 months ago

0.1.0-alpha.18

7 months ago

0.1.0-alpha.15

1 year ago

0.1.0-alpha.12

1 year ago

0.1.0-alpha.13

1 year ago

0.1.0-alpha.11

1 year ago

0.1.0-alpha.7

1 year ago

0.1.0-alpha.8

1 year ago

0.1.0-alpha.6

1 year ago

0.1.0-alpha.5

1 year ago

0.1.0-alpha.4

1 year ago

0.1.0-alpha.3

1 year ago