Inserting images in Open edX courses

Let's face it, nobody wants to read a solid wall of text, and a few well placed images can make the difference when it comes to grabbing your students' attention and help you to illustrate a difficult concept. Let's get one into your course.

First, you're going to need to upload your image to the files and uploads area in Studio. First select Content then Files & Uploads:

Once you do, you'll reach the Files & Uploads page. This is where you can upload all your documents and images for use in your course. For more information and a video tutorial on adding files, check out 'Adding Files to Your Course'.

To upload your image, simply click Upload New File or Upload your first asset. This button will only appear if you don't have any other assets in your course yet. For everything else, just use Upload New File.

You should see a window like the one below appear. Simply hit Choose File and then pick the image you want to use from your computer.

Once you've uploaded it, it will give you a URL. Select this URL and copy it, by either right clicking and selecting 'Copy' or pressing CTRL+C (Command+C on a Mac).

Next, head to the unit in which you want your image to appear, still in Studio. You'll need an HTML component if you haven't got one already, so if needed, select HTML and then Text from the component menu. If you've already got one you're looking to insert an image into, just go ahead and skip this bit.

Once you have your HTML component, go into the editor by hitting Edit and select the Insert/edit image button on the editor controls.

Simply paste the URL to your image in the ' Source' field, and write a short description in the 'Image Description' field. This description will help non-sighted learners enjoy your content. If the image is purely decorative, leave this field blank, as this will tell a screen-reader to skip this image. For more information on writing alternative text, try this article from WebAIM.

Just press OK, and as if by magic your image is now in your content. If you want to make it smaller after inserting your image, simply select your image, press Insert/edit image again, and type a smaller number in the Dimensions field. If Constrain proportions is ticked, your image will maintain its proportions, preventing it from being squashed. We recommend never increasing the size of your image above its original dimensions, as this can lead to a loss in quality. We recommend that you do not use the handles to resize your image in the visual editor window, as this can lead to squashing your image, and can look very messy.

Hopefully you should now have no trouble including images in your content to spice things up a little bit. As always, though, if you have any problems and need a hand just contact us through our support channels (provided you're an Appsembler customer!).