MU
Maciej Urmański28 августа 2021 г. 16:06

Django template forloop counter change design after x article

Django, django

Hi, I try to achieve something like this:

But my code doesnt work. I mean, work, but elements just show as broken like this:

My code:

<div class="trending position-relative pb-65">
  <div class="container">
      <div class="row">
        {% for article in healtharticles %}

        <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
            <!-- News block -->
            {% if forloop.first %}
            <div>

              <!-- Featured image -->
              <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light">
                <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
                <a href="#!">
                  <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                </a>
              </div>

              <!-- Article data -->
              <div class="row mb-3">
                <div class="col-6">
                  <a href="" class="text-info">
                    <i class="fas fa-plane"></i>
                    Travels
                  </a>
                </div>

                <div class="col-6 text-end">
                  <u> 15.07.2020</u>
                </div>
              </div>

              <!-- Article title and description -->
              <a href="" class="text-dark">
                <h5>This is title of the news</h5>

                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
                  id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
                  adipisci iusto nam temporibus modi animi laboriosam?
                </p>
              </a>
              {% else %}
              <hr />

              <!-- News -->
              <a href="" class="text-dark">
                <div class="row mb-4 border-bottom pb-2">
                  <div class="col-3">
                    <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                         class="img-fluid shadow-1-strong rounded" alt="" />
                  </div>

                  <div class="col-9">
                    <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                    <p>
                      <u> 15.07.2020</u>
                    </p>
                  </div>
                </div>
              </a>
              {% endif %}

            </div>

            <!-- News block -->
          </div>


        {% endfor %}
      </div>
  </div>
</div>

Maybe You have idea how to do this corectly.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

1
Илья Чичак
  • 30 августа 2021 г. 17:46

Hi!
You've got an error in markup
the first div after {% if forloop.first %} is closing after {% endif %}. You should put openning div outside of forloop or make in every if-branch. (I prefer the second way)
so, you can try this:

<div class="trending position-relative pb-65">
    <div class="container">
        <div class="row">
            {% for article in healtharticles %}

            <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
                <!-- News block -->
                {% if forloop.first %}
                <div>

                    <!-- Featured image -->
                    <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
                        data-mdb-ripple-color="light">
                        <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
                        <a href="#!">
                            <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                        </a>
                    </div>

                    <!-- Article data -->
                    <div class="row mb-3">
                        <div class="col-6">
                            <a href="" class="text-info">
                                <i class="fas fa-plane"></i>
                                Travels
                            </a>
                        </div>

                        <div class="col-6 text-end">
                            <u> 15.07.2020</u>
                        </div>
                    </div>

                    <!-- Article title and description -->
                    <a href="" class="text-dark">
                        <h5>This is title of the news</h5>

                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
                            id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
                            adipisci iusto nam temporibus modi animi laboriosam?
                        </p>
                    </a>
                </div>

                {% else %}
                <hr />
                <div>

                    <!-- News -->
                    <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                            <div class="col-3">
                                <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
                                    class="img-fluid shadow-1-strong rounded" alt="" />
                            </div>

                            <div class="col-9">
                                <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                                <p>
                                    <u> 15.07.2020</u>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                {% endif %}
                <!-- News block -->
            </div>
            {% endfor %}
        </div>
    </div>
</div>

    Комментарии

    Только авторизованные пользователи могут публиковать комментарии.
    Пожалуйста, авторизуйтесь или зарегистрируйтесь
    Ua

    Qt - Тест 001. Сигналы и слоты

    • Результат:84баллов,
    • Очки рейтинга4
    Ua

    Qt - Тест 001. Сигналы и слоты

    • Результат:42баллов,
    • Очки рейтинга-8
    ОК

    Qt - Тест 001. Сигналы и слоты

    • Результат:47баллов,
    • Очки рейтинга-6
    Последние комментарии
    ИМ
    Игорь Максимов22 ноября 2024 г. 21:51
    Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
    Evgenii Legotckoi
    Evgenii Legotckoi31 октября 2024 г. 23:37
    Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
    A
    ALO1ZE19 октября 2024 г. 17:19
    Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
    ИМ
    Игорь Максимов5 октября 2024 г. 16:51
    Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
    d
    dblas55 июля 2024 г. 20:02
    QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
    Сейчас обсуждают на форуме
    f
    firstlunoxod15 февраля 2025 г. 13:46
    Рисование на QGraphicsScene при зажатой кнопке мыши Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
    Дмитрий
    Дмитрий3 февраля 2025 г. 16:24
    Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
    NW
    Nayo Wai30 января 2025 г. 19:22
    не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
    n
    nkly3 января 2025 г. 12:52
    Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
    M
    Marsel17 августа 2023 г. 0:26
    OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.

    Следите за нами в социальных сетях