Django CMS Stories Integration / Templates

[surfgreendev]

Article Template Implementation with Django Stories

Labels: enhancement, django-stories, templates, content
Milestone: Django CMS Relaunch
Related: DJAN-6

---

Description

Implement a comprehensive article template for the DjangoCMS.org relaunch using Django Stories (latest version) to provide a flexible, SEO-optimized, and design-system-compliant article/blog post layout.

The article template must support rich content presentation, author attribution, social sharing, related content, and responsive layouts while integrating seamlessly with existing Django CMS plugins.

---

Goals

• Integrate Django Stories (latest version) for article management
• Create responsive article template following design system
• Support rich article content using Django CMS plugins
• Implement SEO optimization (meta tags, structured data, Open Graph)
• Add author bio section with profile information
• Include social sharing functionality
• Display related articles section
• Support article categorization and tagging
• Implement reading time estimation
• Add table of contents for long-form articles
• Ensure full accessibility compliance

---

Technical Requirements

Django Stories Integration

Version: Latest stable version of Django CMS Stories

Template Structure

Article Detail Template (article_detail.html)

The template should include the following sections:

1. Article Header/Hero Section

• Featured image (full-width or contained)
  • Responsive image handling with srcset
  • Alt-text from Django Stories model
• Article category badge/label
• Article title (H1)
• Article subtitle/excerpt (if present)
• Publication date
• Reading time estimate (e.g., "5 min read")
• Author name(s) with avatar
• Share buttons (sticky or inline)

2. Article Meta Bar (Optional)

• Publication date
• Last updated date (if different)
• Categories/Tags
• Share buttons

3. Article Content

• Main content area using Django CMS placeholder
• Support for all Django CMS frontend plugins:
  • Text Plugin (primary content)
  • Heading Plugin
  • Image Plugin
  • Video Plugin
  • Code blocks
  • Quotes
  • Lists
  • Tables
• Table of contents (auto-generated from headings for long articles)
• In-article images with captions

4. Author Bio Section

• Author profile image (circular)
• Author name
• Author bio/description
• Social media links (LinkedIn, Twitter, GitHub, etc.)
• Link to author's other articles

5. Article Footer

• Tags list
• Share buttons (if not sticky)
• Publication/update timestamps

6. Related Articles Section

• Display 3-4 related articles based on:
  • Same category
  • Same tags
  • Manual selection (optional)
• Each related article card shows:
  • Thumbnail image
  • Title
  • Excerpt
  • Publication date
  • Reading time

7. Comments Section (Optional)

• Comment system integration (Django Comments or third-party)
• Or call-to-action to discuss on community platform

---

---

Component Specifications

Featured Image

• Implementation: Django CMS Frontend Image Plugin or FilerImageField
• Responsive Handling:
  • Multiple sizes via thumbnailing
  • srcset and sizes attributes
  • Lazy loading for performance
• SEO: Alt-text and title attributes
• Aspect Ratio: Configurable (16:9, 4:3, 2:1)

Author Bio Component

• Avatar: Circular profile image (Django CMS Frontend Image Plugin)
• Name: Author's full name (linked to author archive page)
• Bio: Short description (150-200 characters)
• Social Links: Icon buttons with links
  • LinkedIn
  • Twitter/X
  • GitHub
  • Personal website
• View Articles CTA: Link to all articles by author

Reading Time Calculation

• Automatic calculation based on content length
• Formula: word count / 200 words per minute
• Display format: "X min read"
• Update on content save

Table of Contents (Long Articles)

• Auto-generated from H2 and H3 headings
• Sticky sidebar on desktop (optional)
• Collapsible on mobile
• Smooth scroll to sections
• Highlight current section on scroll

Social Share Buttons

• Platforms:
  • Twitter/X
  • LinkedIn
  • Facebook
  • Email
  • Copy link
• Options:
  • Sticky sidebar (desktop)
  • Fixed bottom bar (mobile)
  • Inline at top and/or bottom of article
• Include Open Graph meta tags for rich previews

Related Articles

• Algorithm:
  • Primary: Same category + similar tags
  • Fallback: Recent articles
  • Exclude current article
• Display: Grid of 3-4 cards
• Card Content:
  • Thumbnail (Django CMS Frontend Image Plugin)
  • Category label
  • Title
  • Excerpt (truncated to ~120 characters)
  • Publication date
  • Reading time

---

Responsive Behavior

Desktop Layout

• Content Width: Max-width container (e.g., 800px for readability)
• Sidebar (Optional):
  • Table of contents
  • Author bio
  • Share buttons (sticky)
• Related Articles: Grid of 3 cards

Tablet Layout

• Content Width: Full-width with padding
• Sidebar: Below content or collapsible
• Related Articles: Grid of 2 cards

Mobile Layout

• Content Width: Full-width with padding
• Sidebar: All sections below content
• Share Buttons: Fixed bottom bar or inline
• Related Articles: Single column stack
• Touch-friendly: Minimum 44px tap targets

---

Accessibility Requirements

• Semantic HTML5 structure (<article>, <header>, <main>, <aside>)
• Proper heading hierarchy (H1 for title, H2+ for sections)
• ARIA labels for interactive elements
• Keyboard navigation for all interactive elements
• Sufficient color contrast (WCAG AA minimum)
• Alt-text for all images
• Skip navigation link
• Focus visible states
• Screen reader announcements for dynamic content

---

Design System Compliance

• Typography uses design system tokens
• Spacing follows design system scale
• Colors from theme system
• Button styles consistent with design system
• Card styles consistent with other card components
• No hardcoded breakpoints or colors

---