Skip to main content

A full-screen image modal XBlock

Project description

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

badge-travis badge-coveralls

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for xblock-image-modal, version 1.0.2
Filename, size File type Python version Upload date Hashes
Filename, size xblock-image-modal-1.0.2.tar.gz (16.2 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page