Allow Authors to Apply CSS Classes to Images
Link to Github ticket
Author: @Ali Hugo and @Kshitij Sobti
TL;DR Summary
We propose enhancing the LMS image editor to allow authors to apply standard CSS classes to images within their course. This improves authoring flexibility, reduces reliance on manual code edits, and establishes a scalable framework that allows teams to add new styling options as needed.
Problem
The current image editor only gives authors the ability to adjust the width and height of images. There are no styling options within the editor, forcing course teams to rely on manual code edits (not feasible for most authors) or external tools (slowing down their workflow) to spruce up their images.
Many image editors offer at least basic styling options like drop shadows, and image float. Adding these capabilities will bring our editor in line with other platforms and give authors greater control over how their course content is presented.
Use Cases
As a course author, I want to add styles to images directly in the image editor so I can format images without editing HTML or relying on external services.
As a course author, I want consistent, preconfigured styling options so I can maintain a cohesive visual style across my course.
As a learner, I want images in the course to be formatted consistently so the content feels professional and easy to follow.
As a learner, I want images to be visually clear and well-presented so I can better understand the material.
As an institution, I want the flexibility to configure which CSS classes appear in the image editor so we can enforce branding and maintain visual consistency across all courses.
Proposed Solution
The primary goal of this proposal is to give institutions greater flexibility in how course teams style images, by allowing them to define which CSS classes are available in the image editor. In addition, we propose adding two new styling options to the default image editor:
Placement: inline with text, left of text, right of text, full-width
Drop Shadow: none, slight drop shadow, large drop shadow
Each option corresponds to a CSS class that would be applied to the image element. These lists will be configurable (class lists can be grouped and labelled in the config), allowing institutions the flexibility to add, remove, or rename classes in line with their particular needs.
In addition to these predefined options, we propose adding an “advanced styling” option which, when selected, reveals a simple textbox where course teams can add any custom class they wish to apply.
Predefined styling options will be presented in select menus, allowing the user to select one option from each menu. The default selections will be:
Placement: Inline with text
Drop Shadow: None
Implementation Plan
Two new select menus (Placement and Drop Shadow) will be added to the image editor in the LMS.
Placement and Drop Shadow options will be enabled by default.
Each menu option will correspond to a CSS class that will be applied to the image element.
The title of the select menus and the lists of CSS classes within them will be configurable, allowing institutions to customize the classes available to their course teams. Class lists can be grouped and labelled in the config.
An Advanced Styling option will be added to the image editor allowing course teams to add custom CSS classes.
The Advanced Styling checkbox will be unchecked by default.
Our client is offering to sponsor the contribution of this XBlock to the project and so this work is expected to be funded.
Long-term Ownership and Maintenance Plans
We anticipate that several teams will need this functionality, and core contributors from OpenCraft will be actively involved in its development. These contributors will continue to assist with maintenance. If needed, one or more point persons can be designated as the primary contact for this code after its release.
Contact Person
Technical: Kshitij Sobti (kshitij at opencraft.com)
Product: Ali Hugo (ali at opencraft.com)
Other Approaches Considered
Hard-coding a fixed set of styling options: lacks flexibility and would require engineering input for every new request.
Full WYSIWYG styling controls (manual padding, shadow sliders, border colour pickers etc): significantly more complex and more difficult to support across themes.
Relying on authors to manually add HTML or CSS: not feasible for non-technical course team members.
Competitive Research
Moodle
Moodle only seems to offer scaling options in their image editor, similar to the current editor on the Open edX LMS.
Canvas
Like Moodle and Open edX, Canvas seems only to offer scaling options for images within their image editor.
Open Questions
Should the feature be enabled by default or rolled out behind a feature flag?
See discussion in the thread started by Brian Smith below…
Should we provide default class definitions in the core theme, or leave CSS implementation fully to institutions?
Are any guardrails needed to prevent conflicting class combinations when institutions add custom classes?