# Formatted gallery section
This guide shows how to build an image gallery component that lets you select the number of columns the gallery will use to display the images, and has dropdowns for image size and aspect ratio.
## Overview
**Do you have suggestions?:**
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.
## 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.](https://hygraph.com/classic-docs/recipes/image-gallery/formatted-gallery-section#clone-project) 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.
**Note:**
- 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:](https://hygraph.com/classic-docs/recipes/image-gallery/formatted-gallery-section#step-by-step-guide) Use this guide to create a formatted image gallery component that you can use in your project.
- [Path 2:](https://hygraph.com/classic-docs/recipes/image-gallery/formatted-gallery-section#clone-project) 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](https://app.hygraph.com/clone/c78b4279164e4195937d3e890397c65b?name=Hygraph%20Recipes%20-%20Image%20galleries)
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.
[Video](https://www.youtube.com/watch?v=8THGK2wMOdM)
### 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
- [Enumerations](https://hygraph.com/docs/developer-guides/schema/using-enumerations)
- [Components documentation](https://hygraph.com/docs/developer-guides/schema/components)
**Would you like to know more?:**
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](https://hygraph.com/classic-docs/recipes/image-gallery/section-index) for you to look into!
**Do you have suggestions?:**
Join our community to suggest new recipe ideas!