How to Format Images in Course Activities - Leadership Academy

• Learn more about the maximum image sizes when building a course.

Functionality in platform regarding image formatting

Currently, the platform offers two sets of options when uploading an image to the Description section of an activity’s Build page - Alignment and Size. Learn more about how to build an activity.

• Alignment: Currently both left and right alignment are available. When selected, your image will automatically be aligned to the left or to the right of the course player with text formatted around the image. If you wish to center align the image, use the instructions in the section below.
• Size: Large (100% width of the page, or 1080px), Medium (50% width of the page, or 540px), and Small (25% width of the page, or 270px) are available. If your image is wider than the option you select, it will be reformatted for the chosen size, which could impact visibility and lead to blurry or grainy images. 

Tips when uploading images to a course activity

• Use two browser tabs when building an activity, one for the Build page and one for the learner’s view of the course activity. This allows you to frequently check how the activity looks in the course player from the learner’s perspective and then make updates.
• Remember that learners view courses using different devices and different screen sizes. The formatting on your screen may not be what every learner experiences.
• While not best practice, depending on the desired formatting aesthetic, you can hit Enter around the text in the Description section as many times as needed to ensure that text is not wrapped around an image. If your image is small and is left or right aligned, text will automatically be placed to the left or right of the image. If you’d like to move the text to below the image, this is an option you can implement, keeping in mind that learners on other devices may have a different aesthetic when viewing the activity.

How to center align images

1. Upload your image in the course activity Description section.

2. Once uploaded, click on the Source Code icon at the top of the Description section.

3. Locate the code for your image. It should look something like this, though the alignment, width, and size may be different: 

<img src="imagename.png or imagename.jpg, etc" alt="None" width="540" height="479" />

4. Immediately before this code, i.e. to the left of “<img class”, enter “<center>” (not including the quotation marks). Immediately after the code, i.e. to the right of “/>”, enter </center>. It will look something like this: 

<center><img src="imagename.png or imagename.jpg, etc" alt="None" width="540" height="479" /></center>

5. Look at the alignment portion of the code, i.e. where it says ”image-left” or “image-right”. Change this to “image-center”. The code should now look like this:

<center><img src="imagename.png or imagename.jpg, etc" alt="None" width="540" height="479" /></center>

6. Click OK. The image should have shifted to the center within the Description section. Click Update at the bottom of the activity Build page.

7. Use another browser window to view the activity from the learner’s perspective and make sure the image displays correctly.