Images| Hitchhikers Platform

Images from Knowledge Graph

Images stored in the Knowledge Graph 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 Knowledge Graph 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.


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 Knowledge Graph of type image.

Props

Prop Type Default Details
className? string null Override the className on the underlying img
image Image field from KG
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? "instrisic" / "fixed" / "aspect" / "fill" "instrisic" 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

intrisic

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}/>
Feedback