All language subtitles for 002 Image Cards_en

We added an image to each review page.

Now let's do the same for the

page listing all the reviews.

Let me go and open the right file in the editor.

In this page we could show a card for each review,

with an image and the game title.

So let's copy the image element

from a review page,

since it will be very similar.

Here we can display the image inside the Link,

so it will be clickable.

But let's make it smaller, like 320 by 180,

because we'll have several images on this page.

That looks good.

Let's do the same for the first item.

This one is "hollow-knight",

so we need to load the right image.

That's fine.

I'll put the Developer Tools on one side for now,

to be able to see the full page in the browser.

Now, let's style each item as a card.

First of all, let's set the list element

to use flexbox, displaying the items in a column,

and with a gap between them.

This will make sure there's some

space between each item.

Now, let's style each item, starting

from the first one.

We want it to have a border.

It's not that easy to see, but there

is a thin gray line around it.

We'll want the item to be the

same width as the image,

so I'll use "w-80", that just

happens to be "320px"

which is exactly the same width

we set on the image.

Ok, the border is now aligned with the image.

It's still not very visible though;

let's try setting the background to "white".

This way the card stands out a bit more.

Now, we should center the card title.

Let me wrap the text in an "h2" heading,

so we can then add some styles to it.

We can use "text-center".

That's good, but we need some

vertical padding as well.

We can remove the margin below

the image at this point.

Ok, the title looks about right.

Now, we could make the card rounded as well.

That's nicer, but the image

corners don't quite match.

Since it's now part of the card,

the image shouldn't be rounded at the bottom.

We can change the image to use "rounded-t",

that will only apply the rounding to the top.

Ok. As a final touch, let's add a "shadow",

which will give the impression that

the card is slightly raised.

We may also want to give some visual feedback

when the user moves the mouse over the card,

to show that that item is selected.

Let's use the "hover:" modifier,

and set the "shadow" to "extra-large"

for this state.

This way, if we move the mouse over,

you can see that the item appears

to be lifted up slightly.

Ok, I think this card looks decent now.

Let's apply the same styles to the other item.

It's probably quicker if I

overwrite the whole thing,

and then replace "hollow-knight"

with "stardew-valley" everywhere,

including in the title text.

Ok, the Reviews page now shows two nice cards,

and it will highlight the selected

item with a bit of a shadow.

At some point we'll use the same

code for all the items,

without duplicating the styles,

but this works fine for now.

I should also mention that

so far we didn't really think

about image optimization.

If we use the Developer Tools

and inspect one of these images,

you can see that it's rendered as 320x180

(minus 1 pixel for the border)

but the original image is 1280x720.

So, this image file is too large.

Ideally we should resize each image to match

the dimensions we use in each page.

We could keep different files

in our "public" folder,

with smaller and larger images for each game.

But we're not actually going

to worry about this for now,

because later on we'll see how Next.js

can automatically optimize our images.

That feature however is not compatible

with doing a static HTML export,

so we'll cover it in a later section,

when we get to features that require

running a Node.js server.