A full-screen image modal XBlock, for use within the Open edX 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.
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
To install the XBlock in your course, access your Advanced Module List:
Settings -> Advanced Settings -> Advanced Module List
and add the following:
imagemodal
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)
Click on the image to zoom in full-screen.
Click on the image again to zoom out.
Click and drag to pan around.