Editor tricks

Working with image-template

We are using image-template on a number of projects for the sake of performance. It’s very good, you should use it too.

Using it in a flask template looks like this:

{{
  image_template(
    url="https://assets.ubuntu.com/v1/450d7c2f-openstack-hero.svg",
    alt="",
    width="534",
    height="319",
    hi_def=True,
    loading="auto",
    attrs={"class": "hero", "id": "openstack-hero"},
  )
}}

It’s arduous to remember how this block is formed, but a snippet for your text editor makes it a lot more trivial:

VSCode

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"
}"

In any HTML file, you can then begin typing image-module, and this snippet will appear as an auto-complete option. When the snippet has been inserted, you’ll be able to navigate to each attribute’s value by pressing tab.

N.B. If the project has image_template aliased to something else, such as image, you could update this snippet accordingly.

1 Like