Skip to main content
Python Software Foundation 20th Year Anniversary Fundraiser  Donate today!

Adds an image plugin to django CMS

Project description

pypi build coverage

django CMS Picture is a plugin for django CMS that allows you to add images on your site.

This addon is compatible with Divio Cloud and is also available on the django CMS Marketplace for easy installation.



This is a an open-source project. We’ll be delighted to receive your feedback in the form of issues and pull requests. Before submitting your pull request, please review our contribution guidelines.

We’re grateful to all contributors who have helped create and maintain this package. Contributors are listed at the contributors section.

One of the easiest contributions you can make is helping to translate this addon on Transifex.


See REQUIREMENTS in the file for additional dependencies:

python django djangocms

  • Django Filer 1.7 or higher

Make sure django-filer is installed and configured appropriately.


For a manual install:

  • run pip install djangocms-picture
  • add djangocms_picture to your INSTALLED_APPS
  • run python migrate djangocms_picture


Note that the provided templates are very minimal by design. You are encouraged to adapt and override them to your project’s requirements.

This addon provides a default template for all instances. You can provide additional template choices by adding a DJANGOCMS_PICTURE_TEMPLATES setting:

    ('background', _('Background image')),

You’ll need to create the background folder inside templates/djangocms_picture/ otherwise you will get a template does not exist error. You can do this by copying the default folder inside that directory and renaming it to background.

Another setting is DJANGOCMS_PICTURE_NESTING, which allows you to render an image as the background image of a container that also contains other content (text, icons and so on).


will enable this (the default is False). When set to True, you’ll be able to place additional plugins inside the picture plugin.

You can override alignment styles with DJANGOCMS_PICTURE_ALIGN, for example:

    ('top', _('Top Aligned')),

This will generate a class prefixed with align-. The example above would produce a class="align-top". Adding a class key to the image attributes automatically merges the alignment with the attribute class.

You can enable responsive images technique by setting``DJANGOCMS_PICTURE_RESPONSIVE_IMAGES`` to True. In this case uploaded images will create thumbnails of different sizes according to DJANGOCMS_PICTURE_RESPONSIVE_IMAGES_VIEWPORT_BREAKPOINTS (which defaults to [576, 768, 992]) and browser will be responsible for choosing the best image to display (based upon the screen viewport).

You can use DJANGOCMS_PICTURE_RATIO to set the width/height ratio of images if these values are not set explicitly on the image:


We use the golden ratio, approximately 1.618, as a default value for this.

When working out sizes for the image, the system will use the following values, of preference:

  • the width or height set in the Thumbnail options
  • Autoscale
  • the Width and Height

We recommend setting width or height values around a placeholder so when the plugin uses Autoscale it can discover them:

{% with 720 as width and 480 as height %}
    {% placeholder content %}
{% endwith %}

Further configuration can be achieved through the django Filer settings.

Running Tests

You can run tests by executing:

virtualenv env
source env/bin/activate
pip install -r test_requirements/base.txt
python test

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for djangocms-picture, version 3.0.0
Filename, size File type Python version Upload date Hashes
Filename, size djangocms_picture-3.0.0-py3-none-any.whl (208.9 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size djangocms-picture-3.0.0.tar.gz (47.8 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring DigiCert DigiCert EV certificate Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page