<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Program Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Knowledge Assistant Track Completed Multi-Language Experiences Track Completed Fall '22 Release Highlights Track Completed Spring '23 Release Highlights Track Completed Chat Track Completed Summer '23 Release Highlights Track Completed Fall '23 Release Highlights Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
< DOCS HOME
Search
Content
No results in this galaxy.
Try searching all of Hitchhikers here.
Basic
Bulk Edit
Categories
Entity History
File Field Type
Image Storing and Serving
Content System Limits
Languages and Locales
Photo Field Type
Rich Text (v2) and Markdown Field Types
Standard Field Types
Use Asset Field Permission
Computed Fields
Computed Fields Overview
Field Computation Triggers
home

Image Storing and Serving | Yext Hitchhikers Platform

Yext Content supports a range of image storing capabilities to ensure that images can be served flexibly on digital experiences.

Once a photo has been uploaded to Content, there are multiple ways to specify how that photo should be displayed for downstream use (i.e., any source that would refer to that image on your entity, such as Search, Listings, or Pages.)

Storing Images

Photos can be stored on entities in fields of either the Photo or File field type. Differences between these field types are outlined below.

File Field Type Photo Field Type
Can add validation for height, width,
and aspect ratio		 No Yes
Can add validation for file size Yes No
Can use dynamic links (dynl, dynm) Yes Yes
On-the-fly resizing Yes Yes

For more information on the usage and limitation of each of these field types, check out the File Field Type and Photo Field Type reference documentation.

Serving Images

When referencing images in downstream uses (such as Pages, Search, or Listings), the hosting base URL of the photo should change to a Yext image serving base URL. As an example, if the hosting URL of a photo is a.mktgcdn.com, this should be adjusted to dyn.mktgcdn.com, dynl.mktgcdn.com, or dynm.mktgcdn.com as the serving URL.

Using a Yext serving URL allows the user to specify the size the image should be in downstream instances.

File Type Guidelines

Here is a summary of when these formats are best suited:

  • JPEG is best for photos and any image with a wide range of colors.
  • PNG is best for images like clip art or vector art which have a limited color palette.
  • WEBP can handle both use cases well and encodes images into a smaller file at the same level of quality. This format is recommended for web page serving. However, not every application can read this format.

Dynamic Image Transformation

Photos used in Yext are hosted and served on Cloudflare. This allows you to perform a variety of image transformations by adding formatting to the serving URL as path parameters. See Cloudflare’s documentation for the full list of formatting options.

Note also that dynamic image transformations are only available for the supported image formats listed in Cloudflare’s documentation.

If you are transforming a file field type URL to be served, a.mktgcdn.com/f/{businessID} should be adjusted to dyn.mktgcdn.com/p/.

If you are transforming a photo field type URL to be served, a.mktgcdn.com should be adjusted to dyn.mktgcdn.com and the dimensions and extension at the end of the URL should be dropped.

The served image URL should have the following format: https://dyn.mktgcdn.com/p/{image_UIUD}/{options}

For example, if you wanted to apply the following transformations to a photo uploaded to Yext:

  • Add a blur
  • Set the size to be 1000x1000
  • Crop the rest of the image larger than 1000x1000
  • Rotate it 90 degrees

The process would be as follows:

  1. Fetch the hosted image’s URL: https://a.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/1701x1295.jpg

  2. Change the base URL to dyn.mktgcdn.com: https://dyn.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/

  3. Add the transforms to the image’s URL: https://dyn.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/blur=20,height=1000,width=1000,fit=crop,rotate=90

Note that Yext does not currently support serving GIFs, so using Cloudflare transform options such as anim will not work.

Using Served Images on React Front-Ends

The Image component can be used to serve pictures from Yext Content into your downstream experiences.

Generated Thumbnails (Legacy)

Before leveraging the dynamic transform options in Cloudflare, Yext would proactively generate a set of thumbnails in various sizes for any uploaded image.

Today, Yext will still generate these thumbnails when a photo is uploaded, however, we recommend leveraging the dyn.mktgcdn.com base URLs and Cloudflare resizing for more granular control over served images. To optimize for page speed and ensure that all devices can render images correctly, we create a set of thumbnails at several sizes and normalize the image format to something that all devices can consume.

Using Thumbnails on Your Site

Thumbnails are created using your photo’s original dimensions, in addition to thumbnails which are scaled to fit within each of these fixed bounding boxes:

  • 1900x1900
  • 619x1000
  • 600x450
  • 196x400

The photo is never enlarged, nor is the aspect ratio changed.

Thumbnails can be accessed using URLs of the following format:

FIT.mktgcdn.com/p/UUID/WIDTHxHEIGHT

Similar to dynamic photo serving - if you are using a file field to store photos and wish to serve them, the base URL needs to be changed from a.mktgcdn.com/f/{businessID}/UIUD to FIT.mktgcdn.com/p/UIUD/WIDTHxHEIGHT.

FIT specifies one of two modes that allow dynamic selection among a set of thumbnails:

  • dynl.mktgcdn.com — “at least” as large, on one dimension
  • dynm.mktgcdn.com — “at most” as large, on either dimension

This dynamic URL will return the thumbnail which is the best fit for the given FIT and dimensions.

Depending on the input format, the thumbnail’s format will be JPEG or PNG. The system also creates and serves WEBP variants on demand.

Back
< File Field Type
Next
Content System Limits >
Feedback
<% elem.innerText %>