Generate <img> markup block for an image.

Project description

canonicalwebteam.image-template

A module to generate performant HTML image markup for images. The markup will:

Use native lazyloading if it's available
Output markup compatible with lazysizes noscript plugin
Explicitly define width and height attributes to avoid the page jumping effect
Prefix all image URLs with cloudinary CDN proxy URLs, to transform the image to the optimal size
Use predefined (2x) srcset break points for hidef screens

Parameters

url (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 image
hi_def (mandatory boolean): Has an image been uploaded 2x the width and height of the desired size
width (mandatory integer): The number of pixels wide the image should be
height (optional integer): The number of pixels high the image should be
fill (optional boolean): Set the crop mode to "fill"
loading (optional string, default: "lazy"): Set to "auto" or "eager" to disable lazyloading
attrs (optional dictionary): Extra <img> attributes (e.g. class or id) can be passed as additional arguments

Usage

The image_template function can be used directly to generate image Markup.

from canonicalwebteam import image_template

image_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 an image function.

Add lazysizes

At the time of writing, the loading attribute is only natively supported in Chrome. Therefore we use lazysizes to enable loading in other browsers while still taking advantage of the native functionality when it's available.

If loading is set to "lazy" (the default) we will output the Markup in a format supported by lazysizes, with the noscript and native-loading plugins enabled.

To support this in your site you need to add the following script to the <head> of each page, above any <link> attributes:

<script src="https://assets.ubuntu.com/v1/703e23c9-lazysizes+noscript+native-loading.5.1.2.min.js" defer></script>

Django usage

Add it as a template tag:

# myapp/templatetags.py

from canonicalwebteam import image_template
from django import template
from django.utils.safestring import mark_safe


register = template.Library()

@register.simple_tag
def image(*args, **kwargs):
    return mark_safe(image_template(*args, **kwargs))


# settings.py

TEMPLATES[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 usage

Add it as a template tag:

# app.py

from canonicalwebteam import image_template
from flask import Flask

app = Flask(__name__)

@app.context_processor
def utility_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 markup

The output image markup will be e.g.:

<img
    src="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"
/>

If loading is set to "lazy" (the default), the output markup will be wrapped in markup for lazysizes support:

<div class="lazyload" data-noscript>
  <noscript>
    <img ...>
  </noscript>
</div>

VS Code Snippet

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

Project details

Release history Release notifications | RSS feed

1.3.1

Oct 6, 2020

This version

1.3.0

Sep 25, 2020

1.2.0

Jul 30, 2020

1.1.0

Apr 29, 2020

1.0.0

Oct 9, 2019

0.3.1

Sep 30, 2019

0.3.0

Aug 20, 2019

0.2.3

Mar 1, 2019

0.2.2

Mar 1, 2019

0.2.1

Mar 1, 2019

0.2.0

Feb 28, 2019

0.1.0

Feb 26, 2019

0.1.0a5 pre-release

Feb 25, 2019

0.1.0a4 pre-release

Feb 25, 2019

0.1.0a3 pre-release

Feb 25, 2019

0.1.0a2 pre-release

Feb 25, 2019

0.1.0a0 pre-release

Feb 25, 2019

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

canonicalwebteam.image-template-1.3.0.tar.gz (4.8 kB view details)

Uploaded Sep 25, 2020 Source

Built Distribution

canonicalwebteam.image_template-1.3.0-py3-none-any.whl (5.2 kB view details)

Uploaded Sep 25, 2020 Python 3

File details

Details for the file canonicalwebteam.image-template-1.3.0.tar.gz.

File metadata

Download URL: canonicalwebteam.image-template-1.3.0.tar.gz
Upload date: Sep 25, 2020
Size: 4.8 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/3.2.0 pkginfo/1.5.0.1 requests/2.24.0 setuptools/50.3.0 requests-toolbelt/0.9.1 tqdm/4.49.0 CPython/3.7.9

File hashes

Hashes for canonicalwebteam.image-template-1.3.0.tar.gz
Algorithm	Hash digest
SHA256	`bf81cde272ce824fd0fdecbc660483126e79f90697d00fd2bbed95d8ca88b41e`
MD5	`384138b78eb50311ab2c568214843964`
BLAKE2b-256	`3ba8419b2e475dde559c2c1e512186c01071bd9b8b4cb7e4af660c565a1c9871`

See more details on using hashes here.

File details

Details for the file canonicalwebteam.image_template-1.3.0-py3-none-any.whl.

File metadata

Download URL: canonicalwebteam.image_template-1.3.0-py3-none-any.whl
Upload date: Sep 25, 2020
Size: 5.2 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/3.2.0 pkginfo/1.5.0.1 requests/2.24.0 setuptools/50.3.0 requests-toolbelt/0.9.1 tqdm/4.49.0 CPython/3.7.9

File hashes

Hashes for canonicalwebteam.image_template-1.3.0-py3-none-any.whl
Algorithm	Hash digest
SHA256	`4a98c9656cb66f54b1e09b577254483bef30f381590e79eb1e3940b2ca4c66db`
MD5	`4c491628026aa3c0cdbf6c77f8cde3ac`
BLAKE2b-256	`4367a203018469e407b0bfedf3a30ba88230d4c5fd7e72eef55c98c707ee9072`