In the last article, I talked about how I set up catalog creation and listing previously made catalogs. This article is a continuation and the last part of the building the home page article. In this article, I’ll walk you through how I set up catalog previews in the Whinst web app. Let’s dive in🏄🏾.
Setting up previews👨🏾💻
As mentioned in the previous article💁🏾♂️, the home page of the Whinst web app has a button that takes you to the catalog creation page where a new catalog can be created, it also has a list of all the previous catalogs a user created. These previously created catalogs have little preview images of the images used in the catalog.
What I worked on was displaying these images and making them responsive on every kind of device type i.e. small, medium and large. To achieve this I first created containers that are responsive using the div component to hold these images. I then got some sample images from a free image API to display in these containers. For these images to fit into this outer container I applied the relative property to the div, without this the images were covering the whole screen which we do not want🙄. The code below shows how I did this
<div className='flex justify-center'>
<div className='border-1 w-24 h-24 relative'>
<Image fill alt='An image' src="https://images.com" />
</div>
</div>
In the code, there’s the outer div which is just a container for everything. I applied the flex and justify-center properties to neatly align the objects within it. The inner div is the container that holds the image, it has a simple border property for me to easily see it, height and width and most important the relative property which makes the image fit neatly inside the container. Lastly, there’s an Image tag that is inbuilt into Nextjs which efficiently generates images.
With the home page now completed I’ve since moved on to the creating catalog page which I’ve already finished and I’ll soon write about in the next article. Thanks for reading🙏.