MU
28 августа 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: 

  1. <div class="trending position-relative pb-65">
  2.   <div class="container">
  3.       <div class="row">
  4.         {% for article in healtharticles %}
  5.  
  6.         <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
  7.             <!-- News block -->
  8.             {% if forloop.first %}
  9.             <div>
  10.  
  11.               <!-- Featured image -->
  12.               <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light">
  13.                 <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
  14.                 <a href="#!">
  15.                   <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
  16.                 </a>
  17.               </div>
  18.  
  19.               <!-- Article data -->
  20.               <div class="row mb-3">
  21.                 <div class="col-6">
  22.                   <a href="" class="text-info">
  23.                     <i class="fas fa-plane"></i>
  24.                     Travels
  25.                   </a>
  26.                 </div>
  27.  
  28.                 <div class="col-6 text-end">
  29.                   <u> 15.07.2020</u>
  30.                 </div>
  31.               </div>
  32.  
  33.               <!-- Article title and description -->
  34.               <a href="" class="text-dark">
  35.                 <h5>This is title of the news</h5>
  36.  
  37.                 <p>
  38.                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
  39.                   id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
  40.                   adipisci iusto nam temporibus modi animi laboriosam?
  41.                 </p>
  42.               </a>
  43.               {% else %}
  44.               <hr />
  45.  
  46.               <!-- News -->
  47.               <a href="" class="text-dark">
  48.                 <div class="row mb-4 border-bottom pb-2">
  49.                   <div class="col-3">
  50.                     <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
  51.                          class="img-fluid shadow-1-strong rounded" alt="" />
  52.                   </div>
  53.  
  54.                   <div class="col-9">
  55.                     <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
  56.                     <p>
  57.                       <u> 15.07.2020</u>
  58.                     </p>
  59.                   </div>
  60.                 </div>
  61.               </a>
  62.               {% endif %}
  63.  
  64.             </div>
  65.  
  66.             <!-- News block -->
  67.           </div>
  68.  
  69.  
  70.         {% endfor %}
  71.       </div>
  72.   </div>
  73. </div>
  74.  

Maybe You have idea how to do this corectly.

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

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

966
1
0
0
0
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: 

  1. <div class="trending position-relative pb-65">
  2.     <div class="container">
  3.         <div class="row">
  4.             {% for article in healtharticles %}
  5.  
  6.             <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
  7.                 <!-- News block -->
  8.                 {% if forloop.first %}
  9.                 <div>
  10.  
  11.                     <!-- Featured image -->
  12.                     <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
  13.                         data-mdb-ripple-color="light">
  14.                         <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
  15.                         <a href="#!">
  16.                             <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
  17.                         </a>
  18.                     </div>
  19.  
  20.                     <!-- Article data -->
  21.                     <div class="row mb-3">
  22.                         <div class="col-6">
  23.                             <a href="" class="text-info">
  24.                                 <i class="fas fa-plane"></i>
  25.                                 Travels
  26.                             </a>
  27.                         </div>
  28.  
  29.                         <div class="col-6 text-end">
  30.                             <u> 15.07.2020</u>
  31.                         </div>
  32.                     </div>
  33.  
  34.                     <!-- Article title and description -->
  35.                     <a href="" class="text-dark">
  36.                         <h5>This is title of the news</h5>
  37.  
  38.                         <p>
  39.                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
  40.                             id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
  41.                             adipisci iusto nam temporibus modi animi laboriosam?
  42.                         </p>
  43.                     </a>
  44.                 </div>
  45.  
  46.                 {% else %}
  47.                 <hr />
  48.                 <div>
  49.  
  50.                     <!-- News -->
  51.                     <a href="" class="text-dark">
  52.                         <div class="row mb-4 border-bottom pb-2">
  53.                             <div class="col-3">
  54.                                 <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
  55.                                     class="img-fluid shadow-1-strong rounded" alt="" />
  56.                             </div>
  57.  
  58.                             <div class="col-9">
  59.                                 <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
  60.                                 <p>
  61.                                     <u> 15.07.2020</u>
  62.                                 </p>
  63.                             </div>
  64.                         </div>
  65.                     </a>
  66.                 </div>
  67.                 {% endif %}
  68.                 <!-- News block -->
  69.             </div>
  70.             {% endfor %}
  71.         </div>
  72.     </div>
  73. </div>
    0
    0
    0

    Комментарии

    Только авторизованные пользователи могут публиковать комментарии.
    Пожалуйста, авторизуйтесь или зарегистрируйтесь
    Actions
    Написать статьюЗадать вопросПройти тестРасшарить код