Weaving in Template Variables

00:00 When using a template to render your HTML, you can take advantage of template variables.

00:08 Inside your code function in the app.py file, add a dictionary named context, and this context dictionary will store the variables you want to pass on into the base.html template.

00:20 This key-value pair is a very vital part of your code image generator. The value will be a string, and in the string, you add the code that you want to be displayed in your code image generator.

00:33 For example, you can add in some Python code: print( "Hello"). Since you want the double quotes to be part of your Python string, it’s a good idea to use single quotes outside of the string.

00:47 That way, you don’t need to escape the double quotes inside it because that is the Python quote that you want to display on your website, and that means you don’t want to have any escape characters in there.

01:00 So with the context dictionary and the code key-value pair in place, go into line 10 where you have the render_template() function call, and add in another argument.

01:12 And there you want to unpack the context dictionary to pass in all the keys and values that are stored in there. You can do this with the double asterisk and then the dictionary name.

01:24 In that situation, it’s context.

01:27 Now you are passing in the unpacked context dictionary. That means you can access the code variable inside your template and you will receive the value that this variable stores.

01:39 Head over to your base.html file and underneath the h1 tag, create a new HTML tag. And this time you can use a div and maybe you can give it a class my_code.

01:54 You will use this class later, so it doesn’t hurt to have it here already. And then with two curly braces, you can access the code variable that you’re passing in.

02:05 Once you save base.html and reload the browser, you can see that print("Hello") is shown on your website and that’s pretty nice because that’s another step into the code image generator direction.

02:19 In order to now make a screenshot of the code that you are having here, the print() function, maybe we can adjust the utils.py file and not take a screenshot of the h1 element, but the element with the class my_code.

02:35 So in base.html, you have div with the class my_code, and then in the take_screenshot() function inside utils.py in the locator call, you pass in .my_code.

02:51 That means give me the element with the class my_code, save the utils.py file, and then run the utils.py file.

03:02 And now inside of your screenshot directory, you should find a screenshot that shows your print() function call. So calling utils.py works now to make a screenshot of the code, but it’ll actually be nice to have this functionality baked into the web app.

03:18 So we’re not having to run the utils.py file every time we want to make a screenshot, but use Flask views for that. So that’s what we will do in the next lesson.