MU
Maciej UrmańskiТам. 28, 2021, 6: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, 7: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>

    Пікірлер

    Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
    Кіріңіз немесе Тіркеліңіз
    OI
    • Ora Iro
    • Жел. 24, 2024, 6:38 Т.Ж.

    C++ - Тест 001. Первая программа и типы данных

    • Нәтиже:40ұпай,
    • Бағалау ұпайлары-8
    AD

    C++ - Тест 004. Указатели, Массивы и Циклы

    • Нәтиже:50ұпай,
    • Бағалау ұпайлары-4
    m
    • molni99
    • Қаз. 26, 2024, 1:37 Т.Ж.

    C++ - Тест 004. Указатели, Массивы и Циклы

    • Нәтиже:80ұпай,
    • Бағалау ұпайлары4
    Соңғы пікірлер
    ИМ
    Игорь МаксимовҚар. 22, 2024, 11:51 Т.Ж.
    Django - Оқулық 017. Теңшелген Django кіру беті Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
    Evgenii Legotckoi
    Evgenii LegotckoiҚаз. 31, 2024, 2:37 Т.Қ.
    Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
    A
    ALO1ZEҚаз. 19, 2024, 8:19 Т.Ж.
    Qt Creator көмегімен fb3 файл оқу құралы Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
    ИМ
    Игорь МаксимовҚаз. 5, 2024, 7:51 Т.Ж.
    Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
    d
    dblas5Шілде 5, 2024, 11:02 Т.Ж.
    QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
    Енді форумда талқылаңыз
    Evgenii Legotckoi
    Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
    добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
    t
    tonypeachey1Қар. 15, 2024, 6:04 Т.Ж.
    google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
    NSProject
    NSProjectМаусым 4, 2022, 3:49 Т.Ж.
    Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
    9
    9AnonimҚаз. 25, 2024, 9:10 Т.Ж.
    Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

    Бізді әлеуметтік желілерде бақылаңыз