django cms picture resize

Question

I'm freshly new with Django CMS. I'm able to resize something by CSS in Django but that process slows me down so I think it would be faster by using Django CMS. Ok now I got the Welcome page with Django CMS, then I start by adding a picture and surprised that there is not an option to resize it. I found something like sorl_thumbnail package but can't figure out how to integrate the code to my template. Here is from the tutorial of sorl_thumbnail:

{% load thumbnail %}

{% thumbnail item.image "100x100" crop="center" as im %}
    <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %} 

In my feature.html template:

{% extends "base.html" %}
{% load cms_tags staticfiles sekizai_tags menu_tags %}
{% block content %}
<div>
    {% placeholder "feature" %}
</div>
<div>
    {% placeholder "content" %}
</div>
{% endblock content %}

The tutorial of sorl_thumbnail is useless, it doesn't say where to put their code. I tried to paste the whole thing but no luck. Can you guys help please!

Answer 1

I would also recommend cmsplugin_filer_image as mentioned by @yakky

See: https://github.com/stefanfoulis/cmsplugin-filer/tree/develop/cmsplugin_filer_image

But if you want to continue use djangocms-picture, you'll need to override the plugin template.

Copy the snippet below to cms/plugins/picture.html in your template directory.

{% load thumbnail %}

<span class="plugin_picture{% if picture.float %} align-{{ picture.float }}{% endif %}">
    {% if link %}<a href="{{ link }}">{% endif %}
        {% thumbnail picture.image "100x100" crop="center" as im %}
            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
        {% endthumbnail %} 
    {% if link %}</a>{% endif %}
</span>