Related content block

#Overview

This guide shows how to build a related content block component containing a title, a body, an image, and a reference.

It will allow you to add related content blocks to your content entries.

Related content block component

#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 basic project. If you're already familiar with Hygraph and only want to follow the parts of the tutorial where you create the page sections, you can start here.
  • OPTION 3: Clone the entire cookbook. This is the way to go if you're curious about how the page sections are made but don't want to follow the step-by-step creation process. This project contains the entire Page Sections Cookbook so you can compare them, or look into what instances they contain.
  • OPTION 4: Use an existing project of yours. If you have a project already and want to add this page section 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:

• References: References are relations between two or more content entries in your project. With references, you can reuse content entries by connecting them. Once the relation is configured, you can also use it to create related content from the content creation screen.

• 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 related content block component that you can use in your project.
• Path 2: Clone one of the projects we created for you. You can clone a project that only contains the basic models so you can work on the page sections right away, or you can clone the project that contains the entire Page sections cookbook to compare the different section configurations without having to clone multiple projects.

#Clone project

#Clone the basic project

We have prepared a project that contains all the base schema elements you need to add to your page sections, in case you don't want to build them from scratch:

Clone this project

If you decide to clone this project, you can skip the base schema elements creation part of this tutorial, and start from this step.

#Clone the complete cookbook

We have prepared a project that contains the entire Page sections cookbook:

Clone this project

This cookbook contains all the recipes we have so far to create page sections, so you can compare the different banner configurations without having to clone multiple projects.

To find this particular recipe in the cookbook project, navigate to the schema and look for the "Related content block" component.

#Step-by-step guide

In this guide, we will create a related content block component. Before we can build this, we need to create other schema elements that will be a part of it.

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

1. Create the referenced models: We will create 3 sample models - Author, Book, and Shop - to use in our internal links.
2. Create the related content block component: We will create a related content block component that you can later add as component field to your models.

#1. Create the basic models

For this example, we'll go with the idea of an online bookshop that has real world subsidiaries, so we'll create 3 models:

• Author
• Book
• Shop

#Author model

Author model

Let's start with the Author 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 a simple model that will contain basic author information, we'll add the author name, bio, and image.

Let's start with the author name, 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 a Rich text field, which will our author's bio. We'll select the Rich text field from the right sidebar and use the following information to create it:

We'll click Add to save.

Finally, we'll add an Asset picker field, which will be our author's image. We'll select the Asset picker field from the right sidebar and use the following information to create it:

We'll click Add to save.

Now that we're done with our Author model, let's move on to the Book model.

#Book model

Book model

Our second model will be the Book 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 a simple model that will contain basic book information, we'll add the book name, description, cover image, and a relation to the author.

Let's start with the book name, 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 a Rich text field, which will our book description. We'll select the Rich text field from the right sidebar and use the following information to create it:

We'll click Add to save.

Now let's add an Asset picker field, which will be our book cover image. We'll select the Asset picker field from the right sidebar and use the following information to create it:

We'll click Add to save.

Finally, we want books and authors to be connected. A great way to do this is using a two-way reference in our Book model, that will create a relation with the Author model. This type of relation will also create a reverse field that we will later be able to see in our Author model, connecting back to our Book model.

We'll find the Reference field 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.

Now that we're done with our Book model, let's move on to the Shop model.

#Shop model

Shop model

Our final model is the Shop 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 a simple model that will contain basic shop information, we'll add the shop name, address, picture and location.

Let's start with the shop name, 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 another Single line text field for the shop address.

We'll use the following information:

We'll click Add to save.

Finally, we'll add an Asset picker field, which will be our shop's image. We'll select the Asset picker field from the right sidebar and use the following information to create it:

We'll click Add to save.

Finally, we'll add a location field so Editors can show the shop location on a map. We'll select the Location field from the right sidebar and use the following information to create it:

We'll click Add to save.

Now that we're done with our three models, let's create our links component!

#2. Create the related content block component

Now that we have all the models that we need to relate to our related content block component, we'll go ahead and create it!

Related content block component

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 want our block to have a title, a body, an image and we also want the possibility to relate existing content entries from the other models to it.

We'll start with the title. Let's add a Single line text field using the following information:

We'll click Add to save.

Next, we'll add a Rich text field, which will be our block body:

We'll click Add to save.

Next, we'll add an Asset picker field, which will be our block's image. We'll select the Asset picker field from the right sidebar and use the following information to create it:

We'll click Add to save.

Finally, we will add a Reference field from the right sidebar, so we can use it to relate content entries from other models.

We'll use the following information:

We'll click Add to save.

This is how you create a simple content block component containing some basic information - title, body and image - and the possibility to reference content entries from other models in your schema.

#Useful links

• Enumerations
• Components documentation
• References documentation