Решение барабан для обработки отзывчивый миниатюр в шаблоне Джанго файлов


Для отображения соответствующего изображения для набора отзывчивый точки останова я поставил построили контекст процессора, который просто передает некоторые предсказывает с останова и информация о разрешении изображения. Затем я петлю через эти предсказывает для того, чтобы создать отзывчивый эскизах, а также построения соответствующих CSS запросы средств массовой информации.

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

Как я могу сделать эту миниатюру/отзывчивый останова генерирующего функциональность более сухой?

context_processors.py

def thumbsizes(request):
thumbsizes = {
    'screensizes': [{
        'xs': '',
        'sm': '796px',
        'md': '1024px',
        'lg': '1216px',
        'xl': '1408px',
    }],
    'hero': [{
        'xs': '600x827',
        'sm': '900x400',
        'md': '1200x400',
        'lg': '1800x400',
        'xl': '2400x400',
    }],
    'main': [{
        ...
    }],
    ...
}
return {"thumbsizes": thumbsizes}

_hero.html

{% with object.image as image %}
    {% with class_name=".c-hero" %}
    <style type="text/css">
        {% for size in thumbsizes.hero %}
            {% for key, value in size.items %}
                {# Build thumbnail with value from size Dict #}
                {% thumbnail image value crop upscale subject_location=image.subject_location as thumb %}

                {# Do not apply media query for extra-small devices #}
                {% if key == 'xs' %}
                {{ class_name }} {% if child_class %}{{ child_class }}{% endif %} {
                    background-image: url({{ thumb.url|default:'/static/img/placeholder.jpg' }});
                }
                {% else %}
                    {% for screensize in thumbsizes.screensizes %}
                        {% for skey, svalue in screensize.items %}
                            {% if skey != 'xs' and key == skey %}
                            @media screen and (min-width: {{ svalue }}) {
                                {{ class_name }} {% if child_class %}{{ child_class }}{% endif %} {
                                    background-image: url({{ thumb.url|default:'/static/img/placeholder.jpg' }});
                                }
                            }
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        {% endfor %}
    </style>
    {% endwith %}
{% endwith %}

<div class="c-hero"></div>


102
1
задан 28 января 2018 в 03:01 Источник Поделиться
Комментарии