Formatted gallery section
#Overview
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
#Prerequisites
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.
- Take plan limits into consideration when adding a recipe to your own project.
- Are you new to Hygraph? You may want to check out our Getting Started Tutorial!
#Core concepts
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.
#What you can do
This guide offers two paths:
- Path 1: Use this guide to create a formatted image gallery component that you can use in your project.
- Path 2: Clone the project that we created for you. It contains the entire Image galleries cookbook to compare the different gallery configurations without having to clone multiple projects.
#Clone project
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.
#Step-by-step guide
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:
- Create the enumerations: We will create 2 enumerations that will later help us format our galleries; one for image size and another for aspect ratio.
- Create the gallery component: We will create an image gallery component that you can later add as component field to your models.
#1. Create the enumerations
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.
#2. Create the gallery
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.
#Useful links
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!