Блог

Я не могу понять, возможно ли создать следующую миниатюру с помощью sorl-thumbnail в шаблоне django:

• Фиксированная ширина, при необходимости увеличенная.
• Максимальная высота. Если измененное изображение короче максимальной высоты, я не возражаю.
• Я не хочу обрезать изображение по ширине, но я не против обрезать его по высоте.

Если бы я мог сделать это в два этапа, я бы:

• Измените размер изображения на ширину x, разрешив масштабирование.
• Обрежьте изображение так, чтобы оно помещалось в прямоугольник x по y.

Лучшее, что я могу сделать, это то, что ширина выглядит хорошо, но не обрезает высоту.

 {% thumbnail banner "1010" crop="center" as im %}<img id='banner' src='{{ im.url }}'/>{% endthumbnail %}
  

Есть идеи?

Насколько я знаю, sorl-thumbnail не позволяет вам сделать это за один шаг. Если вам нужна только максимальная высота, вы можете использовать синтаксис геометрии «x100», но он не обеспечивает фиксированную ширину.

Я вижу три альтернативы:

Используйте фильтр is_portrait, чтобы узнать, понадобится ли вам обрезка или нет:

 {% if my_img|is_portrait %}
{% thumbnail my_img.filename "100x100" crop="top" as thumb %}
<img src="{{thumb}}" height="{{thumb.height}}" width="{{thumb.width}}"/>
{% endthumbnail %}
{% else %}
{% thumbnail my_img.filename "100" as thumb %}
<img src="{{thumb}}" height="{{thumb.height}}" width="{{thumb.width}}"/>
{% endthumbnail %}
{% endif %}
  

Создайте пользовательский движок sorl для обрезки на max_height:

 from sorl.thumbnail.engines.pil_engine import Engine
class MyCustomEngine(Engine):
    def create(self, image, geometry, options):
      image = super(MyCustomEngine, self).create(image, grometry, options)
      if 'max_height' in options:
          max_height = options['max_height']
          # Do your thing here, crop, measure, etc
      return image

{% thumbnail my_image.filename "100" max_height=100 as thumb %}
  

Имитируйте обрезку ваших изображений с помощью HTML

 {% thumbnail my_img.filename "100" crop="top" as thumb %}
<figure><img src="{{thumb}}" height="{{thumb.height}}" width="{{thumb.width}}"/></figure>
{% endthumbnail %}

# Your CSS file
figure {
max-height: 100px;
overflow: hidden;
}