Image Gallery

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/components/ImageGallery"

// @flow
import {Fragment} from 'react';
import {spacing, font} from '../../../utils/classnames';
import {CaptionedImage} from '../Images/Images';
import type {CaptionedImage as CaptionedImageProps} from '../../../model/captioned-image';

type ImageGalleryProps = {|
  id: string,
  title: ?string,
  items: CaptionedImageProps[]
|}

// TODO Slide numbers
const ImageGallery = ({id, title, items}: ImageGalleryProps) => {
  return (
    <Fragment>
      {title && <h2 className='image-gallery__heading h2'>{title}</h2>}
      <div className='wobbly-edge wobbly-edge--white wobbly-edge--small js-wobbly-edge' data-is-static='true'></div>
      <div className='image-gallery touch-scroll js-image-gallery' data-id={id} id={id}>
        {items.map((captionedImage, i) => (
          <div className='image-gallery__item' key={captionedImage.image.contentUrl}>
            <CaptionedImage
              image={captionedImage.image}
              caption={captionedImage.caption}
              sizesQueries={'(max-width: 600px) 100vw, ' + (captionedImage.image.width / captionedImage.image.height) * 640 + 'px'}
              preCaptionNode={
                <span
                  className={`inline-block border-right-width-1 border-color-pumice ${font({s: 'HNM5'})} ${spacing({s: 1}, {padding: ['right'], margin: ['right']})}`}
                  aria-label={`slide ${i + 1} of ${items.length}`}>
                  <span aria-hidden='true'>{i + 1}/{items.length}</span>
                </span>
              }>
            </CaptionedImage>
          </div>
        ))}
      </div>
    </Fragment>
  );
};

export default ImageGallery;
{
  "items": [
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-08-l0062946.jpg",
      "caption": "A Chinese woman suffering from leprosy. In the 1880s, the president of the Louisiana State Board of Health blamed the “filthy, vicious, debased… Chinese” for the disease.",
      "width": 2000,
      "height": 3038
    },
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-09-l0007201.jpg",
      "caption": "Syphilis has been blamed on a range of different nationalities and religions, including the French.",
      "width": 1088,
      "height": 1732
    },
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-10-l0000611.jpg",
      "caption": "Poster warning of the “alarming approach” of what was described as “Indian” cholera, produced in London in 1831.",
      "width": 1198,
      "height": 1548
    },
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-11-l0072276.jpg",
      "caption": "Tuberculosis is often described as a disease of “the poor”. This 1951 poster by the Swiss Association Against Tuberculosis appealed for funds to “Help us to help the poor”.",
      "width": 2000,
      "height": 2828
    }
  ]
}

There are no notes for this item.