Formatted gallery section

#Overview

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.

#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 pre-defined 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 project

This 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:

1. 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.
2. 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:

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:

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:

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:

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:

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:

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:

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:

We'll click Add to save.

We'll follow the same steps to add the image size enumeration, using the following information:

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:

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

• Enumerations
• Components documentation