How can I have my template display a list on two different div tags without having redundancies-CodePudding

I have a list from my Model but I want my template to display the list element in groups of 4 or half the total length of the list Example: let say i have 10 elements in my list i want 5 on the right size and 5 on the left side. Please see screenshot below.

This is how i want my page to look like:

But this is what i get:

This is my HTML file.

  <div >
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc dfkjhvxjdknfxzjxvkc.
    </p>
  </div>
  

  {% for skill in skills_list%}  
 
  <div >
   
    <div  data-aos="fade-up">
      <div >
        <span >{{skill.skill_name}} <i >{{skill.skill_value}}</i></span>
        <div >
          <div  role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

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

views.py:

#### TEST
class TestView(generic.ListView):
   model = Skills
   template_name = 'portfolio_app/test.html'


########################URL.py
from django.urls import path
from portfolio_app.models import *
from . import views


urlpatterns = [
    path('',views.fact,name='index'),
    #path('index/',views.SkillView.as_view,name='index'),
    path('about/',views.about_me,name='about'),
    path('service/',views.ServiceView.as_view(),name='service'),
    path('resume/',views.ResumeView.as_view(),name='resume'),
    path('contact/',views.ContactView.as_view(),name='contact'),
    path('test/',views.TestView.as_view(),name='test'),

]

CodePudding user response：

You can try to move <div > outside the for loop like this:

<div >
    <h2>Skills</h2>
    <p>hsjkhvdkdjhvjkdfnv kjdf, dfhvkhdnfvkjldf,xhvnkldsv.mckldfnv ,dfhxncjcshfxdjvhcnjsdnckndjvbc
        d,sxbc kjdjsxcbjdksbvc kjs,bhzscs,zhcnlksjhlnzcklsnzjcjsdzcjb ds
        cxdbjvcsdbzcjks,gdcbkjds,zbcn jkcdxbv,m dfxvchj bdxnvbjhdujxdnkck jdfvknc
        dfkjhvxjdknfxzjxvkc.
    </p>
</div>

<div >
    {% for skill in skills_list%}
    <div  data-aos="fade-up">
        <div >
            <span >{{skill.skill_name}} <i >{{skill.skill_value}}</i></span>
            <div >
                <div  role="progressbar" aria-valuenow={{skill.skill_value}}
                     aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

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

CodePudding user response：

Use slice like this:

  <div >
    <div  data-aos="fade-up">
      {% for skill in skills_list|slice:":5" %}   
        <div >
        <span >{{skill.skill_name}} <i >{{skill.skill_value}}</i></span>
        <div >
          <div  role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
     {% endfor %}
   </div>
   <div  data-aos="fade-up">
     {% for skill in skills_list|slice:"5:" %}   
       <div >
        <span >{{skill.skill_name}} <i >{{skill.skill_value}}</i></span>
        <div >
          <div  role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
        </div>
       </div>
    {% endfor %}
   </div>
  </div>

To get rid of redundant div's create a separate template for skills and include that in you current template using include template tag like this:

skills.html:

<div >
   <span >{{skill.skill_name}} <i >{{skill.skill_value}}</i></span>
     <div >
       <div  role="progressbar" aria-valuenow={{skill.skill_value}} aria-valuemin="0" aria-valuemax="100"></div>
     </div>
</div>

your current temple:

  <div >
    <div  data-aos="fade-up">
     {% for skill in skills_list|slice:":5" %}
      {% include 'skills.html' with skill=skill %}
     {% endfor %}
   </div>
  </div>

similarly for second loop.