Flask 101: Use HTML templates & send variables

Welcome to part 3 of the the Flask 101 Series.

Flask 101: Create a Basic Python Web App
Flask 101: Add JSON to your Python Web App
Flask 101: Use HTML templates & send variables – This tutorial
Flask 101: Serve Images
Flask 101: Serve CSV Files

For this tutorial, we will create a random funny image + quote generator that you can refresh at will to lighten up your day. For a preview of the end result check the end of this tutorial 🙂

Also the full code for this project is available on my GitHub repo.

1 – Setup

If you want to use a Python 3 virtual environment, you can follow this post for example. But all you really need is to install Flask

# Install flask
pip install flask

Create the following directories and files, leave them empty for now. We fill fill them later.

static/
templates/
myapp.py
runapp.sh

First things first, you will need to download some funny images into the static/ directory. I took mine from these 2 sites – businessinsider and honesttopaws – but of course feel free to use your own. For simplicity you can just download the ones on my GitHub repo here.

2 – Create a basic web page

Inside the templates/ directory, create a file named index.html, with the contents below. This is a basic HTML web page that displays an h3 title and an image, with the exception of 2 things:

The content inside the <h3></h3> tags will be filled with a variable called random_quote, to be sent via your Flask app
The image inside img src is going to be a file under the ‘static’ directory you have created above, and the image filename will be specified by a variable called random_image, that is also going to be provided by your Flask app

<!DOCTYPE html>
<html>
<body>
<center>

<h3>{{ random_quote }}</h3>
<img src="{{url_for('static', filename=random_image)}}" />

</center>
</body>
</html>

Now let’s see how your Flask application will send these variables to index.html.

3 – Create your basic flask application

So far your directory structure should look like this

static/
   img1.jpg
   .. more images ... 
templates/ 
   index.html
myapp.py 
runapp.sh

Now open the file named myapp.py that you have created above, and add the content below. We are basically doing 3 things there:

def random_jaden_quote()
this function returns a random quote from Jaden Smith. I am not particularly a fan of Will Smith’s son, but during his teenage years, he published a series of quotes and tweets that are famous for making very little sense. I got mine from here.
def random_image()
this one is in charge for returning one of the images inside your static/ directory at random
@app.route(‘/’)
this is the main – and only – route of this app. It takes a random image, a random quote, and uses Flask’s render_template() function to send them to your index.html page

from flask import Flask, render_template
import os
import random

app = Flask(__name__)


def random_jaden_quote():
    """
    return a random quote from Jaden Smith
    """
    quotes = [
        "Instagram is not the answer.",
        "You can discover everything you need to know about everything by looking at your hands",
        "Being born was the most influential thing that’s ever happened to me, for myself.",
        "When Life Gives You Big Problems, Just Be Happy You Forgot All Your Little Problems.",
        "The Lack Of Emotion In My Face Doesn't Mean I'm Unhappy.",
        "When The First Animal Went Extinct That Should've Been A Sign.",
        "How Can Mirrors Be Real If Our Eyes Aren't Real."
    ]
    quote = "%s -- Jaden Smith" % random.choice(quotes)
    return quote


def random_image():
    """
    Return a random image from the ones in the static/ directory
    """
    img_dir = "./static"
    img_list = os.listdir(img_dir)
    return random.choice(img_list)


@app.route('/')
def myapp():
    quote = random_jaden_quote()
    image = random_image()
    return render_template('index.html', random_quote=quote, random_image=image)

4 – Run your app

In the same directory as myapp.py, create a file named runapp.sh with the following contents.

export FLASK_APP=myapp
export FLASK_ENV=development
flask run

Close the file, then in the command line, run it with

# Execute this in the command line inside the same directory 
bash runapp.sh

You should see the following output

* Serving Flask app "myapp" (lazy loading)
* Environment: development
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 319-407-766

Naysan Saran