Making a Text Preview

If you took Customizing Django Templates, 0:00 you might remember creating a markdown to HTML filter. 0:03 Even if you didn't take that class, 0:07 you can see that custom filter in course_extras.py. 0:09 So we know that we can save text formatted in markdown in the course description, 0:13 and it will render with the appropriate HTML tags in the browser. 0:18 But we're human and humans make mistakes. 0:23 If you make a mistake in the markdown formatting when typing in your course 0:26 description, you might not notice it for months unless someone tells you about it. 0:30 In this video, we're going to add a markdown preview to our admin site. 0:35 When someone types markdown formatted text into a long text field, 0:40 we'll be able to see how that text will look once it's loaded into our template. 0:44 Now this part gets a little complicated so we're going to go slowly, okay? 0:50 We want to add a markdown preview for the course model, so 0:55 we need to override the template that's loading in the admin form so 0:59 that we can add a div for the preview text. 1:03 But since we're editing the template to add this extra div, 1:07 we only want that div to appear for the course model and not for any other models. 1:11 So here's what we do, go back over here and then inside templates, and 1:16 inside the admin directory inside templates, 1:21 create another directory with the name of our app, which is courses. 1:25 Now, insides courses, create another subdirectory 1:30 with the name of the model for which we want to override a particular template. 1:34 In this case, course. 1:38 And just because I know that we're gonna need it here in a minute, 1:41 inside course create one more subdirectory called, includes. 1:46 All right, now the template we need to override is called fieldset.html, 1:51 but that's included by change_form.html. 1:58 So technically we need to override both changedform.html and fieldset.html. 2:02 Now we do this by going back to the Django GitHub repo, and finding change_form.html. 2:10 And just like we did with base_site.html, we're just gonna copy all of this. 2:17 And then inside course, 2:25 create a new file called change_form.html. 2:28 And just paste all that in there and save it. 2:34 Now, whenever we hit the back button in the GitHub repo, 2:39 we can see that fieldset.html is not here. 2:43 We actually have to go up here into includes to find fieldset.html. 2:47 So you can see why I had you go ahead and create that subdirectory called includes. 2:52 So now, we just highlight all of this to copy it. 2:56 And inside the includes subdirectory, 3:02 we create a new file called fieldset.html. 3:05 And paste everything in there and save that. 3:13 All right, now in change_form.html, 3:17 do a search for fieldset.html. 3:22 So now right here, we need to change the path to fieldset.html 3:26 because this admin/includes/fieldset.html isn't accurate anymore. 3:32 So we wanna change it to 3:39 admin/courses/course/includes/fieldset.h- tml. 3:41 All right, save that and we are done with change_form.html, so just close it. 3:47 Now over here in fieldset.html, right here at line 20, 3:54 right after this, if field.is_readonly else endif. 3:58 We wanna add our own if clause. 4:03 So if field.field.name 4:06 == 'description'. 4:11 Then we're gonna have this div that we're gonna call preview. 4:15 And then close our if statement. 4:22 Okay, what we're saying here is that if the field.name is description, 4:28 which is the field for the course model that will contain the markdown, 4:33 then make a place for a div that we are calling preview. 4:37 Now we can test that this div is loading by filling 4:42 it with something random like, Hi, Mom. 4:46 So save that, and then just refresh this page. 4:49 And you can see that, Hi, Mom loaded right there. 4:55 So we know we're in the right spot. 4:57 We can see this Description field and this is the div that contains the Hi, Mom. 4:59 So we're good. 5:04 Still with me? 5:06 All right, good. 5:07 In the next video, 5:08 we're actually gonna get down to business to create this markdown preview. 5:09 So stay with me. 5:14