Alt Text

Welcome to part-18 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

In this part i want to create a new page — Photos. It will contain most of the awesome photos, it took during my hampi vacation. All of these photos will be royalty free, so fell free to use them.

To create a new link in both Navbar and footer component, we just need to add it in links.js file.

links.jslinks.js

And it will be added to both Navbar and Footer in the website.

New link addedNew link added

Then let’s create a file photos.js inside pages folder. It is almost similar to blog.js page, except the image which is hampiPhoto.jpg

photos.jsphotos.js

Next, let’s create a folder Photos inside components directory. The create a file PhotoList.js inside it. Right now only putting a dummy content inside it to test it.

PhotoList.jsPhotoList.js

Now, when we open the Photos page it displays everything correctly.

Photos pagePhotos page

Before adding code in the file, we need to create content in contenful and also need to test the query. So, head over to contentful and create a new Content Model.

New modelNew model

Now, i have added four fields and all of them are required fields. They are as below. The detail process to create them can be found in the part-9 of the series here.

FieldsFields

After saving the above by clicking on the Save button, let’s add some content first in Content tab.

Adding ContentAdding Content

Now, in the content page i am giving a name, slug, brief description and two photos. Actually they are same but the first one is smaller and 650x487 pixels and will be displayed on the Photos page. The larger and original one will be displayed once we go to the new page with the slug mechanism. This is the photo, which anyone can download for their personal use.

Content addedContent added

I have added five content from my Hampi trip as of now. Will add hundreds more later.

Five contentFive content

After any change in contentful, you have to restart the dev server by closing and starting gatsby develop from the terminal. Also, refresh your Graphiql playground at http://localhost:8000/___graphql to check the query. You can run the below query to get all the data back from contentful.

All data from contentfulAll data from contentful

Now, let’s add our query to PhotoList.js to get all data from contentful. We are using the similar code which we used for BlogList.js

PhotoList.jsPhotoList.js

Now, let’s check whether we are receiving the data by opening the console and going to Photos page.

Data from contentfulData from contentful

Now, that we are receiving the data it’s time to show them in the component. First let add some more imports at the top in PhotoList.js

PhotoList.jsPhotoList.js

Next, let’s update inside the return statement to pass each node through a map to the PhotoCard component.

PhotoList.jsPhotoList.js

Now, create PhotoCard.js inside Photos folder. Add the below content to display the content.

PhotoCard.jsPhotoCard.js

Now, when we go to our Photos page in the browser we get all the five photos.

All photosAll photos

This completes part-18 of the series. You can find the code for the same here.

This post is also available on DEV.