Skip to content

Latest commit

 

History

History
126 lines (81 loc) · 3.66 KB

README.rst

File metadata and controls

126 lines (81 loc) · 3.66 KB

Image Modal XBlock

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

badge-ci

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.

image-lms-view-normal

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

image-cms-settings-menu

and add the following:

imagemodal

image-cms-advanced-module-list

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

image-cms-add

You can now edit and preview the new component.

image-cms-view

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)

image-cms-editor-1 image-cms-editor-2

Participants

image-lms-view-normal

Click on the image to zoom in full-screen.

image-lms-view-zoom

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