Image Modal XBlock

A full-screen image modal XBlock, for use within the OpenEdX platform.

The full-screen image tool is another way of enabling participants to see more detail in your provided images. This tool is useful for large images with lots of details. A re-sized version of the image displays in the page, but clicking on the image pops open a full-screen modal with the full-size version of the image.

Installation

System Administrator

To install the XBlock on your platform, add the following to your requirements.txt file:

xblock-image-modal

You'll also need to add this to your INSTALLED_APPS:

imagemodal

Course Staff

To install the XBlock in your course, access your Advanced Module List:

Settings -> Advanced Settings -> Advanced Module List

and add the following:

imagemodal

Use

Course Staff

To add a full-screen image to your course:

• upload the image file onto your course's Files & Uploads page
  • note: you can skip this step if you've already uploaded the image elsewhere, e.g.: S3.
• copy the URL on that page
• go to a unit in Studio
• select "Image Modal XBlock" from the Advanced Components menu

You can now edit and preview the new component.

Using the Studio editor, you can edit the following fields:

• display name
• image URL
• thumbnail URL (defaults to image URL, if not specified)
• description (useful for screen readers, longer descriptions)
• alt text (useful for screen readers, captions, tags; displays when image does not)

Participants

Click on the image to zoom in full-screen.

Click on the image again to zoom out.

Click and drag to pan around.

View a demo of the CMS

View a demo of the LMS