Images | Yext Hitchhikers Platform
Images from Content
Images stored in the Content are optimized for web experiences. When you upload a photo, Yext automatically uploads it to a CDN so it can be served lightning fast.
Furthermore, the Content will automatically resize images and convert them to the most efficient format (likely webp) so that your website is optimized for SEO and page speed.
Refer to our Image Storing and Serving reference doc for more information on how this works.
Image Component
The best way to display images in Pages is to use the <Image /> component. This React component handles a lot of the tricky pieces of HTML images for you. Specifically, it will:
- Automatically pull the right-sized image
- Pass
- Automatically block space to prevent Cumulative Layout Shift
Here is a simple example of the image component:
import { Image } from "@yext/pages-components"
const template = ({ document } ) > {
return <div>
<Image image={document.logo} />
</div>
}The only required field on the Image component is the image property. The image needs to be a field from the Content of type image.
Props
| Prop | Type | Default | Details |
|---|---|---|---|
className? |
string |
null |
Override the className on the underlying img |
image |
Image field from Content | ||
width? |
Number |
null |
The absolute width of the image. Only applies if the layout is fixed |
height? |
Number |
null |
The absolute height of the image. Only applies if the layout is fixed |
aspectRatio? |
Number |
null |
The aspect ratio of the image. Only applies if the layout is aspect |
layout? |
"intrinsic" / "fixed" / "aspect" / "fill" |
"intrinsic" |
See below |
placeholder? |
React Component |
null |
Pass through React component that is displayed when the image is loading |
imgOverrides? |
Object |
null |
Pass through of any props that are on the native HTML img tag. If you override src or srcsets you will probably break it… |
style? |
CSS Object | null |
Pass through to style the image |
Layout Property
intrinsic
By default, an image will scale down to fit the width of the container but will not exceed the absolute size of the image. So if the image is 300x400 but the container has a width of 1000px the image will be 300x400.
fixed
This layout will show the image in a fixed size. The width or height must be passed in. If both the width and the height are passed in and the aspect ratio doesn’t match the aspect ratio of the image, the image will be centered. This can be adjusted using the objectFit and objectPosition props of the style prop.
aspect
This layout will show the image in a fixed aspect ratio. You must pass in aspectRatio in order to use this layout. The aspectRatio is a number so for a 2x1 ratio pass in 2.0.
fill
This layout will fill the image to 100% of the container width always. This means the image could exceed the intrinsic width of the underlying image resulting in low image quality.
Examples
Here are some example uses:
{/* Fixed 300px wide image */}
<Image image={document.logo} layout="fixed" width={300}/>
{/* Fixed image */}
<Image image={document.logo} layout="fixed" width={300} height={20}/>
{/* Full Width */}
<Image image={document.logo} layout="fill"/>
{/* Square Image */}
<Image image={document.logo} layout="aspect" aspectRatio={1}/>