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.
The base theme introduces a custom Image component called “ExpImage”, designed to deliver optimized images according to your specifications. Additionally, it offers various customization options to tailor the image precisely to your requirements.
Importance of ExpImage
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
ExpImage.
This component helps in handling images from the admin panel.
ExpImage
The ExpImage component is responsible for rendering customized images based on different configurations. It accepts a variety of props including src, name, height, width, alt, title, style, lazyLoad, retina, preLoad, options, navigationUrl, and navigationTarget. Many of these attributes mirror those typically used in standard HTML image tags.
The ExpImage component accepts the following props:
| Prop | Details |
|---|
src | Image data you which you are getting from the admin panel or a simple image link will also work same a HTML image tag. |
name | The name of the image, if you are using this component for multiple times in same component or page then make sure you pass a unique name |
height | The height of the <img> tag. |
width | The width of the <img> |
height | The height of the <img> element. |
alt | Alt text for the image |
title | Title for the image |
style | To provide a inline style for image |
lazyLoad | The flag to load the image lazy by default value for this will be false. |
preload | The flag to preload image, by default value for this will be false. If you want to prealod the image then you need to pass true for the component |
className | Class names which you want to apply to the image tag you can pass it to this prop as a string |
retina | This boolean value will be specifying the to add 2x images to srcSet for Retina display |
options | This prop will be used to specify the image options for the picture tag and the image optimization. |
ExpCustomImageRenderer.
// This indicates the width of array based on screen size
const options: string[] = [
{
width: 1920,
},
{
width: 1024,
},
{
width: 768,
aspect_ratio: "16:10",
crop_gravity: "west",
},
{
width: 568,
aspect_ratio: "16:13",
crop_gravity: "west",
},
{
width: 450,
aspect_ratio: "16:16",
crop_gravity: "west",
},
];
<ExpImage
src={imageData}
options={options}
height="790"
width="616"
alt="Excore"
title="Excore"
preload={true}
/>;
The object within the options array can contain multiple values as illustrated below:
{
/*
* Parameter: breakPoint Units: Pixels
* breakPoint will be useful, when all the options object have a breakPoint for the options array for ExpImage component,
* if not found then it will use the default breakPoints, which you can find in ExpImage Component.
* */
breakPoint?: number;
/*
* Parameter: width Units: Pixels Default: auto
* Resize the output image to the given width maintaining the current aspect ratio.
* */
width?: number;
/*
* Parameter: height Units: Pixels Default: auto
* Resize the output image to the given height maintaining the current aspect ratio.
* */
height?: number;
/*
* Parameter: aspectratio **_Default**: auto
* Crop the output image to match the given aspect ratio. The default origin point (gravity) is positioned on the center of the image.
* */
aspect_ratio?: string;
/*
* Parameter: quality Units: Number Range: 0-100 Default: 85
* Determines the compression level of the resulting image with 100 being the lowest level of compression and 0 being the highest.
* Higher compression means smaller files, but might visually degrade the image (e.g. JPEG compression under 70 tends to produce visible artefacts.
* */
quality?: number;
/*
* Parameter: sharpen Units: Boolean Default: false
* Sharpen the output image.
* */
sharpen?: boolean;
/*
* Parameter: blur Units: Number Range: 0-100 Default: 0
* Blur the output image.
* */
blur?: boolean;
/*
* Parameter: crop Units: Pixels Format 1: width,height Format 2: width,height,x,y
* Crop the output image to the given width and height. Two formats are accepted. Format 1 one only includes the width and height of the crop.
* Format 2 also includes the X and Y position where the crop should start. Image resizing with the width and height parameters is processed after the crop and the resized measurements apply.
* If only width and height are given, the Crop Gravity parameter will be used.
* */
crop?: string;
/*
* Parameter: cropgravity **_Default: center
* Values**: center,forget,east,north,south,west,northeast,northwest,southeast,southwest
* Set the gravity of the crop operation. This is used with the Format 1 cropping only and snaps the crop to the selected position.
* */
crop_gravity?: string;
/*
* Parameter: flip Units: Boolean Default: false
* Flip the output image vertically.
* */
flip?: boolean;
/*
* Parameter: flop Units: Boolean Default: false
* Flip the output image horizontally
* */
flop?: boolean;
/*
* Parameter: brightness Units: Number Range: -100-100 Default: 0
* Adjusts the brightness of the output image. This can either brighten or darker the image.
* */
brightness?: number;
/*
* Parameter: saturation Units: Number Range: -100 - 100 Default: 0
* Adjusts the saturation of the output image. Use -100 for grayscale.
* */
saturation?: number;
/*
* Parameter: hue Units: Number Range: 0-100 Default: 0
* Adjusts the hue of the output image by rotating the color wheel.
* The default value of 0 is the base color and increasing the value modulates to the next color for each 33 change.
* */
hue?: number;
/*
* Parameter: contrast Units: Number Range: -100 - 100 Default: 0
* Adjusts the contrast of the output image.
* */
contrast?: number;
/*
* Parameter: sepia Units: Integer Values: 0 - 100 Default: 0
* Changes the image color to the sepia color scheme.
* */
sepia?: number;
}
