Building a Social Media Site With Python and Django: Part 9 Final Improvements Part 1

Video Tutorial

Code on Github

This will be part 1 of two tutorials where we will put some final improvements on our social media application. We have most of the functionality done at this point, we just need to clean some things up and add a couple of additions to improve the user experience. In this first tutorial, we will add an external style sheet to clean up our templates, we will filter the social feed to only show posts by those users that we follow, and we will update some of the header text for the posts and comments.

External CSS

First we need to set up some variables in our settings.py to serve static files with our development server. If you have an older version of Django you might need to use the os.path.join(BASE_DIR, ‘static’) instead of the BASE_DIR / ‘static’ syntax.

socialnetwork/settings.py

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]
STATIC_URL = '/static/'

Now with this set up, we can create a folder in the root of our project called static. We can then create a style.css file within that folder. Now we just need to load this file in our base.html template file.

landing/templates/landing/base.html

{% load static %}
<link href="{% static 'style.css' %}" rel="stylesheet">

Now from here, we should be able to load in any styles from that file, so now you can go through and replace all styles in the templates with classes in the style.css file. Here is my completed css file after doing this.

.post-text {
    padding-top: 0.5rem;
}
.post-link {
    text-decoration: none;
}
.post-img {
    float: left;
    margin-right: 1rem;
}
.remove-default-btn {
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.edit-color {
    color: #333;
}

Social Feed Filter

Now that we have our templates cleaned up, let’s update our post list view to only show posts from users that we are following. Right now it shows the posts from every user which isn’t very good for the user using this application. We can easily do this with changing two lines in our views.py file. Instead of getting all of the posts, we can add a filter. We will use author__profile__followers__in=[logged_in_user.id]. This will go from the post to the author on that post, to the profile on that author, to the followers on that profile and checking if any of the objects in there match the currently logged in user.

social/views.py

logged_in_user = request.user
posts = Post.objects.filter(
    author__profile__followers__in=[logged_in_user.id]
).order_by('-created_on')

Update Post Header Text

Now finally, let’s update the header text for each post in comment, right now there is just a link with the user name. Let’s add the profile picture next to the user name that also links to the profile. Here is the files with that change completed.

social/templates/social/post_list.html

<div>
    <a href="{% url 'profile' post.author.profile.pk %}">
      <img class="rounded-circle post-img" height="30" width="30" src="{{ post.author.profile.picture.url }}" />
    </a>
    <p class="post-text">
      <a class="text-primary post-link" href="{% url 'profile' post.author.profile.pk %}">@{{ post.author }}
      </a> {{ post.created_on }}
    </p>
</div>

social/templates/social/post_detail.html

<div>
    <a href="{% url 'profile' post.author.profile.pk %}">
      <img class="rounded-circle post-img" height="30" width="30" src="{{ post.author.profile.picture.url }}" />
    </a>
    <p class="post-text">
      <a class="text-primary post-link" href="{% url 'profile' post.author.profile.pk %}">@{{ post.author }}
      </a> {{ post.created_on }}
    </p>
</div>

social/templates/social/profile.html

<div>
    <a href="{% url 'profile' post.author.profile.pk %}">
        <img class="rounded-circle post-img" height="30" width="30" src="{{ post.author.profile.picture.url }}" />
    </a>
    <p class="post-text">
        <a class="text-primary post-link" href="{% url 'profile' post.author.profile.pk %}">@{{ post.author }}
        </a> {{ post.created_on }}
    </p>
</div>

social/templates/social/search.html

<div>
    <a href="{% url 'profile' profile.pk %}">
        <img class="rounded-circle post-img" height="30" width="30" src="{{ profile.picture.url }}" />
    </a>
    <p class="post-text">
    <a class="post-link" class="text-primary" href="{% url 'profile' profile.pk %}">@{{ profile.user }}
    </a> {{ post.created_on }}
    </p>
</div>

Update Comment Header Text

Finally, let’s do the same thing but for the comment header text in the post_detail.

social/templates/social/post_detail.html

<div>
    <a href="{% url 'profile' comment.author.profile.pk %}">
    <img class="rounded-circle post-img" height="30" width="30" src="{{ comment.author.profile.picture.url }}" />
    </a>
    <p class="post-text"><a class="post-link text-primary" href="{% url 'profile' comment.author.profile.pk %}">@{{ comment.author }}
    </a> {{ comment.created_on }}
    </p>
    <div class="mb-3">
        {% if request.user == comment.author %}
        <a href="{% url 'comment-delete' post.pk comment.pk %}" class="edit-color">
            <i class="fas fa-trash"></i>
        </a>
            {% endif %}
    </div>
</div>

That will be where we will stop for now. We will come back and clean up the rest of the application later.