Wagtail CRX (CodeRed CMS)

repository·main·Indexed 20 days ago

https://github.com/coderedcorp/coderedcms

A professional extension for Wagtail designed to accelerate the development of marketing websites. It provides pre-built Bootstrap 5 components, SEO tools, advanced form builders, specialized content types (Articles, Calendars, Events), and a CLI tool for project scaffolding. Key features include CoderedStreamField to prevent migration bloat, secure file uploads via SecureFileField, and SASS/SCSS compilation support directly within Django.

Tokens
48.3K
Snippets
114
Records
267
Agent score
70%

What's inside coderedcms

  1. Overview of Wagtail CRX features

    main

    Wagtail CRX (formerly CodeRed CMS) is an extension for Wagtail designed for building marketing websites using Bootstrap 5. It provides several out-of-the-box enhancements:

    • Bootstrap 5 Streamfield Blocks: Pre-built components like rows, columns, hero units, carousels, buttons, modals, and cards.
    • Site Settings: Built-in management for logos, navigation, footers, and other global elements.
    • SEO & Analytics: Rich SEO tagging attributes per page and configurable Google Analytics/tracking integration.
    • Form Builder: A robust system supporting multi-step forms, conditional logic, customized confirmation emails, and MailChimp integration.
    • Content Types: Specialized page types for Articles (blogs/news), Calendars, and Events.
    • Site Features: Google Maps blocks, store locator functionality, dynamic classifiers (filterable categories), and website search (filterable by page type).
    • Styling: Support for styling sites using SASS/SCSS directly from Django without requiring Node.js.
  2. What is Wagtail CRX (CodeRed Extensions)?

    main

    Wagtail CRX (formerly CodeRed CMS) is a collection of enhancements and pre-built components designed to work on top of standard Wagtail. It is distributed as a pip package and is not a fork of Wagtail.

    CRX provides ready-to-use features to accelerate development, including:

    • Bootstrap 5 Components: Streamfield blocks and page templates for rows, columns, hero units, carousels, buttons, modals, and cards.
    • Site Settings: Built-in settings for managing logos, navigation, footers, and other common elements.
    • SEO & Analytics: Rich SEO tagging attributes on pages and configurable Google Analytics/tracking.
    • Form Builder: A robust system supporting multi-step forms, conditional logic, customized confirmation emails, and MailChimp integration.
    • Content Types: Pre-built Article pages (for blogs/news), Calendar and Event pages, and a dynamic classifier system for filterable categories.
    • Utilities: Google Maps blocks, store locator functionality, and website search filterable by page type.
    • Styling: Ability to style sites using SASS/SCSS directly from Django without requiring a Node.js environment.

    Because CRX is tightly coupled with Bootstrap CSS, it provides a consistent way to reuse tested code across multiple projects.

  3. Configure how sub-pages appear on a Landing Page

    main

    Landing Pages in Wagtail-CRX can automatically pull in their child pages (sub-pages) using the Layout tab settings. This is the simplest way to build a blog or news feed.

    Using the 'Show Child Pages' setting

    1. Edit your Article Landing Page.
    2. Navigate to the Layout tab.
    3. Locate the Show Child Pages section.
    4. Configure the following:
      • Show Child Pages: Toggle this to enable automatic display of sub-pages.
      • Child Page Display: Control how many sub-pages are shown and which specific fields (e.g., title, image, caption) are used for the preview.

    Alternative: Using the 'Latest Pages' block

    If you want more granular control or need to display pages that are not direct children of the current page, you can de-select "Show Child Pages" in the Layout tab and instead add a Latest Pages block directly within the Content tab of the page editor.

  4. Use Stream Forms for advanced form functionality

    main

    Stream Forms in Wagtail CRX allow you to build complex forms using StreamFields. This enables advanced features like multi-step forms, mixed content (text/images) between fields, and conditional logic.

    To use them, you must first implement the CoderedStreamFormPage model in your project (see Implementation guide). Once implemented, you create a Stream Form page and add content via a StreamField. The StreamField uses a hierarchical structure:

    1. Top Level: Contains step blocks. Each step block represents a single page in a multi-step form.
    2. Inside Step Blocks: Each step contains its own StreamField where you can mix standard form fields with content blocks.
    StreamField Structure:
    - Step Block (Top Level)
      - StreamField (Nested)
        - Form Field
        - Content Block
        - Form Field
  5. Use Web Pages as the base page type

    main
    The Web Page is the standard, foundational page type in CodeRed CMS. All other specialized page types on your site inherit and share the core functionality provided by the Web Page. To build a site, you start by creating a "Web Page" in the Wagtail admin, which provides a structured set of tabs for managing content, classification, layout, SEO, and settings.
  6. Understand the Wagtail CRX Page Type hierarchy

    main

    Wagtail CRX uses a hierarchical 'Parent-Child' relationship to organize site functionality. Specific features are implemented as collections of pages where a specialized 'Landing Page' acts as a parent to individual content pages (e.g., an 'Article Landing Page' acts as the parent for 'Article Pages').

    To add a new content page, navigate to its designated parent page in the Wagtail admin and click the Add Child Page button.

    Supported Parent-Child Relationships

    Parent Page TypeAllowed Child Page Types
    Web PageWeb Page, Article Landing Page, Event Landing Page, Location Landing Page, Form Page
    Article Landing PageArticle Page
    Event Landing PageEvent Page
    Location Landing PageLocation Page
  7. Configure Mailchimp merge variables and interest groups

    main

    Once the Mailchimp integration is implemented, you can configure how form data maps to Mailchimp via the Wagtail admin:

    1. Accessing Integrations: Open a FormPage and navigate to the Integrations tab. Click the plus icon to add a new Mailchimp integration instance.
    2. Interest Groups: Select the target Mailchimp list. You can then select the specific interest categories you want the subscriber to be assigned to.
    3. Merge Variables: Map form submission values to Mailchimp merge variables using Django template syntax. The context available for rendering is the set of form submission fields.

    Mapping Logic: If your form has a field named First Name, the context variable is first_name. To map this to a Mailchimp merge variable named FIRSTNAME, enter {{ first_name }} in the integration configuration field.

  8. Extend Wagtail CRX page types via Abstract models

    main

    Wagtail CRX is designed with an abstraction-first development philosophy. Core functionality is implemented in Abstract models to ensure that migrations and core logic remain stable across different projects.

    When you initialize a new Wagtail CRX project, the generated application includes Concrete implementations of these abstract models.

    Best Practices for Developers:

    • Use the Concrete models as a starting point: The pre-loaded concrete models are intended to be modified to suit your specific project needs.
    • Caution when modifying core logic: While you are encouraged to customize the concrete models, changing built-in functionality can have untested consequences for the site structure.
  9. Configure a Location Landing Page

    main

    A Location Landing Page (extending CoderedLocationIndexPage) acts as a container for multiple individual locations and displays them on an interactive Google Map.

    In the Layout Tab, you can configure the map's initial state:

    • Center Latitude: The latitude to center the map on.
    • Center Longitude: The longitude to center the map on.
    • Zoom: The default zoom level (values 1-20).
      • 1: World
      • 5: Landmass continent
      • 10: City
      • 15: Streets
      • 20: Buildings

    Note: Zoom functionality requires a Google Maps API key configured in Settings > CRX Settings.

  10. Translate the Wagtail CRX UI

    main
    Wagtail CRX uses Django's internationalization (i18n) system for all UI text and templates. All strings throughout the interface are provided as translatable strings. For detailed implementation details on how to manage these translations, refer to the official Wagtail documentation on i18n.