Wagtail Photography 3

  • Mon, Feb 1, 2021
  • 2-minute read

So in the previous post post, we implemented a simple home page and added a big picture to it. Today we’ll quickly add the header and the footer. Remember out to do list?

  1. Header with menu links (we will add the header for now, but no menu links)
  2. Footer with social links and footer image (we will add a footer to template, but empty for now)
  3. big picture in the middle so we need to be able to choose an image

We did the third, but not the first two. Let’s add the header, I’m gonna use one from Bootstrap, specifically the first one from here. We will add the following code to our base.html template (so that we have it on all subsequent pages).

First, add the bootstrap css in the global sylesheets section.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Then, add the following in at the beginning of our body class.

        <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
            <div class="container-fluid">
              <a class="navbar-brand" href="/">Home</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse flex-row-reverse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Page 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Page 3</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

And also add the bootstrap javascript to the global javascript section towards the end of our base.html file.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

If you save, we will now have a header. Don’t worry about the fake links for now, we will change that when we implement the menu system.

Let’s also add a quick footer to our website, add this to our base.html file after our content blocks ({% block content %}{% endblock %}).

          <nav class="navbar fixed-bottom navbar-dark bg-transparent">
            <div class="container-fluid justify-content-center">
              <a class="navbar-brand" href="#">&#169; 2021</a>
            </div>
          </nav>

Feel free to change the styling classes for the header text, footer colors, etc.

  1. Header with menu links (we will add the header for now, but no menu links)
  2. Footer with social links and footer image (we will add a footer to template, but empty for now)
  3. big picture in the middle so we need to be able to choose an image

In the next post we will create the Projects page. Today was a quick one.

wagtailbackendpython wagtailpythondjango