Open edX® Tutorial: How to add images to your course.
In our previous tutorial about How to Add Course Sections and Subsections you added your first Section and Subsection to your course. With those in place, you can start adding content Units under the Subsections and add your real course content into those Units. Units can have one more multimedia components such as text, images, PDFs, videos, tests and more. In this tutorial you will learn how to add your first Unit into the course then add an image component inside that Unit. It’s very similar to adding text components, in fact we like to use the text component to add our images. You’ll see how it works below!
Note: If you already know how to add Units into your course, you can go directly to Step 3 below.
Step 1: Navigate to the course Outline from inside Studio.
In order to access the course Outline page, you first need to sign into Studio. From the Studio Home where all your courses are listed, click the course name of the course you want to enter. In the below image the course name is indicated as “Demonstration Course”, just click that to go inside the course to the course Outline.
Image: A screenshot of the Open edX Studio Home page.
When you click the course name, you will immediately be taken to the course Outline, as shown in the below image.
Image: A screenshot of the course Outline in Studio with the Section and Subsection you added in our previous tutorial How to Add Course Sections and Subsections.
Step 2: From the course Outline, click the + New Unit button
When you click the blue + New Unit button the system will automatically generate a new Unit for you. Go ahead and click it and the Unit will open up in a new page making it easier for you to develop that Unit.
Image: A screenshot of the new Unit created by the system.
Step 3: From the new Unit, click the green HTML button to add your text component.
When you click the HTML button, a pop-up will show you more options. Choose the first option named Text as per the below image. Don’t worry if this seems odd to use the text components, you’ll see how it works in a minute.
Image: A screenshot of the text component option.
Image: A screenshot of the new text component added by the system after you clicked the text option.
Step 4: Click the EDIT button then click the Insert Image tool.
When you click the EDIT button, a text editor will pop up allowing you to add any text you like. You can also use the styling options in the text editor to customise your text. One of those options is to upload or edit an image, as shown in the below screenshot. Go ahead and click the Insert Image icon. A pop-up window will appear prompting you to upload your image.
Image: A screenshot of the text editor will all the styling options visible, highlighting the Insert/Edit image feature.
Step 5: Upload your image.
On the pop-up screen, you can either drag and drop you image, or you can browse your computer to upload it. When it has uploaded, click the Next button.
Image: Screenshot of the pop-up screen allowing you to upload your image.
Step 6: Upload your image.
On the next screen, you will be prompted to add a description of the image (this is normal in web development and the description will show up only if the image does not load, for example if the user’s Internet is too slow), or just mark the box that says this image is for decorative purposes only. You can also set the height and width of the image! When you are done, click the Insert Image button.
Image: Screenshot of the screen allowing you to set the description, height and width of the image.
When you click Insert Image, the image will be inserted into the Unit. Click Save to finish.
Image: Screenshot of the final image in the Unit.
If your image is warped or does not fit nicely on the screen, you can click Edit again, then choose the HTML feature as per the below image. Looks for the height and width parameters as seen in the below image and update those parameters as per the image to height=”auto” and width=”100%”. This will make the image the full width of the page and it will automatically adjust the image height in order to maintain the aspect ratios of the original image.
Image: Screenshot of the HTML feature inside the Edit page.
Image: Screenshot of the HTML feature inside the Edit page with height=”auto” and width=”100%”
Image: Screenshot of the final image with height=”auto” and width=”100%”, looking perfect on screen!
Note: At any time you can click the Edit button again to make changes.