Dynamically Loading the Templates with Context

The whole point here is that we want our website's View to reflect the information in our Models (did I mention Django is what's known as an MVC framework???). That's why we passed our context dictionary in our views.py method -- we wanted to hand that information over to the front-end so it can reflect what's going on in the back-end.

In this section, we'll be modifying the html in templates/index.html.

Statically Making a Post

Let's first make a post statically so that we can see what we want it to look like!

<div class="image-post">
    <div class="image-area">
        <img class="image" src="http://farm2.static.flickr.com/1069/532586595_5401bebebd.jpg">
        </div>
    <div class="caption-text">
        Observe an elephant in its natural environment #Throwback Tuesdays
    </div>
    <div class="postedby-text">
        Posted by Rohan
    </div>
</div>

Now lets put it into a row, container, and column bootstrap style to take up a third of the page:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="image-post">
                <div class="image-area">
                    <img class="image" src="http://farm2.static.flickr.com/1069/532586595_5401bebebd.jpg">
                    </div>
                <div class="caption-text">
                    Observe an elephant in its natural environment #Throwback Tuesdays
                </div>
                <div class="postedby-text">
                    Posted by Rohan
                </div>
            </div>
        </div>
    </div>
</div>

Now let's make a few of them:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="image-post">
                <div class="image-area">
                    <img class="image" src="http://farm2.static.flickr.com/1069/532586595_5401bebebd.jpg">
                    </div>
                <div class="caption-text">
                    Observe an elephant in its natural environment #Throwback Tuesdays
                </div>
                <div class="postedby-text">
                    Posted by Rohan
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="image-post">
                <div class="image-area">
                    <img class="image" src="http://farm2.static.flickr.com/1069/532586595_5401bebebd.jpg">
                    </div>
                <div class="caption-text">
                    Observe an elephant in its natural environment #Throwback Tuesdays
                </div>
                <div class="postedby-text">
                    Posted by Rohan
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="image-post">
                <div class="image-area">
                    <img class="image" src="http://farm2.static.flickr.com/1069/532586595_5401bebebd.jpg">
                    </div>
                <div class="caption-text">
                    Observe an elephant in its natural environment #Throwback Tuesdays
                </div>
                <div class="postedby-text">
                    Posted by Rohan
                </div>
            </div>
        </div>
    </div>
</div>

I know, it's beautiful, but lets style this a bit with some CSS on these classes!

Adding the following code to static/css/index.css:

.image-post {
    background-color: #d3d3d3;
}

.image {
    width: 100%;
    height: 250px;
}

.caption-text {
    padding: 15px;
}

.postedby-text {
    padding: 15px;
}

Dynamically Making a Post

Let's now figure out how to load these dynamically instead of statically. We have the "posts" variable in our template and we can loop through it like so:

{% for post in posts %}

{% endfor %}

Access variables in the post like so:

{% for post in posts%}
    {{ post.imgURL }}
    {{ post.caption }}
{% endfor %}

Now let's create the post template to put into our HTML:

{% for post in posts%}
    <div class="col-md-4">
        <div class="image-post">
            <div class="image-area">
                <img class="image" src="{{ post.imgURL }}">
                </div>
            <div class="caption-text">
                {{ post.caption }}
            </div>
            <div class="postedby-text">
                Posted by {{ post.postedBy }}
            </div>
        </div>
    </div>
{% endfor %}

Now all together:

<div class="container">
    <div class="row">
        {% for post in posts%}
            <div class="col-md-4">
                <div class="image-post">
                    <div class="image-area">
                        <img class="image" src="{{ post.imgURL }}">
                        </div>
                    <div class="caption-text">
                        {{ post.caption }}
                    </div>
                    <div class="postedby-text">
                        Posted by {{ post.postedBy }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

Now if we add a new post through the admin class, it will automatically display on our page because our website is loading the homepage dynamically!