Assets

Assets in Hygraph refer to any image or video. As such, any image or video used within any model in Hygraph must be uploaded into the Hygraph Asset library before it can be used on a webpage. Typically, assets are uploaded via the model of the section or page it will be displayed on. Once an asset is uploaded it can however be referenced (used) by other models, it is thus not needed to upload assets twice.

The asset library is storefront-agnostic. That is, assets can be shared and freely reused and combined across different storefronts, even though assets do have a "storefront" field.

To navigate to the Assets section, via the left menu pane select Assets.

System fields you will see but do not edit for content: handle, fileName, height, width, size, mimeType, url, upload. After you change an asset, publish the asset first, then publish the page(s) that use it. See Page revalidation. Prefer reusing an existing asset over uploading duplicates.

Localizations

Asset localization works differently from other Hygraph models. For other models like Product, Category, etc, an unfilled localization will not show on the website. So a product that has no de_DE localization, will not be published on a German shop. Assets however, DO: the image of the "default" localization is shown (unless explicitly deactivated by the field Has "default" locale as fallback, see below). You only need to add a localized image when the image itself must change for that language — for example when pack copy or other text is visible on the picture.

Localizations are configured on the asset in the right menu pane: add a locale with the plus icon, remove it with the trash-can icon. A locale that has not been created yet shows as greyed out with a plus icon.

Fields

Add an asset with the Upload or + Add entry button. They basically come down to the same thing.

These are the fields on an assets, below they are explained one by one:

Alternate Text

The Alternate Text provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). It is an optional and localized simple text field, it should be clear and concise. We recommend filling it.

Zoom focus

If there is need to cut off the image on certain screen sizes, we will zoom in on this part of the image. If nothing is chosen, the default is Center. There is a searchable drop-down selection with all options that can be selected. Be aware when the asset is used on multiple pages, changing this setting will affect all pages the asset is used on.

Has "default" locale as fallback

When true, the default asset (image) will show as fallback if a localized version is not available. This is default behavior: we normally want an image to show even though we only uploaded the default localization.

When false however, the asset will not show for a localization is its localized version is not available.

Tag (tag) — optional internal label for finding assets in Hygraph (campaign, season). Not shown on the shop.

Product properties and marketplace logos often go through Static Image, which then points at an Asset. See Static Images, Product Properties and External Market Places.

Video Placeholder

This placeholder is used to display a video before it is loaded. Ideally, this is the first frame of the video.

Fields with the word "Related"

Fields like "Related Blog Type", "Related Video placeholder", etc, can be ignored. If on a blog type, this asset is chosen, it will show here. But in practice, you will always select the image on the blog, instead of choosing the blog on the image.

Placeholder

This is an automatically generated base64 encoded placeholder image that allows for blurry loading of the image. Base64 is a raw text data format that can be used to encode the image. Do not use this field; a script automatically fills it on Save & Publish.

Relations fields

On an asset many relation fields can be found. There is no need to fill these, because in practice, this will happen the other way around.
Example: "Related Blog Type" is a relational field on the Asset. When you are editing a Blog Type, then link an asset to that blog type, this relational field will automatically be filled on the Asset. So no need to think about this field while you are in the Asset view itself.