openedx-xblock-image-modal 5.0.0

A full-screen image modal XBlock

⚠️ Repository Migration Notice ⚠️

Warning

This xblock-image-modal repository is being archived. The XBlock is moving to the xblocks-extra repository, which consolidates optional add-on XBlocks for the Open edX platform.

Archival: This repository will become read-only once the migration is complete. No further updates or changes will be accepted here.

Please use xblocks-extra for all future work. If you have any questions or concerns, please open an issue on the xblocks-extra issue tracker.

Image Modal XBlock

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.

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