CODEWITHSUNDEEP
djangosorl-thumbnail
jacques
jacques

Reputation: 109

sorl-thumbnail resize and add background

I'm using sorl-thumbnail and I want to resize an image to 200x200. Let's say the image will then be 160x200, because its not square. How can I add a white background (or borders) so that the resulting imagefile is 200x200? Is this possible with sorl-thumbnail or can I add this functionality?

Best Jacques

Upvotes: 3

Views: 2622

Answers (2)

Ahmet Recep Navruz
Ahmet Recep Navruz

Reputation: 713

I guess it's a little late, but you can find your answer in margin property:

In Short:

{% thumbnail something.image "200x200" as image %}
    <img src="{{ image.url }}" style="padding:{{ image|margin:"200x200" }}" />
{% endthumbnail %}

... and do not forget to set 

img { background-color: #fff; }

Details from documentation: http://thumbnail.sorl.net/template.html#margin

Upvotes: 3

Dana Woodman
Dana Woodman

Reputation: 4522

I'm confused by what you mean about resizing the image to 200x200 and then to 160x200. Do you just want the image to be cropped proportionally, based on it's longest side? If so, you can do this:

{% thumbnail something.image "200x200" as image %}
    <img src="{{ image.url }}" alt="{{ something.name }}" />
{% endthumbnail %}

which should give you the behavior you were looking for in terms of cropping.

Are you looking to actually overlay a border over the image or do would creating a border via CSS be appropriate?

img {
    background-color: #fff;
    padding: 2px;
}

If instead you actually want to change the image itself, I am sure you can modify the source code (which you can fork on GitHub here) to do what you need.

I can also recommend django-photologue as an alternative if you want to do things like watermarks, etc... I have found it to be really nice when it comes to doing site wide image modifications, compared to sorl.

Upvotes: -1

Related Questions