Content Teaser Plugin #15
Description
Content Teaser Plugin (Django CMS)
Source: Jira DJAN-6
Parent: DJAN-6
Goal: Implement a flexible Content Teaser plugin for DjangoCMS.org that combines text content with visual media (image or video) using Django CMS frontend plugins in a responsive, two-column layout.
Integration via Bootstrap Theme.
Problem Statement
The website requires a reusable Content Teaser module for highlighting key content, features, or calls-to-action across different page types.
Instead of hardcoding content elements, the Content Teaser must be a composed container for multiple Django CMS frontend plugins, allowing editors to build rich content sections using standard CMS tools while preserving strict layout and design rules.
The Content Teaser must:
- Compose text content from Heading, Text, and Button plugins
- Support both image and video media types
- Provide multiple background color options (dark green, light green, white)
- Handle responsive images with srcset and thumbnailing
- Support video modals for Vimeo, YouTube, and uploaded videos
- Follow the design system and theme colors
- Remain accessible and semantically correct
- Be extensible and maintainable
- POSTION LEFT / RIGHT IMAGE
Figma Links:
NOTE: also check the mobile version on Figma
Composed Plugin Architecture (Data Layout)
The Content Teaser acts as a layout/container plugin and does not directly store most content itself.
Parent Plugin: ContentTeaserPlugin
Responsible for:
- Layout configuration (text left, media right)
- Background color selection
- Media type configuration (image or video)
- Overall styling
Required / Supported Child Plugins
The Content Teaser must support the following Django CMS frontend plugins:
Text Content (Left Column)
-
Heading
- Implemented using the Django CMS Frontend Heading Plugin
- Semantic heading level configurable (e.g., H2, H3)
-
Body Text
- Implemented using a Text Plugin via Django CMS Text
- WYSIWYG editing for rich text content
-
CTA Button
- Implemented using Django CMS Frontend Link/Button Plugin as described here Link/Button Plugin
- Optional, can be omitted if no call-to-action needed
Media Content (Right Column)
Option 1: Image
- Implemented using the Django CMS Frontend Image Plugin as described here Image Picture Plugin
- Responsive Image Handling:
- Custom thumbnailing model generates multiple sizes for different viewports
- Use of
srcsetattribute for responsive image delivery - Use of
sizesattribute to specify image dimensions per breakpoint
- SEO Optimization:
- Alt-text rendered in HTML for accessibility and SEO
- Image title attribute rendered for additional context
- Descriptive filenames recommended for SEO
- Performance:
- Lazy loading for images not immediately visible
- Optimized image formats (WebP where supported)
Option 2: Video
- Implemented via a dedicated Video Plugin
- Supported Video Sources:
- Vimeo (embedded via URL)
- YouTube (embedded via URL)
- Uploaded video files (MP4, WebM)
- Video Behavior:
- Clicking video poster opens modal overlay
- Video plays within modal
- Modal can be closed via close button, outside click, or Escape key
- Poster Image:
- Required poster/thumbnail image
- Uses same image handling as standard images (srcset, thumbnailing)
- Alt-text for accessibility
Content Fields
Parent Plugin Fields
Layout & Styling
-
Background Color
- Uses djangocms-frontend Background mixin
- Options:
- Dark Green - Primary dark brand color
- Light Green - Bright/accent green color
- White - Clean, neutral background
- Ensures text remains readable on all backgrounds
-
Media Type
- Selection between:
- Image
- Video
- Either an Image or Video can be placed
- Selection between:
Video Plugin
Use the django cms frontend video plugin
Frontend Requirements
Layout Behavior
Desktop Layout
- Two-column layout: Text content (left) / Media (right)
- Approximate split: 50/50 or 40/60 depending on design
- Vertical centering of content
- Adequate spacing between columns
Mobile Layout
- Single-column stacked layout
- Media repositioned above or below text (configurable)
- Full-width content
- Maintained spacing and readability
Image Handling
- Responsive images with
srcsetandsizesattributes - Custom thumbnailing generates optimized sizes:
- Large (desktop)
- Medium (tablet)
- Small (mobile)
- Lazy loading for performance
- Alt-text and title attributes for SEO
Video Handling
-
Poster Display:
- Shows poster image with play button overlay
- Hover state indicates clickability
- Click/tap opens modal
-
Modal Behavior:
- Full-screen or large centered modal
- Dark overlay background
- Video embedded in modal content area
- Close button (X) in top-right corner
- Close on outside click or Escape key
- Video pauses when modal closes
-
Video Embedding:
- Vimeo: iframe embed with privacy settings
- YouTube: iframe embed with privacy-enhanced mode
- Uploaded: HTML5
<video>element with controls
Technical Implementation
- State control via JavaScript (no inline scripts)
- Compatible with Bootstrap theme (Bootstrap Modal for video)
- Semantically clean HTML structure
- Accessibility-compliant markup (ARIA roles, keyboard navigation)
- No hardcoded content in JS/HTML templates
User Stories & Acceptance Criteria
1. Content Teaser as Layout / Container Plugin
User Story
As a content editor
I want a Content Teaser plugin that acts as a container for other CMS plugins
So that I can compose rich content sections using familiar tools.
Acceptance Criteria
- Content Teaser plugin exists as a container/layout plugin
- Parent stores only layout-related configuration
- All editorial content is provided via child plugins
- Text content uses Heading, Text, and Button plugins
- Media uses Image or Video plugin
2. Background Color Options
User Story
As a content editor
I want to choose from predefined background colors
So that teasers integrate with the page design.
Acceptance Criteria
- Three background options available: Dark Green, Light Green, White
- Background uses djangocms-frontend Background mixin
- Text color adjusts automatically for readability
- Button styles adapt to background for proper contrast
3. Responsive Image Support
User Story
As a site visitor
I want images to load optimally on my device
So that performance and visual quality are both high.
Acceptance Criteria
- Image uses Django CMS Frontend Image Plugin
- Custom thumbnailing model generates multiple sizes
- Templates use
srcsetandsizesattributes - Different image sizes served for mobile, tablet, desktop
- Alt-text and title rendered in HTML for SEO
- Lazy loading implemented for performance
4. Video with Modal Playback
User Story
As a content editor
I want to embed videos that play in a modal
So that video content doesn't interrupt page flow.
Acceptance Criteria
- Video plugin supports Vimeo, YouTube, and uploaded videos
- Poster image required and displayed initially
- Clicking poster opens modal with video
- Modal has dark overlay and close button
- Video can autoplay when modal opens (configurable)
- Modal closes on close button, outside click, or Escape key
- Video pauses when modal closes
5. Video Poster Image Optimization
User Story
As a site visitor
I want video poster images to load quickly
So that I don't wait for large images to load.
Acceptance Criteria
- Poster image uses same responsive handling as standard images
-
srcsetand thumbnailing applied to poster - Alt-text provided for accessibility
- Play button overlay clearly indicates video content
6. Responsive Layout
User Story
As a site visitor on any device
I want the content teaser to display correctly on mobile and desktop
So that I can access content regardless of screen size.
Acceptance Criteria
Desktop:
- Two-column layout with text left, media right
- Vertical centering of content
- Adequate column spacing
Mobile:
- Single-column stacked layout
- Media repositioned above or below text
- Touch-friendly tap targets (minimum 44px)
- No horizontal scrolling
7. Accessibility Compliance
User Story
As a user with assistive technology
I want the content teaser to be fully accessible
So that I can access all content and functionality.
Acceptance Criteria
- Images have proper alt-text
- Video has descriptive title
- Modal has focus trap when open
- Modal can be closed with Escape key
- Keyboard navigation works for all interactive elements
- Screen readers announce video content and state
8. Design System Compliance
User Story
As a designer
I want the Content Teaser to follow the design system
So that visual consistency is maintained.
Acceptance Criteria
- Typography uses design system tokens
- Spacing and alignment match Figma designs
- Background colors use theme variables
- Button styles follow design system
- No hardcoded breakpoints or colors
9. Maintainability & Extensibility
User Story
As a developer
I want the Content Teaser to be well-structured
So that it can be maintained and extended easily.
Acceptance Criteria
- Clear separation of content, layout, and styling
- Background colors implemented via theme system
- Compatible with Bootstrap theme
- Templates are readable and documented
- Video modal uses standard Bootstrap Modal component
Definition of Done
- Parent/Child plugin structure implemented
- All configuration fields functional
- Text content uses Heading, Text, and Button plugins
- Three background color options work (Dark Green, Light Green, White)
Image Support:
- Image uses Django CMS Frontend Image Plugin
- Custom thumbnailing generates multiple sizes
- Responsive image handling with
srcsetandsizes - SEO optimization: alt-text and image title rendered in HTML
- Lazy loading implemented
Video Support:
- Video plugin supports Vimeo, YouTube, and uploaded videos
- Poster image required and uses responsive image handling
- Video opens in Bootstrap modal on click
- Modal has close button, outside click, and Escape key support
- Video pauses when modal closes
- Autoplay option functional
Responsive:
- Desktop: Two-column layout (text left, media right)
- Mobile: Single-column stacked layout
- Touch-friendly tap targets (minimum 44px)
General:
- Background colors use djangocms-frontend Background mixin
- Fully accessible (ARIA roles, keyboard navigation, screen reader)
- Design system fully respected
- Compatible with Bootstrap theme
- No hardcoded content in templates or JS
- Plugin is maintainable and extensible
Design Reference
Figma: Django CMS Design System 2025 - Content Teaser