Learn GatsbyJS by creating a tourism site -19

Image for post
Image for post
Train station near hampi

Welcome to part-19 of the series. You can find part-18 here.

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.

Image for post
Image for post
photos-template.js

Rest of the chapter is exclusive content and will be in my upcoming book Gatsby Cookbook.

Image for post
Image for post

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.

Image for post
Image for post
Rail 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.

You can find the last part here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store