> For the complete documentation index, see [llms.txt](https://docs.moocit.fr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.moocit.fr/english/course-components/images.md).

# Images

How to add an image to your course

To add an image to your course please follow the steps below: 

1\) Open the **Course** > **Unit** where you wish to add your image. 

2\) Select **Add New Component** > **HTML** > **Text** 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-MahwcAV04GN_3CGXBJ4%2FScreen%20Shot%202021-05-27%20at%2014.35.15.png?alt=media\&token=c1fa4751-255d-4e36-9a5d-fcb29fabed05)

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-Mahwjf96yWeC6BFxYmj%2FScreen%20Shot%202021-05-27%20at%2015.10.36.png?alt=media\&token=1f32f212-7034-4026-84ec-e661b15c0e15)

3\) Select to '**Edit**' the component. 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-Mahx4A-V-M6FpR472id%2FScreen%20Shot%202021-05-27%20at%2015.12.05.png?alt=media\&token=02d7e23a-c40e-46fb-a0c9-65a88df466f3)

4\) Select the **image icon** to **'insert/edit image'.**

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-MahxGNpo3gvWNhIEZQm%2FScreen%20Shot%202021-05-27%20at%2015.12.14.png?alt=media\&token=31784c5f-ddc5-4e6a-96ce-dc54e68555d3)

5\) Either ***drag + drop*** your image, select to '***browse computer***' to chose an image from your computer, or select a previously uploaded image. 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-MahxbKXFI25CAMzSPcZ%2FScreen%20Shot%202021-05-27%20at%2015.13.30.png?alt=media\&token=3a9ed2fa-b3b9-42df-bd33-0891caffd2ee)

6\) Add an image description, or select 'this is a decorative image only'. 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-Mahy_vEldOOaZiDoisW%2FScreen%20Shot%202021-05-27%20at%2015.16.21.png?alt=media\&token=073e637c-8705-46be-9cda-32f65c1da2c4)

7\) Modify the image dimensions by changing the height / width (pixels). As long as you keep '**Lock Proportions**' selected, the image dimensions will remain the same. Once you're done select '**Insert Image**'. 

8\) To modify the image size once it has been inserted. Highlight the image (the same way that you would highlight text). Use the dots in the corners and sides of the image to drag & drop the size to your preference. 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-Mahywoz1kNwIWxiAJuR%2FScreen%20Shot%202021-05-27%20at%2015.20.07.png?alt=media\&token=4f46290f-6925-462b-91a0-a3eb0ce4bdcc)

You can also highlight the image, and then select the Image icon from the menu to return to the image editor. 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MahuhhovrZbEYrFcFRv%2F-MahzBRYTwpd0u53KNNJ%2FScreen%20Shot%202021-05-27%20at%2015.21.10.png?alt=media\&token=ebfc8045-724c-4cf6-8157-3f1eb8ac4f51)