news feed front-end - Django/HTML

I'm currently working on a social networking website with Django and HTML. On my blog list page, I have all the posts from various users displayed in a single container. But I want to separate these posts into individual tiles or containers, similar to how it's done on Facebook. Any tips on how I can achieve this? Thanks.

blog_list.html

  <section>

    <br>
  <div class="container" id ="main-cont">
    <div class="row">
     <div class="panel panel-default post">
      <div class ="panel-body">
       <div class ="row">
        <div class = "col-sm-1">
          <a class ="post-avatar thumbnail" href = "#"><img src ="{% static 'img/group.png' %}"></a>
        <!--  <hr>Created By: {{ post.author }}-->
        <div>
          {% for post in post_list %}
              <div class="post">

                  <h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}<br></h2>

                    <br>
                    <br>



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

Answer №1

Instead of going through the post_list loop again and creating a new container, there are alternative methods to achieve the same result. One option is using the {% if %} directive to determine the current loop iteration:

{% for post in post_list %}
    {% if forloop.counter > 5 %}  # Logic for new container
        <div>New Containers</div>
    {% else %}
        <div>First Five Containers</div>
    {% endfor %}
{% endfor %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for an easy way to use string.Format with <a ... class="button" in ASP.NET MVC?

Example link <div style="float:right;"><a href="<%= Url.Content("~/Home/List") %>" class="button"><span>Return to List</span></a></div> I am attempting to append an Id from my Model to the end of a URL, as shown ...

Center-align the text by disregarding the absolutely positioned element

I have created a custom flex table with filtering and sorting capabilities. The filter and sort icons are located in the right corner of the table header. Additionally, users can choose to align the header text left or center. The Issue: When positioning ...

Embed one module within another module and utilize the controller from the embedded module

I am attempting to create a module and inject it into the main module. Then, I want to inject the controller into the injected module but am facing issues. In my index.html file: <html ng-app="MenuApp"> <head> </head> <body> <d ...

Tips for showing a multiline string in a textarea

Setting the value of a textarea is straightforward: var foo='<div>Some html</div>\r\nSome html<br /><br />\r\n\r\n<div >Some html</div>\r\n</b>'; $('#my_texta ...

Eliminating the spacing between elements to create a seamless design

Currently immersed in the creation of a new website, I am facing an issue with closing the margin gap on the right side of the page. The problem persists despite setting the body's margin to 0px. Any assistance in resolving this issue would be greatly ...

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

Conceal the year, month, and day within a datetime-local input

I am working with <input type="datetime-local" step="1"/> input fields, and I want users to only be able to edit the hours, minutes, or seconds. This is due to setting the minimum value using let min = new Date().setHours(0,0,0) and the maximum value ...

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

Exploring optimal practices for CSS components and responsive design integration

If I were to develop a reusable component like a table that will be used across various pages, the content and number of columns may differ from one page to another, but the overall design should remain consistent. .my-table { background-color: ... et ...

Duplicate the PHP code for every section found within an INI file

<? $config = parse_ini_file('/list.ini', true); ?> <?echo'<select id="LBox" name="listbox" size="20" style="display:none;">'; foreach($config[MPR] as $id=>$label){ switch ($id) { case ($id== ...

Difficulties encountered when launching a Meteor app with React using static-html

I'm currently working on a project that uses the Meteor framework along with React. When I attempt to start the application using the npm start command, I keep encountering errors related to static-html files. As a newcomer to Meteor, I've attemp ...

Issue with adding a separate audio track to a video in HTML

Currently, I am facing a challenge while working with React.JS. I am attempting to display a default video with sound, but I have separate files for the video and the sound. Although the video is working perfectly fine, I am struggling to synchronize the a ...

Accordion transition: successfully collapses, but struggles to expand back up

I've been working on creating an accordion that smoothly rolls down when selected and rolls back up when closed. While I've managed to get it to roll down, it simply closes without any transition when I try to close it. I attempted setting a max ...

Display the initial page and activate the first navigation button when the page loads

Greetings to everyone. I am new to the world of jquery and currently in the process of learning. This is my script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"> </script> <script> $(function () { $ ...

What could possibly be causing the TypeError in my views.py query?

Upon visiting a user review page, I encountered the following error: TypeError at /reviews/ben/ show_reviews() got an unexpected keyword argument 'username' Interestingly, when I executed the same query (i.e., b = UserReview.objects.all, print ...

TS2339 Error: The property 'Default' is not a valid property for type 'string'

Hello, I am a beginner with Angular 2. I have encountered some issues that I need help with: Error Messages: app/components/playing-cables/-update.ts(82,12): error TS2339: Property 'options' does not exist on type 'jQuery'. app/compone ...

A method to trigger the opening of a div tag when a button is clicked using Vue.js

<div class="input-wrapper"> <div class="mobile-icon"></div> <input class="input-section label-set" type="text" v-model.trim="$v.mobile.$model" :class="{'is-invalid': ...

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

Firefox experiencing issue with Ajax form submission

Hey there, I'm encountering an issue with the code below not functioning correctly and completely in Firefox. It should display a message (loading, check errors) from the server after clicking submit, but in Firefox it just performs a regular submit w ...

How to include several images in a Django model

I am having difficulties displaying multiple images from a Django model on my template. Although it works in the admin, I can't seem to get it right on the template itself. Here is what I have attempted so far, but the images do not appear. models.py ...