v1.0.0 release notes

Today we celebrate our 43rd public release of CRX! This is the largest release ever with tons of performance improvements that will increase the speed and accessibility of your CRX website.

New features

  • Upgrade to Wagtail 3.

  • Upgrade to Bootstrap 5 (ships with Bootstrap 5.2).

  • Removed jQuery, modernizr, and many other JavaScript improvements.

  • Use WebP image format. If you need to support older browsers released prior to 2020, disable this feature. See Best Practices for Images.

  • New Accordion snippet and block. See Accordions.

  • Added hidden “skip navigation” link for accessibility.

  • Most settings have been consolidated in the Wagtail admin under Settings > CRX Settings.

  • Banner color has been changed from red to yellow, and appearance is slightly improved in the Wagtail admin.

  • Codebase has been formatted with black to improve readability and maintainability.

  • CRX 1, Wagtail 3, and Bootstrap 5 all drop support for Internet Explorer. If you need to support Internet Explorer, follow the Bootstrap 4 guide below.

Upgrade instructions

Important

It is highly recommended to first upgrade and deploy your site in production with version 0.25 before performing the upgrade to 1.0.

Updating Python code & Django templates

  1. Run pip install coderedcms==1.0.* and update your requirements.txt with coderedcms==1.0.*.

  2. Follow the Wagtail 3 upgrade instructions. This primarily involves running the following tool to update the Wagtail imports:

    wagtail updatemodulepaths

  3. Find and replace the following panels in your Python code:

    • StreamFieldPanel

    • RichTextFieldPanel

    • ImageChooserPanel

    • DocumentChooserPanel

    • SnippetChooserPanel

    with:

    • FieldPanel

  4. Find all instances of StreamField( and add the use_json_field=True argument.

  5. Rename BASE_URL to WAGTAILADMIN_BASE_URL in your Django settings.

  6. Find and delete any references to ADASettings in your Python and HTML code.

  7. Find and replace the following references in your Python and HTML code:

    • GeneralSettings

    • GoogleApiSettings

    • MailchimpApiSettings

    with:

    • LayoutSettings

  8. Find and replace codered_banner.html with crx_banner.html in your Python and HTML code.

  9. Find and replace the following URL names in your Python and HTML code:

    • codered_favicon with crx_favicon

    • codered_robots with crx_robots

    • codered_search with crx_search

    • codered_sitemap with crx_sitemap

  10. Make and run migrations:

    python manage.py makemigrations
python manage.py migrate

  11. Next, choose whether to upgrade to Bootstrap 5, or stay on Bootstrap 4.

If upgrading your site to Bootstrap 5

  1. Add django_bootstrap5 to INSTALLED_APPS..

  2. If you are not using django-bootstrap4 elsewhere in your project, remove bootstrap4 from INSTALLED_APPS.

  3. In your Django settings file, remove the BOOTSTRAP4 dictionary.

  4. Update your HTML templates to Bootstrap 5.2. Compare your custom templates to the stock ones for help: https://github.com/coderedcorp/coderedcms/tree/dev/coderedcms/templates.

  5. Notable template changes:

    • event_index_page.html and calendar.html have changed.

    • location_index_page.html has changed.

    • stream_form_page.html has changed.

    • form_page.html and pagepreview_form.html have changed to use django_bootstrap5 rendering.

    • article_index_page.html and article_page.html have a new design that is closer to stock Bootstrap.

    • grid_block.html now has with a CSS class crx-grid which you can target with CSS.

    • Blocks no longer render with a <div class="block-*"> wrapper. This may affect custom CSS.

  6. pages/base.html template has removed {% block required_scripts %}. Delete it from your template if it is present.

  7. If you still rely on jQuery, be sure to add it to your base template in {% block custom_scripts %}. Generally speaking, any instance of the custom_scripts block should call block.super to preserve scripts from parent templates as such:

    {% block custom_scripts %}
{{ block.super }}
<script src="my-script-here.js"></script>
{% endblock %}

  8. All CSS class names and JavaScript files beginning with codered- have been renamed to crx-. Find and replace those in your templates and CSS.

  9. The new templates all use WebP images. See: Best Practices for Images for options to disable this if needed.

  10. If you are using Sass, update your _variables.scss and custom.scss files appropriately. As a starting point, update your Sass files to match our project template: https://github.com/coderedcorp/coderedcms/tree/dev/coderedcms/project_template/sass/website/static/website/src.

If staying on Bootstrap 4

While we recommend eventually upgrading to Bootstrap 5, for larger sites or highly customized sites, this can be a lengthy process. We have published a compatibility theme which preserves all the old Bootstrap 4 templates, CSS, Sass, and JavaScript.

Do not follow any of the steps above in the Bootstrap 5 section if you are staying on Bootstrap 4!

  1. Run pip install coderedcms-bootstrap4 and add to your requirements.txt file coderedcms-bootstrap4==1.*.

  2. In your Django settings file, add coderedcms_bootstrap4 ABOVE the coderedcms app:

    INSTALLED_APPS = [
    ...,
    "coderedcms_bootstrap4",
    "coderedcms",
    ...,
]

Final steps: after deploying

Locally in development, and after deploying your upgraded site to production, you should run the following commands to clean up the site.

Run migrations (as usual):

python manage.py migrate

Delete old media renditions:

python manage.py wagtail_update_image_renditions --purge-only

Clear the cache:

python manage.py clear_wagtail_cache

Update Wagtail search index:

python manage.py wagtail_update_index

Thank you!

Thanks to everyone who contributed to 1.0.0 on GitHub.