Profile Page Design

We have created profile page but it is empty as of now. lets add some designs for our profile page. Copy these codes inside the content_block of profile.html

<div class="content-section">
  <div class="media">
    <img class="rounded-circle account-img" src="default.jpg">
    <div class="media-body">
      <h2 class="account-heading">{{current_user.username}}</h2>
      <p class="text-secondary">{{current_user.email }}</p>
    </div>
  </div>
  <!-- FORM HERE -->
</div>

our profile.html should look like

{% extends 'layout.html' %}
{% block content %}
<div class="content-section">
  <div class="media">
    <img class="rounded-circle account-img" src="default.jpg">
    <div class="media-body">
      <h2 class="account-heading">{{ current_user.username }}</h2>
      <p class="text-secondary">{{ current_user.email }}</p>
    </div>
  </div>
  <!-- FORM HERE -->
</div>
{% endblock content %}

We have now decent profile page but we still don't have any images. lets add image in our app. We will be adding image inside the static directory of our project.

lets create profile_pictures directory inside the static directory and add some images there. we will add an image and name it default.jpg so that this images gets displayed when user does not add their own images.

Note: we have set default value of our image field to 'default.jpg'. So the user will have this image as their default profile picture.

class User(...):
.
.
    image_file = db.Column(db.String(20), nullable=False, default='default.jpg')   

Now that we have an image in our project, lets change the src for img tag in profile page to "/static/profile_pictures/default.jpg".

<img class="rounded-circle account-img" src="/static/profile_pictures/default.jpg">

Lets rerun the app and now we can see a default image in our profile page.

Implementation can be found over this commit