Websites v4 docs v5.2.4
    Preparing search index...

    Function ResponsiveImage

    • This ResponsiveImage component combines the optimization of the NextJS Image component with our cmsImage function, which works with the resizing capabilities of the MrRichards API.

      For most use cases, the NextJS Image will be more than sufficient. However, as we cannot control the srcset of the NextJS Image there may be cases where the aspect ratio of the rendered img mean we are requesting a large image, much of which is being cropped out of view. In this case there may be more room for improvement which the ResponsiveImage can provide.

      The default dimensions are suitable for fullscreen hero images where the height on smaller screen devices is greater than the width (the widths are based off the NextJS default srcset) but can be overwritten with the dimensions prop.

      Parameters

      • __namedParameters: ImageProps

      Returns Element

      <ResponsiveImage
        image={{ src: property.mainPhoto, alt: property.displayAddress }}
        dimensions={[
           { height: 350, width: 240 },
           { height: 720, width: 540 },
           { height: 400, width: 900 },
        ]}
        options={{ loading: 'eager' }}
      />

      The default dimensions assume that the images are full width of the screen by using the width of each dimension to set the media breakpoint. dimensions which set only width and height will follow this format. However, an optional media field can be added to each dimension object to set breakpoints separate from the image width.

      <ResponsiveImage
        image={{ src: property.mainPhoto, alt: property.displayAddress }}
        dimensions={[
           { height: 350, width: 240, media: '(max-width: 640px)' },
           { height: 720, width: 540, media: '(max-width: 720px)' },
           { height: 400, width: 900, media: '(max-width: 1200px)' },
        ]}
      />

    Settings

    Member Visibility