​
Importance of Custom Image Renderer

Don’t we all agree that when information is presented in a visual/graphical format, it creates deeper impact on the user! This enhances the UX (User Experience) altogether.
Improving user experience helps in:
  • Increasing user retention
  • Decreasing bounce rates on your website
To add image support in website, a user can use Custom Image Renderer. This component helps in handling images from the admin panel.

​
Custom Image Renderer

ExpCustomImageRenderer renders custom images based on different configurations and data sources. It accepts various props such as imageData, dataSource, contentLibraryImageData, and others to customize the image rendering. The component handles two data sources: CONTENT_LIBRARY and FREE_FORM. If the data source is CONTENT_LIBRARY, it uses an image parser utility to parse the contentLibraryImageData and extract relevant image information. If the data source is FREE_FORM, it iterates over different view types (desktop, tablet, mobile) and processes the imageData accordingly. The ExpCustomImageRenderer component is utilized when components have a dataSource as FREE_FORM, regardless of whether they also have CONTENT_LIBRARY. It is designed to handle both cases seamlessly. The ExpCustomImageRenderer component accepts the following props:
PropDetails
imageDataAn object or string representing the image data. All you need is to pass image key or you can pass its zeroth postion that you get from API response.
dataSourceA string indicating the source of the image. It can be either CONTENT_LIBRARY or FREE_FORM. If set to CONTENT_LIBRARY, the component uses the imageData object as the source. If set to FREE_FORM, the component handles the image data differently.
contentLibraryImageDataA string representing the image data specifically for the CONTENT_LIBRARY source.
staticWidthArrAn array containing static width values for the image.
heightThe height of the <img> element.
widthThe width of the <img> element.
altThe alt (alternative) text for the image.
titleThe title text for the image.
lazyLoadThe flag to load the image lazyly
Here is an example to show the usage of ExpCustomImageRenderer. 
// This indicates the width of array based on screen size
const staticWidthArr: string[] = ['1232', '980', '1144', '600'];

<ExpCustomImageRenderer
  imageData={imageData}
  dataSource={dataSource}
  contentLibraryImageData={mappingObj?.bannerImageLink}
  staticWidthArr={staticWidthArr}
  height="790"
  width="616"
  alt="Excore"
  title="Excore"
/>
These props provide configuration options to control the image rendering, including the image source, dimensions, types, alt text, and title. They allow for customization and flexibility in displaying images within the ExpCustomImageRenderer component. Head to the next document to learn more about the Menu Component in this base theme.