0

i want to make a portfolio in django, i have a section in html that with {% for ... %} i connect it to my jobs list in dajngo to show my job's pictures,summary and title but in html code there is an id in this div that call another div in the code and when i perform a for loop this id is just repeat it self,how could i change this id in order to changed automatically?`

{% for job in jobdic.all %}
      <div class="col-md-6 col-lg-4">
        <a class="portfolio-item d-block mx-auto" **href="#portfolio-modal-1"**>
          <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
            <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
              <i class="fas fa-search-plus fa-3x"></i>
            </div>
          </div>
            <p>{{ job.summary }}</p>
          <img class="img-fluid" src="{{ job.image.url }}" alt="{{job.title }}">
        </a>
      </div>
    {% endfor %}

the problem area is in href that call another section in html with portfolio-modal-1 i need to write some code that can be change this portfolio-modal-1 to portfolio-modal-2 and 3 and ... automatically this is the section that its refers to :

 {% for job in jobdic.all %}
<div class="portfolio-modal mfp-hide" id="portfolio-modal-1">
  <div class="portfolio-modal-dialog bg-white">
    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
      <i class="fa fa-3x fa-times"></i>
    </a>
    <div class="container text-center">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2 class="text-secondary text-uppercase mb-0">Project Name</h2>
          <hr class="star-dark mb-5">
          <img class="img-fluid mb-5" src="{{ job.image.url }}" alt="">
          <p class="mb-5">{{ job.summary }}</p>
          <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
            <i class="fa fa-close"></i>
            Close Project</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endfor %}
sir prana
  • 3
  • 2
  • So, to get your question right, you want to replace, with each instance of the for loop, the id `#portfolio-modal-1`? – DeA Oct 22 '18 at 20:44
  • Yes DeA,exactly,i want it to change and match the id of my post,cause this for loop is adding posts from the admin page – sir prana Oct 23 '18 at 08:59

1 Answers1

0

It's probably best to use the id/primary key of each job:

<!-- in first loop -->
<a class="portfolio-item d-block mx-auto" href="#portfolio-modal-{{ job.pk }}">

<!-- in second loop -->
<div class="portfolio-modal mfp-hide" id="portfolio-modal-{{ job.pk }}">

Alternatively, use the {{ forloop.counter }} template tag in its place. Docs are at the bottom of this section.

MattRowbum
  • 2,162
  • 1
  • 15
  • 20
  • where do i add the pk in django ?! – sir prana Oct 23 '18 at 09:01
  • You don't need to add `pk`. If `jobdic` is a queryset of model objects, you should be able to use `{{ job.pk }}` right away. See https://stackoverflow.com/questions/2165865/django-queries-id-vs-pk – MattRowbum Oct 23 '18 at 11:55