Skip to main content

A full-screen image modal XBlock

Project description

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

Project details


Download files

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

Source Distribution

openedx-xblock-image-modal-3.1.0.tar.gz (30.5 kB view hashes)

Uploaded Source

Built Distribution

openedx_xblock_image_modal-3.1.0-py3-none-any.whl (31.8 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page