Gallery with information

#Overview

This guide shows how to build an image gallery model containing a basic component field that will allow you to add multiple images, each with its own title and description.

Gallery with info model 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:

• Model: Your schema is the content structure of your project. You can define your schema by creating models and adding fields, reusable components, and sidebar widgets to them, as well as integrating remote sources and establishing relationships with other models.

• 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 an image gallery model where all images have a title and description.
• 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 "Gallery with info" model.

#Step-by-step guide

In this guide, we will create an image gallery model with a component field for image title and description.

We will divide this process in steps to make it more manageable:

1. Create the image component: We will create an image component that will contain images and their metadata.
2. Create the gallery model: We will create the gallery model and add the component we previously created to it.

#1. Create the image component

We will start by creating our image component. It should allow us to add an image along with a title and a description.

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 image component 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'll add an Asset picker field that will let us add images, using the following information:

We'll click Add to save. In this case we will not allow multiple values, because we want to add a single image per title & description.

Finally, we'll add a Multi line text field, for our image description. We'll select it from the right sidebar, and use this information:

We'll click Add to save.

Now that our component is ready, let's move on to model creation.

#2. Create the gallery model

Now that we have a component that lets us add an image with title and description, let's create a gallery model.

In the Schema builder, we'll click +Add next to Models, and use the following information:

We'll click Add model to save.

Our model has been created but it's empty. To create our image gallery model, we'll add the gallery title, and the component we created earlier.

Let's start with the title, as a Single line text field. We'll find it on the Add fields right sidebar, and click Add on the field card to add it.

We'll use the following information:

We'll click Add to save.

Next, we'll add our "image with info" component. We'll make sure the component allows multiple values, so that it lets us add multiple images with title and description to a content entry.

We'll find the Basic component field on the Add fields right sidebar, click Add to add it, and use the following information:

We'll click Add to save.

This is how you create an image gallery model containing a title and a component that will allow you to add multiple instances of an image with a title and description.

#Useful links

• Enumerations
• Components documentation