WEBVTT

1
00:00:00.000 --> 00:00:01.999
Add an image to the content
Select Content in Layers, then open Add.

2
00:00:02.000 --> 00:00:03.999
Add an image to the content
Select Content in Layers, then open Add.

3
00:00:04.000 --> 00:00:05.999
Add an image to the content
Select Content in Layers, then open Add.

4
00:00:06.000 --> 00:00:08.999
Paste an HTTPS image URL
Check the address in Image URL and the image in the preview.

5
00:00:09.000 --> 00:00:12.499
Check the image and its proportions
The image is 1600 × 900 pixels. Click Add image.

6
00:00:12.500 --> 00:00:15.499
Keep the image proportions
Contain without distortion prevents the image from stretching.

7
00:00:15.500 --> 00:00:17.499
Set the image size
W: 320 pixels. H: 180 pixels, for a 16:9 image.

8
00:00:17.500 --> 00:00:19.499
Set the image size
W: 320 pixels. H: 180 pixels, for a 16:9 image.

9
00:00:19.500 --> 00:00:21.999
Set the image size
W: 320 pixels. H: 180 pixels, for a 16:9 image.

10
00:00:22.000 --> 00:00:23.999
Place the illustration in the card
X: 304 pixels. Y: 310 pixels.

11
00:00:24.000 --> 00:00:26.499
Place the illustration in the card
X: 304 pixels. Y: 310 pixels.

12
00:00:26.500 --> 00:00:29.499
The image keeps its proportions
Now add a progress bar beside the illustration.

13
00:00:29.500 --> 00:00:31.499
The image keeps its proportions
Now add a progress bar beside the illustration.

14
00:00:31.500 --> 00:00:33.499
Customize the label
Replace Progress with Community objective.

15
00:00:33.500 --> 00:00:35.999
Customize the label
Replace Progress with Community objective.

16
00:00:36.000 --> 00:00:38.999
Set progress to 75%
The value updates both the percentage and the length of the bar.

17
00:00:39.000 --> 00:00:41.499
Place progress beside the image
Layout: W 280, H 104, X 660, Y 330.

18
00:00:41.500 --> 00:00:43.999
Place progress beside the image
Layout: W 280, H 104, X 660, Y 330.

19
00:00:44.000 --> 00:00:46.499
Place progress beside the image
Layout: W 280, H 104, X 660, Y 330.

20
00:00:46.500 --> 00:00:50.499
Check the result with Test
The image and progress bar should fit inside the card without overlapping.

21
00:00:50.500 --> 00:00:53.500
Image and progress are in place
The bar displays 75% and the image keeps its 16:9 ratio.