如何使用 sorl-thumbnail 设置固定宽度、最大高度（在 Django 中）

发布于 2024-12-12 18:47:00 字数 444 浏览 2 评论 0原文

我不知道是否可以在 django 模板中使用 sorl-thumbnail 创建以下缩略图：

固定宽度，必要时放大。
最大高度。如果调整后的图像比最大高度短，我不介意。
我不想横向裁剪图像，但我不介意纵向裁剪图像。

如果我能够分两步完成此操作，我会：

将图像大小调整为 x 宽度，从而允许放大。
裁剪图像以适合 x x y 的矩形。

我能做的最好的就是这样，它可以使宽度看起来不错，但不会裁剪高度。

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

有什么想法吗？

原文

I can't work out if it's possible to create the following thumbnail using sorl-thumbnail in a django template:

Fixed width, upscaled if necessary.
Maximum height. If the resized image is shorter than the max height than I don't mind.
I don't want to crop the image width-wise but I don't mind cropping it height-wise.

If I were able to do this in two steps, I would:

Resize the image to x width, allowing upscaling.
Crop the image to fit within a rectangle x by y.

The best I can do is this, which gets the width looking good but doesn't crop the height.

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

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里梦着梦中梦 2024-12-19 18:47:00

据我所知，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;
}

As far as I know, sorl-thumbnail does not allow you to do that in one step. If you wanted max-height only, you could use the "x100" geometry syntax, but it doesn't ensure fixed width.

I can see three alternatives:

Use the is_portrait filter to find out if you will need cropping or not:

{% 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 %}

Make a custom sorl engine to crop at 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 %}

Simulate cropping your images via 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;
}

回复收藏 0 原文

~没有更多了~