Package: canonicalwebteam.image-template
canonicalwebteam.image-templateA module to generate performant HTML image markup for images. The markup
will:Usenative lazyloadingif it's availableOutput markup compatible withlazysizesnoscriptpluginExplicitly definewidthandheightattributes to avoid the page jumping effectPrefix all image URLs with cloudinary CDN proxy URLs, to transform the image to the optimal sizeUse predefined (2x)srcsetbreak points for hidef screensParametersurl(mandatory string): The url to an image (e.g.https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png)alt(mandatory string): Alt text to describe the imagehi_def(mandatory boolean): Has an image been uploaded 2x the width and height of the desired sizewidth(mandatory integer): The number of pixels wide the image should beheight(optional integer): The number of pixels high the image should befill(optional boolean): Set the crop mode to"fill"loading(optional string, default: "lazy"): Set to"auto" or "eager"to disable lazyloadingattrs(optional dictionary): Extra<img>attributes (e.g.classorid) can be passed as additional argumentsUsageTheimage_templatefunction can be used directly to generate image Markup.fromcanonicalwebteamimportimage_templateimage_markup=image_template(url="https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg",alt="",width="534",height="319",hi_def=True,loading="auto",fill=True,attrs={"class":"hero","id":"openstack-hero"},)However, the most common usage is to add it to Django or Flask template contexts, as animagefunction.Add lazysizesAt the time of writing, theloadingattributeis only natively supportedin Chrome. Therefore we uselazysizesto enable loading in other browsers while still taking advantage of the native functionality when it's available.Ifloadingis set to "lazy" (the default) we will outputthe Markupin a format supported bylazysizes, with thenoscriptandnative-loadingplugins enabled.To support this in your site you need to add the following script to the<head>of each page,aboveany<link>attributes:<scriptsrc="https://assets.ubuntu.com/v1/703e23c9-lazysizes+noscript+native-loading.5.1.2.min.js"defer></script>Django usageAdd it as a template tag:# myapp/templatetags.pyfromcanonicalwebteamimportimage_templatefromdjangoimporttemplatefromdjango.utils.safestringimportmark_saferegister=template.Library()@register.simple_tagdefimage(*args,**kwargs):returnmark_safe(image_template(*args,**kwargs))# settings.pyTEMPLATES[0]["OPTIONS"]["builtins"].append("myapp.templatetags")Use it in templates:# templates/mytemplate.html

{% image url="https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png" alt="Operational dashboard" width="1040" height="585" hi_def=True fill=True %}Flask usageAdd it as a template tag:# app.pyfromcanonicalwebteamimportimage_templatefromflaskimportFlaskapp=Flask(__name__)@app.context_processordefutility_processor():return{"image":image_template}Use it in templates, e.g.::# templates/mytemplate.html

{{
  image(
    url="https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg",
    alt="",
    width="534",
    height="319",
    hi_def=True,
	fill=True,
    loading="auto",
    attrs={"class": "hero", "id": "openstack-hero"},
  ) | safe
}}Generated markupThe output image markup will be e.g.:<imgsrc="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_534,h_319,c_fill/https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg"srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_1068,h_638,c_fill/https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg 2x"alt=""width="534"height="319"loading="auto"class="hero"id="openstack hero"/>Ifloadingis set to "lazy" (the default), the output markup will be wrapped in markup for lazysizes support:<divclass="lazyload"data-noscript><noscript><img...></noscript></div>VS Code SnippetTo add the required markup for this template as a User Snippet, add the following as a HTML snippet (User Snippets under File > Preferences, or Code > Preferences on macOS):"Image module": {
	"prefix": "image-module",
	"body": [
		"{{",
		"	image_template(",
		"		url=\"$1\",",
		"		alt=\"$2\",",
		"		height=\"$3\",",
		"		width=\"$4\",",
		"		hi_def=$5True,",
		"		loading=\"auto|lazy$6\",",
		"		attrs={\"class\": \"$7\"}",
		"	) | safe",
		"}}"
	],
	"description": "Image module include"
}"