> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Info>
  **Improving user experience helps in:**

  * Increasing user retention
  * Decreasing bounce rates on your website
</Info>

To add image support in website, a user can use [`Custom Image Renderer`](#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`.

```jsx theme={null}
// 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](./menu-component) in this base theme.