在Django CMS中的轮播组件中使用原始图像大小和宽高比

Question

我正在使用前端插件中的 Django CMS 的 carousel 组件。

我对图像尺寸和纵横比有疑问。我尝试了一种根据此来源管理 CSS 文件的方法：

保持轮播中的图像长宽比

但是，这并不能解决我的问题。图像仍在被裁剪和下采样，导致分辨率较低。

我想以完整视图和原始宽高比显示图像。但是，插件中的轮播组件仅允许使用固定的宽高比，这与我的图像宽高比不符。我没有找到使用或选择图像原始长宽比的可能性。

此外，轮播组件似乎加载了图像的下采样和裁剪版本。

如果我理解正确的话，图像加载响应来自缩略图组件：

djangocms_frontend/contrib/carousel/templates/djangocms_frontend/bootstrap5/carousel/default/image.html

{% load cms_tags easy_thumbnails_tags %}
{% if instance.rel_image %}
    {% thumbnail instance.rel_image options.size crop=options.crop upscale=options.upscale subject_location=instance.rel_image.subject_location as thumbnail %}

    <img class="d-block w-100" src="{{ thumbnail.url }}" alt="{{ instance.rel_image.default_alt_text|default:'' }}" />
{% else %}
    <div class="d-block w-100"
        style="aspect-ratio: {{ aspect_ratio }}">
        {% for plugin in instance.child_plugin_instances %}
            {% render_plugin plugin %}
        {% endfor %}
    </div>
{% endif %}

我的问题是：

• 如何在 Django CMS 轮播组件中显示全宽、未裁剪且具有响应高度的图像？

或

• 如何配置轮播或缩略图组件以加载原始尺寸和宽高比的图像？

感谢您的宝贵帮助！

Answer 1

首先，我认为这是一个bug：无论如何，图像始终呈现 1024x768。 我鼓励您向他们提出问题：https://github.com/django-cms/djangocms-frontend

但是，可以通过提供自定义模板来解决此问题：

1. 在模板路径上，将

   djangocms_frontend/contrib/carousel

   应用程序中的三个文件 carousel.html、image.html、slide.html 复制到模板路径上某处的文件夹

   djangocms_frontend/bootstrap5/carousel/default

   中，最好在原始模板之前。现在您可以自定义模板。 （如果您不想覆盖所有轮播的模板，请命名最后一个文件夹，例如，

   preserve-ar

   。）

2. 通过调整image.html删除缩略图的创建：

   {% load cms_tags easy_thumbnails_tags %}
   {% if instance.rel_image %}
       <img class="d-block w-100" src="{{ instance.rel_image.url }}" alt=".  {{ instance.rel_image.default_alt_text|default:'' }}" />
   {% else %}
       <div class="d-block w-100"
           style="aspect-ratio: {{ aspect_ratio }}">
           {% for plugin in instance.child_plugin_instances %}
               {% render_plugin plugin %}
           {% endfor %}
       </div>
   {% endif %}
   

   这将使每张幻灯片根据其实际大小占据完整宽度（由于

   w-100

   类）和高度。这会导致轮播随着每个图像改变其高度 - 通常是不可取的。

3. 如果你想固定所有图片的高度，可以在模板中设置，例如

   <img class="d-block mx-auto" style="height: 50vh; ..."

   将图像的高度设置为视口高度的 50%。

   mx-auto

   类向左侧和右侧添加所需的边距。

4. 如果您决定不覆盖默认模板，而是添加自己的模板，则必须通过向您的

   settings.py

   添加类似的内容来让 djangocms-frontend 知道：

   DJANGOCMS_FRONTEND_CAROUSEL_TEMPLATES = (
       ("default", _("Default")),
       ("preserve-ar", _("Preserve aspect ratio")),
   )
   

   这将允许您选择将在轮播插件中使用哪个轮播模板。

希望这有帮助！