Как вывести все изображения в цикле for?

Question

[alxxla]

У меня есть изображения профилей, я их обрезаю, но выводится одна и та же картинка для всех юзеров.
Во фронтенде не силен от слова совсем, а способ нашел в интернете. Буду рад помощи!

{% for profile in profile_list %}
    <svg width="250" height="250">
        <pattern id="pattern" width="100%" height="100%">
            <image href="{{ profile.avatar.url }}" width="200" height="200" preserveAspectRatio="xMidYMin slice"></image>
        </pattern>
        <circle cx="125" cy="125" r="100" fill="url(#pattern)"></circle>
    </svg>
        <h2><a href="{{ profile.get_absolute_url }}">{{ profile.user }}</a></h2>
    {% endfor %}

Comments

[Сергей Горностаев]

При чём тут фронтенд? Шаблонизатор работает на бэкенде.

[alxxla]

Сергей Горностаев, вcё, теперь не фронтенд

[alexalexes]

Выведите на бэкенде в отладку profile_list, посмотрите свойства avatar.url.

[alxxla]

alexalexes, через код элемента посмотрел вторую аватарку и она принадлежит это профилю

Answer 1

[alexalexes]

id для шаблона заливки круга должен быть для каждого элемента списка свой, так как выражение "url(#pattern)" оперирует css-селектором #pattern на всем html-документе и подхватывает первый попавшийся шаблон в первом попавшимся svg.
В вашем случае, первый id становится валидный и применяется в других svg, а все последующие id -не валидные с точки зрения всего документа html.
Для этих целей в цикле for используйте index. И необходимо сделать более уникальным id, нужно добавить каких-нибудь слов характеризующих его назначение, например, circle_avatar_pattern_{{ index }}.

{% for (index, profile) in profile_list %}
    <svg width="250" height="250">
        <pattern id="circle_avatar_pattern_{{ index }}" width="100%" height="100%">
            <image href="{{ profile.avatar.url }}" width="200" height="200" preserveAspectRatio="xMidYMin slice"></image>
        </pattern>
        <circle cx="125" cy="125" r="100" fill="url(#circle_avatar_pattern_{{ index }})"></circle>
    </svg>
        <h2><a href="{{ profile.get_absolute_url }}">{{ profile.user }}</a></h2>
    {% endfor %}

PS: Установленной среды Python у меня нет, код не проверял, проверяйте у себя.

Comments

[alxxla]

Скобки тут
{% for (index, profile) in profile_list %}
указываются, как ошибка.
Я их убрал и получил следующее:

ValueError at /profile/all/
Need 2 values to unpack in for loop; got 1.

[alxxla]

Всё, я понял вас и решил проблему. В качестве id использовал pk юзера

{% for profile in profile_list %}
    <svg width="250" height="250">
        <pattern id="circle_avatar_pattern_{{ profile.id }}" width="100%" height="100%">
            <image href="{{ profile.avatar.url }}" width="200" height="200" preserveAspectRatio="xMidYMin slice"></image>
        </pattern>
        <circle cx="125" cy="125" r="100" fill="url(#circle_avatar_pattern_{{ profile.id }})"></circle>
    </svg>
        <h2><a href="{{ profile.get_absolute_url }}">{{ profile.user }}</a></h2>
    {% endfor %}