Images and ResponsiveImages

ResponsiveImage

Images from Onlineweb4 come packaged as an object called a ResponsiveImage.

These currently come packaged on the form:

interface IImage {
  id: number;
  name: string;
  timestamp: string;
  description: string;
  tags: string[];
  photographer: string;

  /* Images are available in all these different sizes */
  thumb: string;
  original: string;
  wide: string;
  lg: string;
  md: string;
  sm: string;
  xs: string;
}

source. It is a little different, but that is for us to be able to use the sizes by themselves for other things

For us to be able to use these responsive images in a clean and descriptive way, we have a wrapper component that should be used to display these images.

This is the ResponsiveImage Component.

Example usage:

export interface IProps {
  image: IImage;
}

const ImagePane: FC<IProps> = ({ image }) => {
  return (
    <Pane>
      <ResponsiveImage image={image} size="large" />
      <Tags tags={image.tags} />
    </Pane>
  );
};

Future Responsive Images

Browser support for displaying responsive images is available, but is a bit tricky to get right.

For the future it would be nice to implement ResponsiveImage using the browser native Responsive Image sources