Frequently Asked Questions

Product Overview & Integration

What is the Hygraph-Imgix integration and what can it be used for?

The Hygraph-Imgix integration allows you to connect your Hygraph project with Imgix, a service for creating, transforming, and optimizing images and videos. With this integration, you can serve assets from your Hygraph project and from other Imgix sources directly within your Hygraph content entries, enabling faster webpages, creative freedom, and simpler development. Learn more.

What are the benefits of using Imgix with Hygraph?

By integrating Imgix with Hygraph, you benefit from Imgix’s advanced processing and delivery capabilities, which result in faster webpages, creative freedom for content editors, and simpler development workflows. Content editors can add assets from Imgix sources directly within Hygraph, leveraging Imgix’s optimization services for an enhanced digital experience. Source

Getting Started & Prerequisites

What do I need before I can use the Hygraph-Imgix integration?

To use the Hygraph-Imgix integration, you need:

Apps are environment-specific, so configuration is applied per environment. Source

Configuration & Setup

How do I configure a source in Imgix for use with Hygraph?

To configure a source in Imgix:

  1. Create a new Imgix source, selecting Web Folder as the storage type. See Imgix's documentation for details.
  2. Enter the base URL for your Imgix source. For Hygraph's legacy asset system, use https://media.graphassets.com/. For the Hygraph Asset Management system, copy the image address from the asset tab and use the part before /output=....
  3. Use the default Imgix subdomain or configure your own, then click Deploy Source.
For other source types, refer to Imgix's documentation.

How do I install and configure the Imgix app in Hygraph?

To install the Imgix app in Hygraph:

  1. Go to the Imgix App page and click to install.
  2. Select your project and environment, then click Install app.
  3. Authorize the app when prompted.
  4. Configure the app by selecting the source type (Webfolder for Hygraph assets or Other for external sources).
  5. Enter your Imgix source domain in the Source URL field (e.g., https://my-assets.imgix.net).
  6. If using other sources, provide your Imgix API key and Source ID.
  7. Click Save config settings to finish. A notification will confirm the changes.
See official documentation for details.

How do I add the Imgix field to my Hygraph model?

To add the Imgix field to your model:

  1. Go to the Schema builder in Hygraph.
  2. Select the model you want to add the Imgix field to.
  3. Choose the Imgix field from the Add fields sidebar.
  4. Fill in the Display name (API ID auto-fills). Optionally, add a Description.
  5. Set field options (allow multiple values, localization) as needed.
  6. Click Add to save the field.
See official documentation for more details.

How do I use Imgix assets in my Hygraph project?

To use Imgix assets in your Hygraph project:

  1. Go to the Content editor in Hygraph.
  2. Select the view configured for Imgix.
  3. Click + Add entry or edit an existing entry.
  4. In the Imgix section, click Add assets to select and add assets to your content entry.
  5. Select the desired assets and click Add selected assets. If your field allows multiple values, you can select multiple assets.
  6. Organize or remove assets as needed, then click Save or Save & Publish.
See official documentation for more details.

Troubleshooting & Known Limitations

What are the known limitations of the Hygraph-Imgix integration?

Known limitations include:

See official troubleshooting guide for more details.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for its hosting infrastructure, and GDPR compliant. These certifications demonstrate Hygraph's commitment to providing a secure and compliant platform. Learn more.

Support & Resources

Where can I find more information or support for the Hygraph-Imgix integration?

You can find more information in the official Hygraph-Imgix integration documentation and the Imgix documentation. For troubleshooting, refer to the troubleshooting section. For additional support, you can access Hygraph's documentation, join the community Slack channel, or contact support via chat, email, or phone.

Help teams manage content creation and approval in a clear and structured way
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Connect your Hygraph project to Imgix

Imgix lets you create, transform, and optimize images and videos.

#What you can do with the Hygraph-Imgix integration

With the Imgix app, you can serve assets from your Hygraph project and from other Imgix sources to add to your content.

#Prerequisites to use this integration

  • You must have a Hygraph account. If you don't have one, you can create one here.
  • You must have a Hygraph project with at least one model.
  • You must have a Imgix account. If you don't have one yet, you can create one here.

#Configure a source

The first thing we need to do is configure a source in your Imgix account. The configuration flow will vary depending on whether you want to serve assets from your Hygraph project or from one of the other configurable sources.

#Using assets from Hygraph

  1. Create a new Imgix source, selecting Web Folder as a Storage Type. This document contains more details about the Web Folder source.

  2. Enter the base URL for your Imgix source. If your Hygraph project is using the Legacy asset system, you will need to use https://media.graphassets.com/ as the base URL. If your project uses the Hygraph Asset Management system, follow the instructions below to obtain the URL, go to the Assets tab in the Hygraph app and right click any asset thumbnail, then select Copy Image Address at the bottom of the preview. Keep the part before /output=... and delete the rest.

    Base URL example: If your copied URL is

    https://eu-central-1-shared-euc1-02.graphassets.com/clv45iyzm039407umd5w7aemt/output=format:jpg/resize=width:59,height:59,fit:crop/clw6dt8hndhuu07w6tcaqt9h3

    You should use the following as the base URL:

    https://eu-central-1-shared-euc1-02.graphassets.com/clv45iyzm039407umd5w7aemt

  3. Use the default Imgix subdomain or configure your own, and press the Deploy Source button.

#Using assets from other sources

This flow is different depending on the selected source. Check out Imgix's documentation for instructions on configuring your Imgix source.

#Install the Imgix app

Click here to install the Imgix App on Hygraph, then follow these steps:

The installation flow will vary depending on whether you want to serve assets from your Hygraph project or from one of the other configurable sources.

#Install using a Hygraph source

  1. Use the dropdowns to select which project and environment you want to install the app in, then click Install app.
  2. The permissions pop-up will display. Clicking Authorize app finishes the installation and takes you to the app configuration screen.
  3. Next, you need to configure the app. To do that, you first need to select Webfolder as a source type in the Hygraph app configuration - this should be the default value.
  4. Enter your imgix source domain in the Source URL field, prefixed with https://.
  5. Click Save config settings to finish the configuration process. A pop-up notification in the bottom right corner of the screen will indicate that the changes have been saved.

#Install using other sources

  1. Use the dropdowns to select which project and environment you want to install the app in, then click Install app.

  2. The permissions pop-up will display. Clicking Authorize app finishes the installation and takes you to the app configuration screen.

  3. Next, you need to configure the app. To do that, you first need to select Other as a source type in the Hygraph app configuration.

  4. Enter your imgix source domain in the Source URL field, prefixed with https://.

  5. Fill in the API Key field with an API key obtained from your Imgix account.

  6. Fill in the Source ID field with the ID if your Imgix source. To find your source ID, go to your Imgix dashboard, navigate to Sources, and select View on the source you want. You will find the source ID under the Source ID field.

  7. Click Save config settings to finish the configuration process. A pop-up notification in the bottom right corner of the screen will indicate that the changes have been saved.

#Add the Imgix field to your model

  1. Navigate to the Schema builder.
  2. Select the model that you want to add the Imgix field to.
  3. Select the Imgix field from the Add fields right sidebar.
  4. Complete the Display name field, and the API ID will be auto-filled by the system. Optionally, you can also add a Description.
  5. This screen also allows you to control different properties of your Akeneo field: you can allow multiple values, or you can localize the field, by selecting the checkboxes in the Field options section.
  6. Click Add.

#Use Imgix in your Hygraph project

  1. Navigate to the Content editor.
  2. Select the view that you configured the Imgix for.
  3. Click + Add entry to create a new entry or, alternatively, edit an existing entry by clicking on the pencil icon.
  4. Locate the Imgix section of the screen and click on Add assets. This opens a new screen where you can select and add assets to your Hygraph content entry.
  5. Select the asset(s) you want, and then click Add selected assets. If your Imgix Field configuration allows multiple values, you will be able to select multiple assets.
  6. After selecting the asset(s) you want and returning to the content entry, your selection will display on the list. You can optionally use the six dots icon to drag and drop the assets on the list to organize them in the order you want, or click on the X on the right of an asset card to remove it form the list.
  7. Finally, click Save or Save & Publish, as needed.

#Troubleshooting

  • If you replace an asset file in Hygraph, it will not update and show the old version instead. Please delete the asset completely and create a new one if you want to change the displayed image.

  • Sometimes, fields might get clipped and the button to add or change assets might not be visible. Refreshing the page resolves the issue. This a rare but known bug for Hygraph apps. If the issue still persists after a refresh open an issue.

#Resources