1
00:00:03,000 --> 00:00:05,226
We're working on the user interface

2
00:00:05,226 --> 00:00:06,308
for our HomePage,

3
00:00:06,308 --> 00:00:08,407
and we created a responsive grid,

4
00:00:09,035 --> 00:00:11,831
that automatically shows 1 or 3 columns

5
00:00:11,831 --> 00:00:13,910
depending on the screen size.

6
00:00:14,481 --> 00:00:17,191
But we're still showing a placeholder image

7
00:00:17,191 --> 00:00:18,262
for each product.

8
00:00:18,826 --> 00:00:20,336
It's time to replace them

9
00:00:20,336 --> 00:00:22,208
with the real product pictures.

10
00:00:22,769 --> 00:00:25,293
When we fetch a product from the CMS

11
00:00:25,293 --> 00:00:28,169
the JSON data includes a "picture" field,

12
00:00:28,169 --> 00:00:31,184
but this is an object with many properties.

13
00:00:31,825 --> 00:00:34,139
For this example I'm going to ignore

14
00:00:34,139 --> 00:00:36,840
the different formats generated by Strapi.

15
00:00:37,405 --> 00:00:39,647
What we need to display the picture

16
00:00:39,647 --> 00:00:40,800
is just its "url".

17
00:00:41,365 --> 00:00:42,927
So we can use this value.

18
00:00:42,927 --> 00:00:46,115
But this is not a full address, it's only the path.

19
00:00:46,678 --> 00:00:48,485
To construct the full URL

20
00:00:48,485 --> 00:00:50,654
we'll need to append that path

21
00:00:50,654 --> 00:00:54,053
to the server address where our CMS is running.

22
00:00:54,698 --> 00:00:56,686
And if we fetch this URL now

23
00:00:56,686 --> 00:00:59,172
we can see the image for Aloe Vera.

24
00:00:59,744 --> 00:01:02,254
Ok. Now that we know how to extract

25
00:01:02,254 --> 00:01:04,836
the image URL from the CMS response,

26
00:01:05,408 --> 00:01:07,763
let's add a "pictureUrl" property

27
00:01:07,763 --> 00:01:09,975
to the product object we return

28
00:01:09,975 --> 00:01:12,473
from our own "getProduct" function.

29
00:01:13,115 --> 00:01:16,753
And we can set this to the "picture.url" property

30
00:01:16,753 --> 00:01:19,128
in the data returned by the CMS.

31
00:01:19,703 --> 00:01:22,005
But since that's just a path

32
00:01:22,005 --> 00:01:24,801
we'll need to prepend the CMS_URL.

33
00:01:25,384 --> 00:01:28,648
Which incidentally means that to display images

34
00:01:28,648 --> 00:01:32,399
the browser will need direct access to the CMS server.

35
00:01:32,968 --> 00:01:35,303
Now that we include the "pictureUrl"

36
00:01:35,303 --> 00:01:36,665
in our product object

37
00:01:37,229 --> 00:01:39,712
we can replace this placeholder image

38
00:01:39,712 --> 00:01:41,725
with the "product.pictureUrl".

39
00:01:43,462 --> 00:01:45,281
Let me show the browser window,

40
00:01:45,281 --> 00:01:46,454
so that when we save

41
00:01:46,454 --> 00:01:49,094
you can see the images displayed on the page.

42
00:01:51,162 --> 00:01:52,407
So that's looking good.

43
00:01:52,407 --> 00:01:54,517
Let's see it in a large screen as well.

44
00:01:55,228 --> 00:01:56,977
The only problem is that

45
00:01:56,977 --> 00:01:59,163
these images are not optimised

46
00:01:59,163 --> 00:02:01,567
for being displayed in this size.

47
00:02:02,212 --> 00:02:05,862
If we inspect this image using the Dev Tools,

48
00:02:05,862 --> 00:02:08,619
you can see that its original size

49
00:02:08,619 --> 00:02:10,322
is 960 by 720 pixels.

50
00:02:10,984 --> 00:02:13,116
But we're displaying it at

51
00:02:13,116 --> 00:02:16,150
slightly less than 320 by 240 pixels.

52
00:02:16,732 --> 00:02:18,987
So we're loading images that are

53
00:02:18,987 --> 00:02:21,382
a lot larger than they need to be.

54
00:02:21,382 --> 00:02:23,425
Now, we could manually create

55
00:02:23,425 --> 00:02:25,679
smaller versions of these images

56
00:02:25,679 --> 00:02:27,581
and upload them to our CMS,

57
00:02:27,581 --> 00:02:29,835
but that would be a lot of work.

58
00:02:30,687 --> 00:02:32,915
In the next video we'll see how

59
00:02:32,915 --> 00:02:34,927
Next.js comes with a feature

60
00:02:34,927 --> 00:02:38,233
that can automatically optimise images for us.

61
00:02:38,233 --> 00:02:40,677
And not just resize them, but also

62
00:02:40,677 --> 00:02:43,479
convert them to more efficient formats,

63
00:02:43,479 --> 00:02:45,635
and take care of lazy loading.