Search code examples
htmlcssdjangoblogs

Django creating .row for every post


i first time writing in django. When i trying to post-template, this code create a new <div class="row"></div> for every post. How i fix that?


 <div class="container news-card">
{% for post in post_list %}
    <div class="row" stlye="max-width">
        <div class="card" style="width: 300px; height: 440px; margin-top: 60px; margin-left: 20px;">
            <div class="card-img-top m-fix"><img src="https://telgrafs.com/assets/src/news-col1-row1-card-image.png"></div>
            <div class="card-text news-category">Ekonomi</div>
            <div class="card-title news-ct">{{ post.title }}</div>
            <div class="ccard-text news-ctext up-fix">{{post.content|slice:":200" }}</div>
            <div class="card-img-bottom author-image"><img src="https://telgrafs.com/assets/src/profile-kaa.png"></div>
            <div class="card-author-name">{{ post.author }}</div>
            <div class="card-post-time">{{ post.created_on}} </div>
            <a href="{% url 'post_detail' post.slug  %}" class="card-text pb-more">DEVAMINI OKU &rarr;</a> 
        </div>
    </div>
{% endfor %}
</div>
{%endblock%}

Solution

  • If you don't want the new row generated on the for loop, just place it outside the {% for post in post_list %} declaration.

    E.g:

    <div class="container news-card">
        <div class="row" stlye="max-width">
        {% for post in post_list %}
        <div class="card" style="width: 300px; height: 440px; margin-top: 60px; margin-left: 20px;">
            <div class="card-img-top m-fix"><img src="https://telgrafs.com/assets/src/news-col1-row1-card-image.png"></div>
            <div class="card-text news-category">Ekonomi</div>
            <div class="card-title news-ct">{{ post.title }}</div>
            <div class="ccard-text news-ctext up-fix">{{post.content|slice:":200" }}</div>
            <div class="card-img-bottom author-image"><img src="https://telgrafs.com/assets/src/profile-kaa.png"></div>
            <div class="card-author-name">{{ post.author }}</div>
            <div class="card-post-time">{{ post.created_on}} </div>
            <a href="{% url 'post_detail' post.slug  %}" class="card-text pb-more">DEVAMINI OKU &rarr;</a> 
        </div>
        {% endfor %}
        </div>
    </div>
    {%endblock%}
    

    Everything in this declaration {% for post in post_list %} is going to be repeated for each one of the post_list elements.