Wagtail CMS: Adding a banner and banner fields

Every modern website has a banner. Often it comes with a title, subtitle, an image and an optional call to action button. In this tutorial we're going to add all 4 of those to our Home Page. Includes: Wagtail Images, ForeignKeys, ImageChooserPanel, PageChooserPanel and installing Bootstrap 4 as the frontend framework.
Full code for this (including code for part 2) can be found here:
learnwagtail.c...
Learn Wagtail from scratch with the official Wagtail for Beginners Course
learnwagtail.c...
Used in this video: Wagtail 2.4, Python 3.7, Django 2.1.5 #Wagtail #Django #Python

[@CodingForEverybody]

For more videos like this, check out learnwagtail.com and the entire UA-cam playlist at wagtail.io/course

[@23TrevorE]

This series is really excellent and especially welcome as there are so few good learning resources for Wagtail at the moment. Thank you so much for all the effort you've put into this, you're a very good teacher.

[@ShaffleOne]

why did this video got 300 less likes than previous one?((( I love this tuts.

[@oussamaladhari550]

Great Tutorial, thank you very much for all your efforts and detailed explanation

[@CodingForEverybody]

Glad you're enjoying the videos!! :)

[@keretlen]

Unfortunately the ImageChoosePanel has been removed from Wagtail. Using the 6.1 version of it, the following solution is the nearest what I could have:
1.: use InlinePanel('banner_image', label="Banner image", max_num=1), in content_panels instead of the ImageChoosePanel
2.: create a new class after the HomePage class like this:
class HomePageBannerImage(Orderable):
page = ParentalKey(HomePage, on_delete=models.CASCADE, related_name='banner_image')
image = models.ForeignKey('wagtailimages.Image', on_delete=models.CASCADE, related_name='+')
caption = models.CharField(blank=True, max_length=250)
panels = [
FieldPanel('image'),
FieldPanel('caption'),
]
3.: delete the banner_image from the HomePage class
4.: you changed your model, so don't forget to makemigrations and migrate.

[@ShaffleOne]

Damn wagtail is a cool thing! I love ittttt!

[@MatHEWStorm]

did ImageChooserPanel get removed? I can't find any information about it on the docs or on google, and I can't import it at all, I wonder if something replaced it in a newer version?? edit: it looks like a normal FieldPanel works for images.

[@itsRemco]

Thanks for your edit!

[@keretlen]

I found a solution for this, check my comment

[@renshengbaitai]

it is very good ,i like it ,just let you know someone like your video.

[@CodingForEverybody]

Thanks, I'm happy to hear you're enjoying the Wagtail series!

[@djoudibenarfa]

In the template 'self' is not working I my template is not showing anything, can you help me please?

[@asadullashaikh4977]

you are awesome, can plz create one video on wagtail backend with react frontend

[@georgeye2759]

Really helpful video. At 12:24, you had the option of "clear choice". I seem to have the other two buttons but not this one. Is this just because we are using different versions?

[@georgeye2759]

Wait sorry, I didn't allow "blank" for the foreign key. Thanks!

[@erikfrits6553]

Hi, I have decided to watch your whole series for second time to understand it better you are really good at tutorials!
How do you get description of wagtail functions? e.g. in 3:27 There is a pop-up window with explanation for ForeignKey, its attributes and doc strings... I am on PyCharm, but if its easier to make it work in Atom then I might even switch to it.
Thanks

[@CodingForEverybody]

Im using VS Code. PyCharm probably supports venv's - which is what Im using in these videos and thats what VS Code picks up on.

[@bambanx]

Hello folks how i can add a custom css class to each paragraph added on a richtextfield ? my model looks like : texto_central = RichTextField(features=["bold", "italic"]) and in the template i want it take the p-nosotros css class, template is some like this :
{{self.texto_central|richtext}}

thanks you

[@blabla-kk8bl]

What is the name of this theme?

[@douglasalves1155]

At 8:05 when I run "python3 manage.py makemigrations" the console returns "No changes detected", someone help?Thanks :)

[@CodingForEverybody]

Have you changed any of your models? You need to have edited one of the model fields, removed a model field, or created a new model field.

[@douglasalves1155]

@@CodingForEverybody I have created a new model field, I'm newbie in Django/Wagtail, thx a lot!!

[@CodingForEverybody]

@@douglasalves1155 Is the new model in a django app that's listed in your INSTALLED_APPS?

[@douglasalves1155]

@@CodingForEverybody yes, I already remove these wrong model from project, and It works fine! I think I ran a wrong command, which caused the problem. Thx :)

[@sfnshd]

Hi, I was just going through these tutorials and I noticed in my IDE that I couldn’t import the ImageChoosePanel. Could it be that it is not available in the latest version of wagtail? If so how can you go around this?

[@keretlen]

I found a solution for this, check my comment