The formatted gallery section is a reusable component in Hygraph that allows you to create image galleries with customizable format options. You can add as many images as you need, select the number of columns for display, and use dropdowns to choose image size and aspect ratio. This component is designed for flexibility and can be reused across different models in your Hygraph project. Learn more.
To create a formatted gallery section, you need a Hygraph account and an active project. You can either create a new project, clone the provided Image Galleries Cookbook project, or use an existing project. Make sure to consider your plan limits when adding new recipes. Sign up here if you don't have an account.
To create a formatted image gallery component, follow these steps:
The formatted gallery section component includes the following fields:
Yes, Hygraph provides a ready-made project called the Image Galleries Cookbook, which contains all the recipes for creating image galleries, including the formatted gallery section. You can clone this project to explore different gallery configurations without starting from scratch. Clone the project here.
To add multiple images, use the Asset picker field in your formatted gallery section component. When configuring the field, select the 'Allow multiple assets' checkbox. This enables you to upload and manage several images within a single gallery entry. See the quickstart guide.
Enumerations in Hygraph are predefined sets of values that can be used as dropdown options in your schema. In the formatted gallery section, enumerations are used for selecting the image aspect ratio and image size, allowing editors to standardize formatting across galleries. Learn more about enumerations.
The formatted gallery section includes a number field called 'Columns', where you can specify the number of columns (between 2 and 4) for your gallery layout. The field can be set with a default value and input validation to ensure the value stays within the allowed range.
Yes, by creating the gallery as a component, you can reuse its structure in different models throughout your Hygraph project. This makes it easy to maintain consistency and efficiency when managing multiple galleries.
The formatted gallery section offers several benefits:
Hygraph offers multiple image gallery recipes beyond the formatted gallery section, such as galleries with additional information and styled galleries. You can explore these configurations in the Image Gallery Section Index to find the best fit for your project needs.
You can find more resources in the Hygraph documentation, including guides on enumerations, components, and image gallery recipes. For additional help, join the Hygraph Community Slack to ask questions or suggest new recipe ideas. Useful links include the Enumerations Guide and Components Documentation.
Join our community to suggest new recipe ideas!
This guide shows how to build an image gallery component with format dropdowns and columns.
This image gallery uses assets in your Hygraph project and allows you to add as many images as you need. It also lets you select the number of columns the gallery will use to display the images, and has dropdowns for image size and aspect ratio.
Formatted gallery section component with fields
REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.REQUIRED: You need to have a Hygraph project.
OPTION 1: Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.OPTION 2: Clone the entire cookbook. This is the way to go if you're curious about how the galleries are made but don't want to follow the step-by-step creation process. This project contains the entire Image galleries Cookbook so you can compare them, or look into what instances they contain.OPTION 3: Use an existing project of yours. If you have a project already and want to add this image gallery to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.In this guide, you'll work with a number of schema elements. Let's look into them:
Enumerations: an enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.
Component: a predefined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.
Basic component field: a component is a special field type in your Hygraph schema that defines which components of which type can be used in a model. Component fields can be of basic or modular types. A basic component field can only have one component attached to it. You can limit the number of component instances to one, or allow multiple component instances to be added in the content entry.
This guide offers two paths:
We have prepared a project that contains the entire Image galleries cookbook:
Clone this projectThis cookbook contains all the recipes we have so far to create image galleries, so you can compare the different gallery configurations without having to clone multiple projects.
To find this particular recipe in the cookbook project, navigate to the schema and look for the "Formatted galery secton" component.
In this guide, we will create an image gallery component with columns and format dropdowns.
We will divide this process in steps to make it more manageable:
We want our image gallery to have dropdowns that will let us select the image aspect ratio and size.
We'll start by creating the enumeration for aspect ratio. We'll click + Add next to Enumerations and use the following information:
| Field | Input |
|---|---|
| Display Name | Aspect ratio |
| API ID | AspectRatio |
Next, we need to add enumeration values. These are the options we will get when using this later on as a dropdown menu.
For every enumeration value, you need to enter a Display name, an API ID, and click Add.
We'll add the following values:
| Display name | API ID |
|---|---|
| Original | original |
| Four by three | fourByThree |
| Sixteen by nine | sixteenByNine |
| Three by two | threeByTwo |
| Square | square |
We'll click Add enumeration to save.
Next, we need to create an enumeration for image size selection. We'll repeat the process using the following information:
| Field | Input |
|---|---|
| Display Name | Image size |
| API ID | ImageSize |
Once more, we need to add enumeration values. For this example, we'll use four size options - full size, large, medium and small.
We'll add the following:
| Display name | API ID |
|---|---|
| Full size | fullSize |
| Large | large |
| Medium | medium |
| Small | small |
We'll click Add enumeration to save.
In the next step, we will create our image gallery component and include them as enumeration fields.
Now that we have the two enumerations that will be a part of our final gallery component, we'll go ahead and create it.
We'll click + Add next to Components and add it using this information:
| Field | Input |
|---|---|
| Display Name | Formatted gallery section |
| API ID | FormattedGallerySection |
| API ID Plural | FormattedGallerySections |
We'll click Add component to save, and then we'll start adding instances to it.
We'll start with a Single line text field, which will be our gallery section title. Let's add it by clicking Add on the Single line text field card on the right sidebar.
We'll use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Gallery section title |
| Settings | API ID | gallerySectionTitle |
| Settings | Description | Add a title here |
| Settings | Use as title field checkbox | Select this checkbox |
We'll click Add to save.
Next, we want the possibility to add multiple images to our gallery, so we'll add an Asset picker field that allows multiple values, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Images |
| Settings | API ID | images |
| Settings | Description | Add your images |
| Settings | Field options | Select the Allow multiple assets checkbox |
We'll click Add to save.
Now its time to add the enumerations we created earlier as enumeration fields.
We'll start with the aspect ratio enumeration. We'll find the Enumeration field on the Add fields sidebar, and click Add on the field card.
We'll use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Images aspect ratio |
| Settings | API ID | imagesAspectRatio |
| Settings | Enumeration | Select "aspect ratio" from the dropdown menu |
| Settings | Description | Select the aspect ratio for the images in this gallery |
We'll click Add to save.
We'll follow the same steps to add the image size enumeration, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Images size |
| Settings | API ID | imagesSize |
| Settings | Enumeration | Select "Image size" from the dropdown menu |
| Settings | Description | Select a size for the images in this gallery |
We'll click Add to save.
Finally, we'll add a Number field, which will allow us to indicate how many columns the gallery should have. We'll find it on the Add fields right sidebar, click on it, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display Name | Columns |
| Settings | API ID | columns |
| Validations | Limit input range checkbox | Use the dropdown to select Between and then add the values 2 and 4. In the Custom error message field, write "Please add a value between 2 and 4.". |
| Advanced | Set initial value checkbox | Select this checkbox and set the Initial value field to 2. |
We'll click Add to save.
With this configuration, we ensure that the field has a default initial value, but also allows editors to write a value between 2 and 4 instead. This way, while we allow editors to input a numeric value, we also ensure that the value added falls within a range that we set.
This is how you create an image gallery component containing a title, an asset picker to add multiple images, dropdowns for format that will let you select a gallery aspect ratio as well as an image size, and a number field to set up the number of columns. Creating the gallery as a component allows you to reuse the structure in different models in your project.
We have more resources for you!
This is one way of creating an image gallery using Hygraph. If you want to try out more gallery configurations, we have other image gallery types for you to look into!
Join our community to suggest new recipe ideas!