|
@@ -2,7 +2,7 @@
|
|
|
|
|
|
# How to use images in templates
|
|
|
|
|
|
-The `image` tag inserts an XHTML-compatible `img` element into the page, setting its `src`, `width`, `height` and `alt`. See also [](image_tag_alt).
|
|
|
+The `image` tag inserts an XHTML-compatible `img` element into the page, setting its `src`, `width`, `height`, and `alt`. See also [](image_tag_alt).
|
|
|
|
|
|
The syntax for the tag is thus:
|
|
|
|
|
@@ -49,7 +49,7 @@ Compared to `image`, this will render a `<picture>` element with a fallback `<im
|
|
|
</picture>
|
|
|
```
|
|
|
|
|
|
-In this case, if the browser supports the [AVIF](https://en.wikipedia.org/wiki/AVIF) format it will load the AVIF file. Otherwise, if the browser supports the [WebP](https://en.wikipedia.org/wiki/WebP) format, it will try to load the WebP file. If none of those formats are supported, the browser will load the JPEG image. The order of the provided formats isn’t configurable – Wagtail will always output source elements in the following order: AVIF, WebP, JPEG, PNG, GIF. This ensures the most optimized format is provided whenever possible.
|
|
|
+In this case, if the browser supports the [AVIF](https://en.wikipedia.org/wiki/AVIF) format it will load the AVIF file. Otherwise, if the browser supports the [WebP](https://en.wikipedia.org/wiki/WebP) format, it will try to load the WebP file. If none of those formats are supported, the browser will load the JPEG image. The order of the provided formats isn’t configurable – Wagtail will always output source elements in the following order: AVIF, WebP, JPEG, PNG, and GIF. This ensures the most optimized format is provided whenever possible.
|
|
|
|
|
|
The `picture` tag can also be used with multiple image resize rules to generate responsive images.
|
|
|
|
|
@@ -68,7 +68,7 @@ The syntax for `srcset_image` is the same as `image`, with two exceptions:
|
|
|
- The resize rule should be provided with multiple sizes in a brace-expansion pattern, like `width-{200,400}`. This will generate the `srcset` attribute, with as many URLs as there are sizes defined in the resize rule, and one width descriptor per URL. The first provided size will always be used as the `src` attribute, and define the image’s width and height attributes, as a fallback.
|
|
|
- The [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes) attribute is essential. This tells the browser how large the image will be displayed on the page, so that it can select the most appropriate image to load.
|
|
|
|
|
|
-Here is an example of `srcset_image` in action, generating an `srcset` attribute:
|
|
|
+Here is an example of `srcset_image` in action, generating a `srcset` attribute:
|
|
|
|
|
|
```html+django
|
|
|
{% srcset_image page.photo width-{400,800} sizes="(max-width: 600px) 400px, 80vw" %}
|
|
@@ -80,7 +80,7 @@ This outputs:
|
|
|
<img srcset="/media/images/pied-wagtail.width-400.jpg 400w, /media/images/pied-wagtail.width-800.jpg 800w" src="/media/images/pied-wagtail.width-400.jpg" alt="A pied Wagtail" sizes="(max-width: 600px) 400px, 80vw" width="400" height="300">
|
|
|
```
|
|
|
|
|
|
-And here is an example with the `picture` tag:
|
|
|
+Here is an example with the `picture` tag:
|
|
|
|
|
|
```html+django
|
|
|
{% picture page.photo format-{avif,webp,jpeg} width-{400,800} sizes="80vw" %}
|
|
@@ -176,7 +176,7 @@ Resize and **crop** to fill the **exact** dimensions specified.
|
|
|
|
|
|
This can be particularly useful for websites requiring square thumbnails of arbitrary images. For example, a landscape image of width 2000 and height 1000 treated with the `fill-200x200` rule would have its height reduced to 200, then its width (ordinarily 400) cropped to 200.
|
|
|
|
|
|
-This resize-rule will crop to the image's focal point if it has been set. If not, it will crop to the centre of the image.
|
|
|
+This resize-rule will crop to the image's focal point if it has been set. If not, it will crop to the center of the image.
|
|
|
|
|
|

|
|
|
|
|
@@ -204,11 +204,11 @@ If you find that `-c100` is too close, you can try `-c75` or `-c50`. Any whole n
|
|
|
|
|
|

|
|
|
|
|
|
-Example: The focal point is set off centre so the image is scaled and also cropped like fill, however the center point of the crop is positioned closer the focal point.
|
|
|
+Example: The focal point is set off center so the image is scaled and also cropped like fill, however the center point of the crop is positioned closer to the focal point.
|
|
|
|
|
|

|
|
|
|
|
|
-Example: With `-c75` set, the final crop will be closer to the focal point.
|
|
|
+Example: With the `-c75` set, the final crop will be closer to the focal point.
|
|
|
|
|
|
### `original`
|
|
|
|
|
@@ -318,7 +318,7 @@ This is useful for images that will be re-used outside of the current site, such
|
|
|
<meta name="twitter:image" content="{{ tmp_photo.full_url }}">
|
|
|
```
|
|
|
|
|
|
-If your site defines a custom image model using `AbstractImage`, any additional fields you add to an image (such as a copyright holder) are **not** included in the rendition.
|
|
|
+If your site defines a custom image model using `AbstractImage`, any additional fields you add to an image (such as a copyright holder) is **not** included in the rendition.
|
|
|
|
|
|
Therefore, if you'd added the field `author` to your AbstractImage in the above example, you'd access it using `{{ page.photo.author }}` rather than `{{ tmp_photo.author }}`.
|
|
|
|
|
@@ -388,7 +388,7 @@ And to use the `<amp-img>` tag (based on the [Mountains example](https://amp.dev
|
|
|
|
|
|
The information above relates to images defined via image-specific fields in your model. However, images can also be embedded arbitrarily in Rich Text fields by the page editor (see [](rich_text_field).
|
|
|
|
|
|
-Images embedded in Rich Text fields can't be controlled by the template developer as easily. There are no image objects to work with, so the `{% image %}` template tag can't be used. Instead, editors can choose from one of a number of image "Formats" at the point of inserting images into their text.
|
|
|
+Images embedded in Rich Text fields can't be controlled by the template developer as easily. There are no image objects to work with, so the `{% image %}` template tag can't be used. Instead, editors can choose from one of several image "Formats" at the point of inserting images into their text.
|
|
|
|
|
|
Wagtail comes with three pre-defined image formats, but more can be defined in Python by the developer. These formats are:
|
|
|
|
|
@@ -444,15 +444,15 @@ You can encode the image into lossless AVIF or WebP format by using `format-avif
|
|
|
|
|
|
(image_background_colour)=
|
|
|
|
|
|
-## Background colour
|
|
|
+## Background color
|
|
|
|
|
|
The PNG and GIF image formats both support transparency, but if you want to
|
|
|
-convert images to JPEG format, the transparency will need to be replaced with a solid background colour.
|
|
|
+convert images to JPEG format, the transparency will need to be replaced with a solid background color.
|
|
|
|
|
|
-By default, Wagtail will set the background to white. But if a white background doesn't fit your design, you can specify a colour using the `bgcolor` filter.
|
|
|
+By default, Wagtail will set the background to white. But if a white background doesn't fit your design, you can specify a color using the `bgcolor` filter.
|
|
|
|
|
|
This filter takes a single argument, which is a CSS 3 or 6-digit hex code
|
|
|
-representing the colour you would like to use:
|
|
|
+representing the color you would like to use:
|
|
|
|
|
|
```html+django
|
|
|
{# Sets the image background to black #}
|
|
@@ -469,7 +469,7 @@ This can be changed either globally or on a per-tag basis.
|
|
|
### Changing globally
|
|
|
|
|
|
Use the `WAGTAILIMAGES_AVIF_QUALITY`, `WAGTAILIMAGES_JPEG_QUALITY` and `WAGTAILIMAGES_WEBP_QUALITY` settings to change
|
|
|
-the global defaults of AVIF, JPEG and WebP quality:
|
|
|
+the global defaults of AVIF, JPEG, and WebP quality:
|
|
|
|
|
|
```python
|
|
|
# settings.py
|
|
@@ -498,7 +498,7 @@ You can read more about this command from [](wagtail_update_image_renditions)
|
|
|
|
|
|
### Changing per-tag
|
|
|
|
|
|
-It's also possible to have different AVIF, JPEG and WebP qualities on individual tags by using `avifquality`, `jpegquality` and `webpquality` filters. This will always override the default setting:
|
|
|
+It's also possible to have different AVIF, JPEG, and WebP qualities on individual tags by using `avifquality`, `jpegquality`, and `webpquality` filters. This will always override the default setting:
|
|
|
|
|
|
```html+django
|
|
|
{% image page.photo_avif width-400 avifquality-40 %}
|
|
@@ -506,7 +506,7 @@ It's also possible to have different AVIF, JPEG and WebP qualities on individual
|
|
|
{% image page.photo_webp width-400 webpquality-50 %}
|
|
|
```
|
|
|
|
|
|
-Note that this will have no effect on PNG or GIF files. If you want all images to be low quality, you can use this filter with `format-avif`, `format-jpeg` or `format-webp` (which forces all images to output in AVIF, JPEG or WebP format):
|
|
|
+Note that this will not affect PNG or GIF files. If you want all images to be low quality, you can use this filter with `format-avif`, `format-jpeg`, or `format-webp` (which forces all images to output in AVIF, JPEG, or WebP format):
|
|
|
|
|
|
```html+Django
|
|
|
{% image page.photo width-400 format-avif avifquality-40 %}
|
|
@@ -529,9 +529,9 @@ Wagtail supports the use of Scalable Vector Graphics alongside raster images. To
|
|
|
WAGTAILIMAGES_EXTENSIONS = ["gif", "jpg", "jpeg", "png", "webp", "svg"]
|
|
|
```
|
|
|
|
|
|
-SVG images can be included in templates via the `image` template tag, as with raster images. However, operations that require SVG images to be rasterised are not currently supported. This includes direct format conversion, e.g. `format-webp`, and `bgcolor` directives. Crop and resize operations do not require rasterisation, so may be used freely (see [](available_resizing_methods)).
|
|
|
+SVG images can be included in templates via the `image` template tag, as with raster images. However, operations that require SVG images to be rasterized are not currently supported. This includes direct format conversion, e.g. `format-webp`, and `bgcolor` directives. Crop and resize operations do not require rasterization, so may be used freely (see [](available_resizing_methods)).
|
|
|
|
|
|
-The `image` tag's `preserve-svg` positional argument may be used to restrict the operations applied to an SVG image to only those that do not require rasterisation. This may be useful in situations where a single `image` tag declaration is applied to multiple source images, for example:
|
|
|
+The `image` tag's `preserve-svg` positional argument may be used to restrict the operations applied to an SVG image to only those that do not require rasterization. This may be useful in situations where a single `image` tag declaration is applied to multiple source images, for example:
|
|
|
|
|
|
```html+django
|
|
|
{% for picture in pictures %}
|
|
@@ -539,13 +539,13 @@ The `image` tag's `preserve-svg` positional argument may be used to restrict the
|
|
|
{% endfor %}
|
|
|
```
|
|
|
|
|
|
-In this example, any of the image objects that are SVGs will only have the `fill-400x400` operation applied to them, while raster images will have both the `fill-400x400` and `format-webp` operations applied. If the `preserve-svg` argument is not used in this example, an error will be raised when attempting to convert SVG images to webp, as this is not possible without a rasterisation library.
|
|
|
+In this example, any of the image objects that are SVGs will only have the `fill-400x400` operation applied to them, while raster images will have both the `fill-400x400` and `format-webp` operations applied. If the `preserve-svg` argument is not used in this example, an error will be raised when attempting to convert SVG images to webp, as this is not possible without a rasterization library.
|
|
|
|
|
|
### Security considerations
|
|
|
|
|
|
Wagtail's underlying image library, Willow, is configured to mitigate known XML parser exploits (e.g. billion laughs, quadratic blowup) by rejecting suspicious files.
|
|
|
|
|
|
-When including SVG images in templates via the `image` tag, they will be rendered as html `img` elements. In this case, `script` elements in SVGs will not be executed, mitigating XSS attacks.
|
|
|
+When including SVG images in templates via the `image` tag, they will be rendered as HTML `img` elements. In this case, `script` elements in SVGs will not be executed, mitigating XSS attacks.
|
|
|
|
|
|
If a user navigates directly to the URL of the SVG file embedded scripts may be executed, depending on server/storage configuration. This can be mitigated by setting appropriate Content-Security-Policy or Content-Disposition headers for SVG responses:
|
|
|
|