Custom image

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:

Prop	Details
`imageData`	An 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.
`dataSource`	A 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.
`contentLibraryImageData`	A string representing the image data specifically for the `CONTENT_LIBRARY` source.
`staticWidthArr`	An array containing static width values for the image.
`height`	The height of the `<img>` element.
`width`	The width of the `<img>` element.
`alt`	The alt (alternative) text for the image.
`title`	The title text for the image.
`lazyLoad`	The 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.

Getting Started

Overview

Theme Components

Create Custom Widget

Theme Templates

Experro CLI

Other

Importance of Custom Image Renderer

Custom Image Renderer

​Importance of Custom Image Renderer

​Custom Image Renderer

Importance of Custom Image Renderer

Custom Image Renderer