Skip to main content

Adds an image plugin to django CMS

Project description

django CMS Picture

|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.

.. image:: preview.gif


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

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 2.7, 3.4 or higher
* Django 1.11 or higher
* Django Filer 1.3.0 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``

('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

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
`django Filer <>`_.

Running Tests

You can run tests by executing::

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

.. |pypi| image::
.. |build| image::
.. |coverage| image::

Download files

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

Filename, size & hash SHA256 hash help File type Python version Upload date
djangocms-picture-2.1.3.tar.gz (98.3 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page