Images and documents

What this episode covers

Renditions are database rows, not files. Wipe your media folder, restore a backup onto a new server, and Wagtail will keep serving URLs for files that are gone: eleven rows, eleven 404s. There is a one-line fix and it ships with Wagtail.

The groundwork: images and documents are already installed, nothing to add; why media/ is gitignored and what that means for your deploys; and the image ForeignKey, with on_delete=SET_NULL rather than CASCADE.

Then the template side: what the image tag actually does, filter specs (width, height, fill, max, min, format), srcset_image for responsive images in one tag, and focal points with a real before and after at the same fill spec.

Also: ImageBlock instead of ImageChooserBlock, and why alt text is content rather than a filing label; documents, and why they are served by a view rather than as static files; and WAGTAILIMAGES_IMAGE_MODEL, a day-one decision we name and deliberately do not take.

Chapters

1. 0:00 A studio site with no pictures
2. 0:19 Nothing to install
3. 0:43 Why media/ is gitignored
4. 1:03 The image ForeignKey
5. 1:15 SET_NULL, never CASCADE
6. 1:37 What the image tag actually does
7. 2:01 Filter specs
8. 2:19 Responsive images in one tag
9. 2:44 Focal points, before and after
10. 3:07 Two things to know about them
11. 3:28 Renditions are rows, not files
12. 3:45 Eleven rows, eleven 404s
13. 4:15 The fix that ships with Wagtail
14. 4:32 The default alt text is a filing label
15. 4:54 ImageBlock, not ImageChooserBlock
16. 5:17 Alt text is content
17. 5:37 Documents
18. 5:50 Why documents go through a view
19. 6:10 A day-one decision, named not done
20. 6:37 The finished hero
21. 6:49 Further down the page
22. 7:09 The About page
23. 7:22 Commit and tag
24. 7:29 Next episode

Versions on screen

Wagtail 7.4.3 · Django 6.1.1 · Python 3.12. Recorded on Windows; macOS and Linux commands are in the repository for every episode.