Использование оригинального размера и соотношения сторон изображения в компоненте карусели в Django CMS

Я использую компонент карусель для Django CMS из списка внешних плагинов.

У меня проблема с размером и соотношением сторон изображения. Я попробовал подход к управлению CSS-файлом в соответствии с этим источником:

Поддерживать соотношение сторон изображения в карусели

Однако это не решает мою проблему. Изображение по-прежнему обрезается и уменьшается, что приводит к низкому разрешению.

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

Possible values for the image aspect ratios (Django CMS carousel)

Более того, похоже, что компонент карусели загружает уменьшенную и обрезанную версию изображения.

Если я правильно понял, ответ на загрузку изображения поступает от компонента миниатюр:

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 carousel?

ИЛИ

  • Как настроить компоненты карусели или миниатюр на загрузку изображений с их оригинальным размером и соотношением сторон?

Спасибо за ценную помощь!

Во-первых, я думаю, что это ошибка: изображения всегда отображаются в разрешении 1024x768, независимо от того, что происходит. Я бы посоветовал вам поднять вопрос здесь: https://github.com/django-cms/djangocms-frontend/issues

Однако существует решение этой проблемы путем предоставления пользовательских шаблонов:

  1. На пути к шаблону скопируйте три файла carousel.html, image.html, slide.html из приложения djangocms_frontend/contrib/carousel в папку djangocms_frontend/bootstrap5/carousel/default где-нибудь на пути к шаблону, в идеале - перед оригинальными шаблонами. Теперь вы можете настроить шаблоны. (Если вы не хотите перезаписывать шаблоны для всех каруселей, назовите последнюю папку, скажем, preserve-ar.)

  2. Уберите создание миниатюр, настроив файл image.html:

    {% load cms_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. Если вы решили не переписывать шаблоны по умолчанию, а добавить свои собственные, вам придется сообщить об этом djangocms-frontend, добавив в settings.py что-то вроде этого:

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

    Это позволит вам выбрать, какой шаблон карусели будет использоваться в плагине карусели.

Надеюсь, это поможет!

Вернуться на верх