CODEWITHSUNDEEP
djangodjango-templates
jabs
jabs

Reputation: 1848

loop values into divs in django template

I have a table with 9 values. I want to loop through the table and put the results into a div structure in the template.

I tried to cycle through them, but I wasn't able to put them into different divs.

The following works to put the same value in both places. How can I increment to the next group_nm?

{% for g in groups %}

    <div class="left1">
            <a href="/group/{{ g.group_nm }}">
        <img src="/site_media/images/groups/{{ g.group_nm }}.gif" height="125px" width="200em" />
            </a>
    <p align="center">    
        <font size="5" face="Georgia, Arial" color="maroon">
            {{ g.group_nm }}
        </font>
    </p>
    </div>

    <div class="left2">
            <a href="/group/{{ g.group_nm }} ">
        <img src="/site_media/images/groups/{{ g.group_nm }}.jpg" height="125px" width="200em" />
            </a>
    <p align="center">          
        <font size="5" face="Georgia, Arial" color="maroon">
            {{ g.group_nm }}
        </font>
    </p>         
    </div>

Thanks.

EDIT: I want to do this with 9 groups (eventually, in another place, I'll want to do it with an unlimited number). The above example only shows an example of 2 that are repeated.

Upvotes: 0

Views: 1337

Answers (3)

donarb
donarb

Reputation: 184

You can just use the forloop.counter value to create the class name (assuming they are named left1, left2, left3, left4, left5, etc.):

{% for g in groups %}
      <div class="left{{ forloop.counter }}">
         <a href="/group/{{ g.group_nm }}">
         <img src="/site_media/images/groups/{{ g.group_nm }}.gif" height="125px" width="200em" />
         </a>
         <p align="center">    
             <font size="5" face="Georgia, Arial" color="maroon">
                {{ g.group_nm }}
             </font> 
         </p>
       </div>
{% endfor %}

Upvotes: 2

jabs
jabs

Reputation: 1848

Resolved it, but only if I know the number of rows that will be returned. This is will not work with unlimited numbers and isn't as elegant as I want, but it'll do.

I used the ifequal forloop.counter which I found in the django google group.

<body>
{% for g in groups %}
    {% ifequal forloop.counter 1 %}
    <div class="left1">+
            <a href="/group/{{ g.group_nm }}">
        <img src="/site_media/images/groups/{{ g.group_nm }}.gif" height="125px" width="200em" />
            </a>
    <p align="center">    
        <font size="5" face="Georgia, Arial" color="maroon">
            {{ g.group_nm }}
        </font>
    </p>
    </div>
    {% endifequal  %}
    {% ifequal forloop.counter 2 %}  
    <div class="left2">
            <a href="/group/{{ g.group_nm }} ">
        <img src="/site_media/images/groups/{{ g.group_nm }}.jpg" height="125px" width="200em" />
            </a>
    <p align="center">          
        <font size="5" face="Georgia, Arial" color="maroon">
            {{ g.group_nm }}
        </font>
    </p>         
    </div>

    {% endifequal  %}
    {% ifequal forloop.counter 3 %}  
    <div class="left3">
            <a href="/group/{{ g.group_nm }} ">
       <img src="/site_media/images/groups/{{ g.group_nm }}.gif" height="125px" width="200em" />
            </a>
    <p align="center">
        <font size="5" face="Georgia, Arial" color="maroon">
            {{ g.group_nm }}
        </font>     
    </p>            
    </div>
</div> 

    {% endifequal  %}

and on through all 9 groups.

Upvotes: 0

Rohan
Rohan

Reputation: 53376

You can do this in template:

{% for g in groups %}
    {% if forloop.counter|divisibleby:"2" %}
      <div class="left1">
         <a href="/group/{{ g.group_nm }}">
         <img src="/site_media/images/groups/{{ g.group_nm }}.gif" height="125px" width="200em" />
         </a>
         <p align="center">    
             <font size="5" face="Georgia, Arial" color="maroon">
                {{ g.group_nm }}
             </font> 
         </p>
       </div>
    {% else %}
        <div class="left2">
           <a href="/group/{{ g.group_nm }} ">
              <img src="/site_media/images/groups/{{ g.group_nm }}.jpg" height="125px" width="200em" />
           </a>
           <p align="center">          
               <font size="5" face="Georgia, Arial" color="maroon">
                    {{ g.group_nm }}
               </font>
           </p>         
        </div>
    {% endif %}
{% endfor %}

Upvotes: 1

Related Questions