Alt Text

Welcome to part-19 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 we will start adding code for displaying the large image, when we click on the Open button inside the photo in Photos page.

For this we will follow exactly the similar process which we followed in part-16 of the series.

So, create a file photos-template.js inside templates folder. And for now put a dummy data, which we are going to replace soon.

photos-template.jsphotos-template.js

Let’s first write our graphql query in Graphiql playground.

PlaygroundPlayground

Next, open gatsby-node.js and add this new query.

gatsby-node.jsgatsby-node.js

Next, we will loop through the node and create the page.

gatsby-node.jsgatsby-node.js

To, test whether everything is working we need to stop and start gatsby develop in terminal. After that move to any non-existing page in the browser and you can see those pages been created.

New pagesNew pages

Click on any one of them and you will get our dummy text.

dummy datadummy data

Let’s first create the query to show the single blog photo in our playground.

Graphiql playgroundGraphiql playground

Next, let’s add this query to our photos-template.js and also don’t forget to change src in images to …GatsbyContentfulFluid

photos-template.jsphotos-template.js

Next, we will display the image along with the name and description. We need to import some components as earlier and we are also using the css from our blog module. We are showing the image through the Img from gatsby-image

Displaying the imageDisplaying the image

Now, when we click on any Photo in the Photos page, we get the amazing full photo shown. Feel free to use it in any of your personal work.

Rail stationRail station

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

I am almost done with the series, expect to buy a domain name and update the netlify settings to host it. Plus some plugins also needed to be added for SEO and other stuff. It will also be slowly adding most of my Hampi trips photos to Photos page for royalty free use.

This post is also available on DEV.