How To Use Url For Using Jinja On Css Url Background Image

How to employ images in templates¶

The image tag inserts an XHTML-compatible img element into the folio, setting its src , width , summit and alt . Come across also More control over the img tag.

The syntax for the tag is thus:

                        {%            image            [            prototype            ]            [            resize-rule            ]            %}

Both the image and resize dominion must exist passed to the template tag.

For example:

                        {%            load            wagtailimages_tags            %}            ...            <!-- Display the image scaled to a width of 400 pixels: -->            {%            image            page.photo            width-400            %}            <!-- Display it once again, but this time as a square thumbnail: -->            {%            image            page.photograph            fill up-80x80            %}

In the higher up syntax example [image] is the Django object referring to the image. If your page model defined a field called "photo" then [epitome] would probably be page.photo . The [resize-rule] defines how the image is to be resized when inserted into the folio. Diverse resizing methods are supported, to cater to dissimilar use cases (east.g. pb images that span the whole width of the folio, or thumbnails to be cropped to a stock-still size).

Note that a infinite separates [image] and [resize-rule] , but the resize rule must not contain spaces. The width is always specified earlier the top. Resized images will maintain their original aspect ratio unless the fill rule is used, which may result in some pixels being cropped.

The available resizing methods are every bit follows:

max

(takes two dimensions)

                                {%                prototype                page.photo                max-1000x500                %}

Fit within the given dimensions.

The longest edge will exist reduced to the matching dimension specified. For example, a portrait image of width 1000 and height 2000, treated with the max-1000x500 dominion (a mural layout) would result in the image beingness shrunk so the superlative was 500 pixels and the width was 250.

Example of max filter on an image.

Example: The prototype will keep its proportions but fit within the max (green line) dimensions provided.

min

(takes two dimensions)

                                {%                epitome                folio.photo                min-500x200                %}

Encompass the given dimensions.

This may result in an image slightly larger than the dimensions y'all specify. A square image of width 2000 and height 2000, treated with the min-500x200 rule would accept its height and width changed to 500, i.due east matching the width of the resize-rule, but greater than the meridian.

Example of min filter on an image.

Case: The image will keep its proportions while filling at least the min (light-green line) dimensions provided.

width

(takes one dimension)

                                {%                image                page.photo                width-640                %}

Reduces the width of the image to the dimension specified.

height

(takes i dimension)

                                {%                epitome                page.photo                height-480                %}

Reduces the peak of the image to the dimension specified.

scale

(takes percentage)

                                {%                image                folio.photo                calibration-50                %}

Resize the paradigm to the percentage specified.

fill

(takes two dimensions and an optional -c parameter)

                                {%                image                folio.photo                fill-200x200                %}

Resize and ingather to make full the exact dimensions specified.

This can be peculiarly useful for websites requiring foursquare thumbnails of capricious images. For case, a landscape image of width 2000 and height 1000 treated with the fill-200x200 rule would have its acme reduced to 200, then its width (commonly 400) cropped to 200.

This resize-rule will crop to the prototype'due south focal point if it has been set. If not, it will crop to the eye of the image.

Example of fill filter on an image.

Instance: The image is scaled and also cropped (red line) to fit as much of the image equally possible within the provided dimensions.

On images that won't upscale

It'southward possible to asking an image with fill up dimensions that the image can't support without upscaling. e.g. an image of width 400 and meridian 200 requested with fill-400x400 . In this situation the ratio of the requested fill will exist matched, but the dimension will not. So that example 400x200 image (a two:1 ratio) could become 200x200 (a 1:ane ratio, matching the resize-rule).

Cropping closer to the focal signal

Past default, Wagtail volition only ingather enough to alter the aspect ratio of the prototype to lucifer the ratio in the resize-rule.

In some cases (due east.grand. thumbnails), it may be preferable to ingather closer to the focal point, and then that the bailiwick of the image is more than prominent.

You tin can do this by appending -c<pct> at the cease of the resize-rule. For example, if you would like the image to be cropped as closely equally possible to its focal point, add -c100 :

                                {%                image                page.photo                fill-200x200-c100                %}

This will crop the epitome as much as it can, without cropping into the focal point.

If you lot notice that -c100 is as well close, you can effort -c75 or -c50 . Any whole number from 0 to 100 is accepted.

Example of fill filter on an image with a focal point set.

Example: The focal indicate is set off middle and so the image is scaled and also cropped like make full, even so the center point of the crop is positioned closer the focal point.

Example of fill and closeness filter on an image with a focal point set.

Example: With -c75 set, the final ingather will be closer to the focal point.

original

(takes no dimensions)

                                {%                image                page.photo                original                %}

Renders the epitome at its original size.

Note

Wagtail does not permit deforming or stretching images. Image dimension ratios volition always be kept. Wagtail also does non back up upscaling. Pocket-size images forced to appear at larger sizes will "max out" at their native dimensions.

More command over the `img` tag¶

Wagtail provides two shortcuts to give greater control over the img element:

ane. Adding attributes to the {% epitome %} tag

Extra attributes tin be specified with the syntax attribute="value" :

                            {%              image              page.photo              width-400              class              =              "foo"              id              =              "bar"              %}

Y'all can set a more than relevant alt attribute this way, overriding the one automatically generated from the title of the image. The src, width, and height attributes can too be overridden, if necessary.

2. Generating the epitome "equally foo" to access individual properties

Wagtail can assign the image data to some other variable using Django's equally syntax:

                            {%              image              folio.photo              width-400              every bit              tmp_photo              %}              <              img              src              =              "              {{              tmp_photo.url              }}              "              width              =              "              {{              tmp_photo.width              }}              "              superlative              =              "              {{              tmp_photo.height              }}              "              alt              =              "              {{              tmp_photo.alt              }}              "              course              =              "my-custom-grade"              />

Annotation

The image property used for the src attribute is image.url , not image.src .

This syntax exposes the underlying image Rendition ( tmp_photo ) to the programmer. A "Rendition" contains the information specific to the fashion yous've requested to format the prototype using the resize-rule, i.due east. dimensions and source URL. The following properties are available:

url¶: URL to the resized version of the prototype. This may be a local URL (such every bit /static/images/instance.jpg ) or a full URL (such equally https://assets.instance.com/images/example.jpg ), depending on how static files are configured.

width¶: Paradigm width after resizing.

height¶: Paradigm height after resizing.

alt¶: Alternative text for the image, typically taken from the image championship.

attrs¶

A shorthand for outputting the attributes src , width , height and alt in one go:

                                    <                  img                  {{                  tmp_photo.attrs                  }}                  grade                  =                  "my-custom-class"                  />

full_url¶

Same as url , but ever returns a full absolute URL. This requires BASE_URL to be ready in the project settings.

This is useful for images that volition be re-used outside of the current site, such as social share images:

                                    <                  meta                  proper name                  =                  "twitter:image"                  content                  =                  "                  {{                  tmp_photo.full_url                  }}                  "                  >

If your site defines a custom image model using AbstractImage , any additional fields yous add to an epitome (eastward.g. a copyright holder) are not included in the rendition.

Therefore, if you lot'd added the field author to your AbstractImage in the above instance, you'd access it using {{ page.photograph.writer }} rather than {{ tmp_photo.author }} .

(Due to the links in the database between renditions and their parent image, you could admission it as {{ tmp_photo.paradigm.author }} , but that has reduced readability.)

The `attrs` shortcut¶

You can as well use the attrs property as a shorthand to output the attributes src , width , acme and alt in one go:

                            <              img              {{              tmp_photo.attrs              }}              class              =              "my-custom-course"              />

Images embedded in rich text¶

The information above relates to images divers via image-specific fields in your model. However, images can also exist embedded arbitrarily in Rich Text fields by the folio editor (run into Rich Text (HTML)).

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 cull from one of a number of image "Formats" at the point of inserting images into their text.

Wagtail comes with iii pre-defined image formats, but more than tin be divers in Python by the developer. These formats are:

Total width: Creates an image rendition using width-800 , giving the <img> tag the CSS class full-width .
Left-aligned: Creates an image rendition using width-500 , giving the <img> tag the CSS grade left .
Correct-aligned: Creates an prototype rendition using width-500 , giving the <img> tag the CSS class right .

Note

The CSS classes added to images do non come with whatever accompanying stylesheets, or inline styles. e.1000. the left course will do nothing, by default. The programmer is expected to add these classes to their front end CSS files, to define exactly what they want left , right or total-width to mean.

For more than information nigh image formats, including creating your ain, come across Image Formats in the Rich Text Editor

Output epitome format¶

Wagtail may automatically alter the format of some images when they are resized:

PNG and JPEG images don't change format

GIF images without animation are converted to PNGs

BMP images are converted to PNGs

WebP images are converted to PNGs

It is likewise possible to override the output format on a per-tag basis by using the format filter after the resize dominion.

For example, to make the tag always catechumen the image to a JPEG, apply format-jpeg :

                            {%              paradigm              folio.photograph              width-400              format-jpeg              %}

You may likewise use format-png or format-gif .

Lossless WebP¶

You tin can encode the paradigm into lossless WebP format by using the format-webp-lossless filter:

                                {%                paradigm                folio.photograph                width-400                format-webp-lossless                %}

Groundwork colour¶

The PNG and GIF prototype formats both support transparency, but if you desire to catechumen images to JPEG format, the transparency will need to exist 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 tin 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 color y'all would like to utilise:

                            {# Sets the image background to blackness #}              {%              paradigm              folio.photo              width-400              bgcolor-000              format-jpeg              %}

Epitome quality¶

Wagtail's JPEG and WebP epitome quality settings default to 85 (which is quite high). This can be changed either globally or on a per-tag footing.

Changing globally¶

Use the WAGTAILIMAGES_JPEG_QUALITY and WAGTAILIMAGES_WEBP_QUALITY settings to change the global defaults of JPEG and WebP quality:

                                # settings.py                # Make low-quality merely small-scale images                WAGTAILIMAGES_JPEG_QUALITY                =                forty                WAGTAILIMAGES_WEBP_QUALITY                =                45

Note that this won't impact any previously generated images so y'all may want to delete all renditions so they tin can regenerate with the new setting. This can be done from the Django beat:

                                # Replace this with your custom rendition model if you use 1                >>>                from                wagtail.images.models                import                Rendition                >>>                Rendition                .                objects                .                all                ()                .                delete                ()

Changing per-tag¶

Information technology's also possible to have different JPEG and WebP qualities on individual tags by using jpegquality and webpquality filters. This volition always override the default setting:

                                {%                image                page.photo_jpeg                width-400                jpegquality-xl                %}                {%                epitome                folio.photo_webp                width-400                webpquality-50                %}

Note that this will have no result on PNG or GIF files. If you want all images to exist low quality, y'all tin can use this filter with format-jpeg or format-webp (which forces all images to output in JPEG or WebP format):

                                {%                paradigm                page.photograph                width-400                format-jpeg                jpegquality-xl                %}                {%                image                page.photograph                width-400                format-webp                webpquality-50                %}

Generating image renditions in Python¶

All of the image transformations mentioned above can also be used directly in Python code. See Generating renditions in Python.