@apmg/mimas
v2.0.1
Published
A React component that takes an image endpoint from APM's APIs and returns a proper image with srcset.
Downloads
148
Readme
@apmg/mimas
@apmg/mimas is a small library that takes an endpoint from American Public Media's internal image API and turns it into a valid <img /> or <amp-img /> object with a srcset and proper sizing. This library is used on its own and in our other component libraries, such as Titan and Amat React.
Installation
Simply run the command yarn add @apmg/mimas or npm i @apmg/mimas.
Usage
In files where you want to use the <Image /> component, import { Image } from '@apmg/mimas' at the top of your file. On pages that need to be compliant with Google's AMP (which we here at MPR adore and think is great), import AmpImage instead in the same manner.
For example, this:
import Image from './Image'
import { imageData } from './__tests__/data/image'
<Image image={imageData} aspectRatio='widescreen' />Will produce a large widescreen image in the app at the appropriate size for the viewport, presuming that the data fed into the image property looked like this.
const imageWithPreferred = {
preferredAspectRatio: {
instances: [
{
width: 400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/5ecd52-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 400
},
{
width: 600,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/de193e-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 600
},
{
width: 1000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/7cb7e2-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1000
},
{
width: 1400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/822d4e-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1400
},
{
width: 2000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/f977a8-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 2000
}
],
slug: 'square'
},
aspect_ratios: {
normal: {
instances: [
{
width: 400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/normal/fa6aa0-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 301
},
{
width: 600,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/normal/00b407-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 451
},
{
width: 1000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/normal/10ac72-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 752
},
{
width: 1400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/normal/6e721c-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1053
},
{
width: 2000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/normal/f49c92-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1504
}
],
slug: 'normal'
},
square: {
instances: [
{
width: 400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/5ecd52-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 400
},
{
width: 600,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/de193e-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 600
},
{
width: 1000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/7cb7e2-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1000
},
{
width: 1400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/822d4e-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1400
},
{
width: 2000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/square/f977a8-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 2000
}
],
slug: 'square'
},
thumbnail: {
instances: [
{
width: 120,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/thumbnail/e8796f-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 90
},
{
width: 300,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/thumbnail/dfad0f-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 226
}
],
slug: 'thumbnail'
},
widescreen: {
instances: [
{
width: 400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/e428bc-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 225
},
{
width: 600,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/58b2ba-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 337
},
{
width: 1000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/95c885-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 562
},
{
width: 1400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/b3a373-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 787
},
{
width: 2000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/6ceb83-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1124
}
],
slug: 'widescreen'
},
portrait: {
instances: [
{
width: 400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/portrait/e6415b-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 500
},
{
width: 600,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/portrait/0ebc89-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 750
},
{
width: 1000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/portrait/fed99c-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1250
},
{
width: 1400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/portrait/523b4b-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1750
},
{
width: 1883,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/portrait/766692-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 2354
}
],
slug: 'portrait'
},
uncropped: {
instances: [
{
width: 400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/35bd3b-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 320
},
{
width: 600,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/f5db37-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 480
},
{
width: 1000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/04a63f-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 800
},
{
width: 1400,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/72bc48-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1120
},
{
width: 2000,
url:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/f20034-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
height: 1600
}
],
slug: 'uncropped'
}
},
long_caption: 'Serena Brook opens our show at The Town Hall',
short_caption: 'Serena Brook opens our show at The Town Hall',
width: 'full',
preferred_aspect_ratio_slug: 'widescreen',
id: 'c2c452354fbff94d720ba8f86e2c71ba7427b306',
credit_url: '',
type: 'apmImage',
float: 'none',
credit: 'American Public Media',
fallback:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/uncropped/f5db37-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg',
srcset:
'https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/e428bc-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 400w, https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/58b2ba-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 600w, https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/95c885-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 1000w, https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/b3a373-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 1400w, https://img.apmcdn.org/c2c452354fbff94d720ba8f86e2c71ba7427b306/widescreen/6ceb83-20181220-serena-brook-opens-our-show-at-the-town-hall.jpg 2000w'
}Full Documentation
For complete usage details, head to apm-mimas.github.io/docs.