From 26f5a4fcb18b7c837f66331f5f39d9b489ef5b5f Mon Sep 17 00:00:00 2001
From: Coen van der Kamp <coen@fourdigits.nl>
Date: Tue, 1 Nov 2022 23:23:53 +0100
Subject: [PATCH] Move custom image filter to extendig Wagtail section

---
 docs/extending/custom_image_filters.md | 38 ++++++++++++++++++++++++++
 docs/extending/index.md                |  1 +
 docs/reference/hooks.md                | 10 +++++++
 docs/topics/images.md                  | 35 ------------------------
 4 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 docs/extending/custom_image_filters.md

diff --git a/docs/extending/custom_image_filters.md b/docs/extending/custom_image_filters.md
new file mode 100644
index 0000000000..5179a7998b
--- /dev/null
+++ b/docs/extending/custom_image_filters.md
@@ -0,0 +1,38 @@
+(custom_image_filters)=
+
+# Custom image filters
+
+Wagtail comes with [various image operations](image_tag). To add custom image operation, add `register_image_operations` hook to your `wagtail_hooks.py` file.
+
+In this example, the `willow.image` is a Pillow Image instance. If you use another image library, or like to support multiple image libraries, you need to update the filter code accordingly. See the [Willow documentation](https://willow.readthedocs.io/en/latest/index.html) for more information.
+
+```python
+from PIL import ImageFilter
+
+from wagtail import hooks
+from wagtail.images.image_operations import FilterOperation
+
+
+class BlurOperation(FilterOperation):
+    def construct(self, radius):
+        self.radius = int(radius)
+
+    def run(self, willow, image, env):
+        willow.image = willow.image.filter(ImageFilter.GaussianBlur(radius=self.radius))
+        return willow
+
+
+@hooks.register("register_image_operations")
+def register_image_operations():
+    return [
+        ("blur", BlurOperation),
+    ]
+```
+
+Use the filter in a template, like so:
+
+```html+Django
+{% load wagtailimages_tags %}
+
+{% image page.photo width-400 blur-7 %}
+```
diff --git a/docs/extending/index.md b/docs/extending/index.md
index 3fedb218a6..4c57aaba18 100644
--- a/docs/extending/index.md
+++ b/docs/extending/index.md
@@ -17,6 +17,7 @@ custom_tasks
 audit_log
 custom_account_settings
 customising_group_views
+custom_image_filters
 rich_text_internals
 extending_draftail
 custom_bulk_actions
diff --git a/docs/reference/hooks.md b/docs/reference/hooks.md
index 0c4cb101cc..3c49ac1b89 100644
--- a/docs/reference/hooks.md
+++ b/docs/reference/hooks.md
@@ -1418,3 +1418,13 @@ def additional_log_actions(actions):
 ```{versionchanged} 2.15
 The ``LogFormatter`` class was introduced. Previously, dynamic messages were achieved by passing a callable as the ``message`` argument to ``register_action``.
 ```
+
+## Images
+
+(register_image_operations)=
+
+### `register_image_operations`
+
+Called on start-up. Register image operations that can be used to create renditions.
+
+See [](custom_image_filters).
diff --git a/docs/topics/images.md b/docs/topics/images.md
index dc1d8725bc..e06f56497d 100644
--- a/docs/topics/images.md
+++ b/docs/topics/images.md
@@ -414,41 +414,6 @@ Note that this will have no effect on PNG or GIF files. If you want all images t
 {% image page.photo width-400 format-webp webpquality-50 %}
 ```
 
-### Custom image filter
-
-In `wagtail_hooks.py` register your custom image filter.
-
-This example assumes Willow in combination with Pillow. If you use another image library, or like to support multiple image libraries, you need to update the code inside the run method. See the [Willow documentation](https://willow.readthedocs.io/en/latest/index.html) for more information.
-
-```python
-from PIL import ImageFilter
-
-from wagtail import hooks
-from wagtail.images.image_operations import FilterOperation
-
-
-class BlurOperation(FilterOperation):
-    def construct(self, radius):
-        self.radius = int(radius)
-
-    def run(self, willow, image, env):
-        willow.image = willow.image.filter(ImageFilter.GaussianBlur(radius=self.radius))
-        return willow
-
-
-@hooks.register("register_image_operations")
-def register_image_operations():
-    return [
-        ("blur", BlurOperation),
-    ]
-```
-
-In your template:
-
-```html+Django
-{% image page.photo width-400 blur-7 %}
-```
-
 ### Generating image renditions in Python
 
 All of the image transformations mentioned above can also be used directly in Python code.