canonicalwebteam.image-template

Generate <img> markup block for an image.

Project description

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

Use data-src attributes for lazysizes
Use predefined srcset break points
Resize assets.ubuntu.com images with ?w=XX&h=XX query parameters
Prefix all image URLs with cloudinary proxy URLs, for CDN and image transformations

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
width (mandatory integer): The number of pixels wide the image should be
height (mandatory integer): The number of pixels high the image should be
hi_def (mandatory boolean): Has an image been uploaded 2x the width and height of the desired size
extra_classes (optional): Class string to add to img element
extra attributes (optional): Extra <img> attributes (e.g. id) can be passed as additional arguments
lazy (optional boolean): Defaults to True, set to False to receive the benefits of srcset without lazysizes

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/9f6916dd-k8s-prometheus-light.png",
    alt="Operational dashboard",
    width="1040",
    height="585",
    hi_def=True
)

However, the most common usage is to add it to Django or Flask template contexts, as an image function.

Add lazysizes

The markup generated will use lazysizes format - it will use data-src instead of src and add the lazyload class.

Therefore to use this plugin you need to have lazysizes loaded on your pages. The simplest way to achieve this is to include this in your <head>:

<script src="https://assets.ubuntu.com/v1/842d27d3-lazysizes.min.js" async></script>

NOTE: When JS is disabled Chrome will display a broken image and alt text for the lazysizes version which can cause layout issues. It’s advisable to add the CSS below to the sites CSS.

.lazyload {
   visibility: hidden;
   height: 0;
   width: 0;
   margin: 0;
   padding: 0;
}

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

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:

# 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,
  ) | safe
}}

Generated markup

All the above examples will generate the following markup:

<img
  data-srcset="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_2080,h_1170/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png x2"
  data-src="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_1040,h_585/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png"
  alt="Operational dashboard"
  width="1040"
  height="585"
  class="lazyload"
/>

<noscript>
  <img
    srcset="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_2080,h_1170/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png x2"
    src="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,fl_sanitize,w_1040,h_585/https%3A//assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png"
    alt="Operational dashboard"
    width="1040"
    height="585"
  />
</noscript>

Project details

Release history Release notifications | RSS feed

1.3.1

Oct 6, 2020

1.3.0

Sep 25, 2020

1.2.0

Jul 30, 2020

1.1.0

Apr 29, 2020

1.0.0

Oct 9, 2019

This version

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-0.3.1.tar.gz (4.2 kB view details)

Uploaded Sep 30, 2019 Source

File details

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

File metadata

Download URL: canonicalwebteam.image-template-0.3.1.tar.gz
Upload date: Sep 30, 2019
Size: 4.2 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/1.15.0 pkginfo/1.5.0.1 requests/2.22.0 setuptools/41.2.0 requests-toolbelt/0.9.1 tqdm/4.36.1 CPython/2.7.15+

File hashes

Hashes for canonicalwebteam.image-template-0.3.1.tar.gz
Algorithm	Hash digest
SHA256	`99de4967c15a0370b9ce74a6f27b061ff505ec3af4878ddb576a708b01cb9867`
MD5	`4854247a4cd5a7a8c02e026a125f4ef4`
BLAKE2b-256	`a9199a16bf10573fb33719db7666a67194e10baf196cd03892f43494309b0323`