0

I'm developing a website with:

  • Python
  • Django
  • Wagtail

In this project there are a lot of images and all of them have an ugly yellow border. In order to remove this border I need to crop all the images sistematically.

Every image has its own focal area (feature supplied by wagtail), a box that exclude the yellow border. However the standard tool for cropping, of wagtail, is useless in this situation and to achieve my goal I've decided to use easy-thumbnails.

Here an example of code in which I use the focal_point of image_object to set all the parameters needed for the cropping operation:

parameters = {
    'size': (width, height),
    'crop': True,
    'detail': False,
    'upscale': False,
}

if image_object.has_focal_point():
    focal_point = image_object.get_focal_point()

    parameters['box'] = "%s,%s,%s,%s" % (
        int(focal_point.left),
        int(focal_point.top),
        int(focal_point.right - focal_point.left),
        int(focal_point.bottom - focal_point.top),
    )

return get_thumbnailer(image_object.file).get_thumbnail(parameters, generate=True).url

My question is about the "box" parameter. I can't find it on the easy thumbnails docs but I've found examples of use around internet.

Can anyone tell me where I can found any reference about it? Or at least a list of all the parameters allowed with the get_thumbnail method?

Thanks in advance, nifel87

nifel87
  • 17
  • 3
  • Why not preprocess the image with image-editing tools like image-magick to remove the yellow border before inserting them in the Wagtail admin? That seems more useful to me. – Lucas Moeskops Jan 10 '18 at 11:00

1 Answers1

0

Although I've never tried it for this specific case, the rendition resizing method allows for a parameter to crop closer to the focal point which might help:

By default, Wagtail will only crop enough to change the aspect ratio of the image to match the ratio in the resize-rule.

In some cases (e.g. thumbnails), it may be preferable to crop closer to the focal point, so that the subject of the image is more prominent.

You can do this by appending -c at the end of the resize-rule. For example, if you would like the image to be cropped as closely as possible to its focal point, add -c100:

{% image page.photo fill-200x200-c100 %}

This will crop the image as much as it can, without cropping into the focal point.

If you find that -c100 is too close, you can try -c75 or -c50. Any whole number from 0 to

The same resize rules can be use with Image.get_rendition if you wish to generate the image rendition in Python.

Another more involved solution would be to create your own filters (a.k.a. resizing rules), although I'm afraid it isn't documented. Have a look at the implementation of the built-in filters and how to register them. Good luck.

Loïc Teixeira
  • 1,404
  • 9
  • 19
  • Thanks for your answer, but the main problem here is the "as much as" because each image has its own dimension and aspect ratio. For some particular images I can not completely eliminate the edge because the wagtail crop feature is approximate. It would be great crop the exact focal area so I'm sure that the border is not included. I tried to generate dinamically the resize rule with the dimensions of the focal area but then I don't know how to applicate it to the template tag. The second solution sounds more promising, I'll give it a try, thanks a lot. :-) – nifel87 Jan 12 '18 at 08:27
  • I tried the second method you suggested and it works fine. Thanks a lot :D – nifel87 Jan 15 '18 at 08:16