Pimpandhost Converting Img Tag in the Page Url Image Share Uploads 1040

How to use images in templates¶

The epitome tag inserts an XHTML-uniform img element into the folio, setting its src , width , pinnacle and alt . Encounter also More control over the img tag.

The syntax for the tag is thus:

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

Both the paradigm and resize rule must exist passed to the template tag.

For instance:

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

In the in a higher place syntax example [image] is the Django object referring to the image. If your page model defined a field called "photograph" then [prototype] would probably exist page.photo . The [resize-dominion] defines how the image is to be resized when inserted into the page. Various resizing methods are supported, to cater to different use cases (e.g. lead images that bridge the whole width of the page, or thumbnails to exist cropped to a fixed size).

Note that a space separates [image] and [resize-dominion] , but the resize dominion must not contain spaces. The width is always specified before the height. Resized images will maintain their original attribute ratio unless the make full rule is used, which may result in some pixels existence cropped.

The available resizing methods are as follows:

max

(takes two dimensions)

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

Fit within the given dimensions.

The longest edge will be reduced to the matching dimension specified. For example, a portrait image of width k and meridian 2000, treated with the max-1000x500 rule (a mural layout) would outcome in the image being shrunk so the top was 500 pixels and the width was 250.

Example: The paradigm volition go along its proportions but fit within the max (green line) dimensions provided.

min

(takes two dimensions)

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

Cover the given dimensions.

This may outcome in an image slightly larger than the dimensions you specify. A square image of width 2000 and top 2000, treated with the min-500x200 rule would have its acme and width changed to 500, i.e matching the width of the resize-rule, but greater than the acme.

Example: The epitome volition keep its proportions while filling at least the min (green line) dimensions provided.

width

(takes one dimension)

                                {%                paradigm                page.photo                width-640                %}              

Reduces the width of the epitome to the dimension specified.

meridian

(takes one dimension)

                                {%                paradigm                page.photo                height-480                %}              

Reduces the height of the image to the dimension specified.

scale

(takes percent)

                                {%                image                page.photo                calibration-50                %}              

Resize the image to the percentage specified.

fill

(takes two dimensions and an optional -c parameter)

                                {%                image                folio.photo                make full-200x200                %}              

Resize and crop to fill the exact dimensions specified.

This can exist particularly useful for websites requiring square thumbnails of arbitrary images. For example, a mural epitome of width 2000 and height yard treated with the make full-200x200 rule would have its height reduced to 200, so its width (ordinarily 400) cropped to 200.

This resize-dominion will crop to the epitome's focal bespeak if it has been set. If non, it volition crop to the centre of the image.

Example: The image is scaled and likewise cropped (red line) to fit as much of the prototype as possible inside the provided dimensions.

On images that won't upscale

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

Cropping closer to the focal betoken

By default, Wagtail volition only crop enough to change the attribute ratio of the prototype to match the ratio in the resize-rule.

In some cases (e.g. thumbnails), information technology may exist preferable to crop closer to the focal point, so that the subject field of the prototype is more prominent.

You can exercise this by appending -c<percent> at the end of the resize-rule. For example, if y'all would like the image to exist cropped every bit closely every bit possible to its focal point, add together -c100 :

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

This volition ingather the prototype as much as it tin can, without cropping into the focal point.

If you notice that -c100 is too shut, you tin can try -c75 or -c50 . Whatever whole number from 0 to 100 is accepted.

Example: The focal signal is ready off eye so the image is scaled and besides cropped like make full, however the eye signal of the crop is positioned closer the focal betoken.

Example: With -c75 set, the concluding crop will be closer to the focal point.

original

(takes no dimensions)

                                {%                prototype                page.photo                original                %}              

Renders the image at its original size.

Notation

Wagtail does not allow deforming or stretching images. Image dimension ratios will e'er be kept. Wagtail also does not support upscaling. Small images forced to appear at larger sizes will "max out" at their native dimensions.

More command over the img tag¶

Wagtail provides ii shortcuts to give greater command over the img element:

1. Adding attributes to the {% image %} tag

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

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

You can set up a more relevant alt attribute this way, overriding the one automatically generated from the title of the image. The src, width, and height attributes can also be overridden, if necessary.

two. Generating the paradigm "as foo" to access private properties

Wagtail tin assign the image data to another variable using Django's as syntax:

                            {%              prototype              page.photo              width-400              every bit              tmp_photo              %}              <              img              src              =              "              {{              tmp_photo.url              }}              "              width              =              "              {{              tmp_photo.width              }}              "              height              =              "              {{              tmp_photo.height              }}              "              alt              =              "              {{              tmp_photo.alt              }}              "              class              =              "my-custom-class"              />            

Notation

The paradigm holding used for the src attribute is image.url , not prototype.src .

This syntax exposes the underlying image Rendition ( tmp_photo ) to the developer. A "Rendition" contains the information specific to the manner you've requested to format the image using the resize-rule, i.e. 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 as /static/images/example.jpg ) or a full URL (such as https://assets.example.com/images/instance.jpg ), depending on how static files are configured.

width¶

Paradigm width after resizing.

height¶

Image height later resizing.

alt¶

Alternative text for the epitome, typically taken from the image title.

attrs¶

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

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

full_url¶

Same as url , but always returns a full accented URL. This requires BASE_URL to be fix in the project settings.

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

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

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

Therefore, if y'all'd added the field author to your AbstractImage in the higher up instance, you'd admission it using {{ folio.photo.author }} rather than {{ tmp_photo.author }} .

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

The attrs shortcut¶

You tin also use the attrs property as a shorthand to output the attributes src , width , height and alt in one go:

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

Images embedded in rich text¶

The information in a higher place relates to images defined via paradigm-specific fields in your model. However, images can likewise be embedded arbitrarily in Rich Text fields by the page editor (see Rich Text (HTML)).

Images embedded in Rich Text fields can't exist controlled by the template programmer as easily. There are no image objects to work with, then the {% image %} template tag tin't be used. Instead, editors can choose from one of a number of paradigm "Formats" at the betoken of inserting images into their text.

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

Full 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 class left .

Correct-aligned

Creates an image rendition using width-500 , giving the <img> tag the CSS class right .

Note

The CSS classes added to images practise not come with any accompanying stylesheets, or inline styles. e.chiliad. the left form will exercise nothing, past default. The developer is expected to add together these classes to their front CSS files, to define exactly what they desire left , right or total-width to hateful.

For more information virtually image formats, including creating your own, run across Image Formats in the Rich Text Editor

Output image format¶

Wagtail may automatically change 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 also possible to override the output format on a per-tag basis by using the format filter later the resize rule.

For example, to make the tag always convert the image to a JPEG, utilise format-jpeg :

                            {%              image              page.photo              width-400              format-jpeg              %}            

Y'all may also utilise format-png or format-gif .

Lossless WebP¶

Yous can encode the image into lossless WebP format by using the format-webp-lossless filter:

                                {%                image                folio.photo                width-400                format-webp-lossless                %}              

Background color¶

The PNG and GIF image formats both support transparency, just if you want to catechumen images to JPEG format, the transparency volition need to be replaced with a solid background colour.

By default, Wagtail will ready the background to white. Only if a white background doesn't fit your blueprint, yous can specify a color using the bgcolor filter.

This filter takes a single argument, which is a CSS three or 6 digit hex code representing the color you would like to employ:

                            {# Sets the image background to black #}              {%              paradigm              page.photograph              width-400              bgcolor-000              format-jpeg              %}            

Prototype quality¶

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

Changing globally¶

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

                                # settings.py                # Brand low-quality but modest images                WAGTAILIMAGES_JPEG_QUALITY                =                forty                WAGTAILIMAGES_WEBP_QUALITY                =                45              

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

                                # Supplant this with your custom rendition model if you employ one                >>>                from                wagtail.images.models                import                Rendition                >>>                Rendition                .                objects                .                all                ()                .                delete                ()              

Changing per-tag¶

It's also possible to have dissimilar JPEG and WebP qualities on private tags by using jpegquality and webpquality filters. This will always override the default setting:

                                {%                image                page.photo_jpeg                width-400                jpegquality-40                %}                {%                image                page.photo_webp                width-400                webpquality-l                %}              

Note that this volition have no event on PNG or GIF files. If you want all images to be low quality, you lot can use this filter with format-jpeg or format-webp (which forces all images to output in JPEG or WebP format):

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

Generating image renditions in Python¶

All of the epitome transformations mentioned to a higher place can also be used directly in Python code. See Generating renditions in Python.

mcenteedresse.blogspot.com

Source: https://docs.wagtail.org/en/stable/topics/images.html

Share this post