How to Encourage Better Image Uploads with Help Text

Hey everyone, I'm here today to show you how to use the help text feature in Wagtail to help editors with a very common image problem. And just a quick reminder here, I have chronic migraine and that is why I'm wearing these amazing glasses. Alright, welcome to the showcase On Wagtail. org. This is where we show off some of our favorite projects that are made with Wagtail. You should totally check them all out. And if you have any great projects to share, please, please do get in touch with us But anyway, let me show you the issue here is probably pretty obvious to you. You can see with these two cards here that the images have very different proportions to each other. And this is because

the person who uploaded the image here didn't know what the correct dimensions were for the image. And so they just picked an image they thought would work. And uh it doesn't work in the way the design is showing up here. And if we keep scrolling down um to look at the other new case studies that were added, these two look pretty good. And then down here, it looks like these proportions are slightly off as well, so we might want to adjust these here too. Now, there are a few different ways that you can solve this particular problem. There you definitely can write code in Wagtail to provide images in different dimension sizes. But even that sort of code can't really adjust things if

the image proportions are wrong, if the ratio is off, then even if you resize the image to like the correct width or the correct height The uh the lock on the image and the height means that it's always going to be skewed. So I'm gonna show you a pretty quick and easy way to go ahead and give editors an extra cue. Um, because uh trust me, the people who upload these images w you know and look at the preview are going to be like, well, I don't know why this is looking weird. This is like how do I fix this And they might try uploading the image a few different times and they might not know that they have to change the dimensions. Not every editor knows how you can you know, do this whole right click thing here

and inspect in a browser. Um most people who are developers uh know this trick already. I I'm just showing it right here in case there are any editors out in the audience because you can go to the layout tab and I'm using Firefox but there's a very similar process in Chrome and other browsers as well. And you can see here that the the image is at the correct width that the design is calling for, which is around 475 pixels. Uh but the uh d actually this is not the image dimension. Sorry, oh let me go up to the actual image. That was not highlighted. Yes, okay. Uh so now we're looking at the around the correct dimensions, which is around 600 pixels is is what the design and the code is calling for.

But the fact that it's like around 300, whereas the dimensions for these images is probably more appropriate for 600 to 400 uh means that it definitely looks weird within the design. So let me go ahead and show you how we can use a bit of help text to give editors the information they need to make images look great I want to show you all the back end of the showcase page before we go over to the codes so that you can get an idea what the fields look like. And rather than make you scroll through all 25 amazing case studies that we have right now, I'm just gonna like pick one down here. Um, yep, I went a little bit too far, but the mini-map is definitely faster than just manual scrolling.

Yep, here is the one we want to fix. And so you can see each showcase item has a title field. There is also a sector field that is a category that we put each of these in. And then there is a description that we include as well along with the image, the alt text, and the There are optional fields for adding a logo as well as a link. We can use an external link or an internal link. And then we have some link text. as well so that people can either visit the website or read the case study that we include there. And what I want to do is provide some more information around this image field

here so that editors can know what dimensions they need to use for this particular field to make their images look good. This is the repository for Wagtail. org, and I am in the showcase application and in the models. py file where all of the models for the showcase page can be found. And so we're just gonna scroll past the page model here until we get to the individual items that appear. Uh so let's get down here. Yep, here we are, showcase item. These are kind of similar to stream field blocks. This is a orderable instead of a stream field block, but it's where we tell like the page model, hey, we're going to be stacking these items in this particular order.

And right here, I'm gonna find our image field Which is where we want to provide that additional information. All I'm gonna do is add this one extra line here, and I'm gonna add a little help text, a little extra instruction for the editor. To give them an idea what size the image needs to be to make it look good. And so right here I just have help text that says image ratio is 3 to 2. EG, which means for example, and I provide another, you know, unit as well, 600 to 400 pixels. Because a lot of people commonly understand pixels, fewer people understand ratios. It's good to give them a

pixel measurement as well. Alright, back in the admin here. I'm gonna go ahead and hit refresh and you'll notice that Now under the image field you'll see a little bit of text here that says image ratio 3 to 2, eG 600 to 400 pixels. And so that is just a quick way to provide some additional information so that editors know how to make things look good. That way they can go ahead and upload images that have the right sizes to begin with. Okay, now that I as the editor happen to know what the correct dimensions are, I've already automatically like you know created some files uh

before this demo. Uh so I'm gonna go ahead and go to the edit this image area here and I'm gonna go ahead and replace this file with the correct size. Yeah we don't want my screenshot graveyard here. Let's get to the right file which is under documents and let's go to wagtail. org art. Yep, here is the corrected showcase art and we want MSD UK So go ahead and save that. Alright, that has been updated. And since um the images like just get Swapped out, you can go ahead to wherever the page or preview is and just hit refresh. And you can see now everything looks

much more proportional, and the design looks way better. Okay everybody, if you found this video on help text helpful, please go ahead and like and subscribe to get more videos like this one. Also, please join our newsletter. There's a link down in the video description.