canonicalwebteam.image template

canonicalwebteam.image-semplate

Un módulo para generar marcado de imagen HTML performitante para imágenes. El marcado lo hará:

• Usar lazada nativa
• Definir explícitamente los atributos width y height para evitar el efecto de salto de la página
• Prefijo todas las URL de imagen con URL de proxy de CDN nube, para transformar la imagen en tamaño óptimo
• Use puntos de ruptura srcset predefinidos (2X) para pantallas HIREF

Parámetros

• url (cadena obligatoria): la URL a una imagen (por ejemplo, https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png )
• alt (cadena obligatoria): texto alt para describir la imagen
• hi_def (Booleano obligatorio): ¿Se ha subido una imagen 2x el ancho y la altura del tamaño deseado
• width (entero obligatorio): el número de píxeles de ancho la imagen debe ser
• height (entero opcional): el número de píxeles altos de la imagen debe ser
• fill (booleano opcional): configure el modo de cultivo en "llenar"
• loading (cadena opcional, predeterminado: "Lazy"): Establecer en "Auto" o "ansioso" para deshabilitar lazando la carga
• attrs (Diccionario opcional): se pueden aprobar los atributos adicionales <img> (por class o id ) como argumentos adicionales

Uso

Desarrollo local

Para el desarrollo local, es mejor probar este módulo con uno de nuestros proyectos de sitios web como Ubuntu.com. Para obtener más información, siga esta guía (solo interna).

Código de aplicación

La función image_template se puede usar directamente para generar marcado de imagen.

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

Sin embargo, el uso más común es agregarlo a los contextos de plantilla Django o Flask, como una función image .

Uso de django

Agrégalo como una etiqueta de plantilla:

 # 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" )

Úselo en plantillas:

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

Uso de frascos

Agrégalo como una etiqueta de plantilla:

 # app.py

from canonicalwebteam import image_template
from flask import Flask

app = Flask ( __name__ )

@ app . context_processor
def utility_processor ():
    return { "image" : image_template }

Úselo en plantillas, por ejemplo ::

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

Marcado generado

El marcado de la imagen de salida será, por ejemplo,

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

VS Código de fragmento

Para agregar el marcado requerido para esta plantilla como fragmento de usuario, agregue lo siguiente como un fragmento HTML (fragmentos de usuario en Archivo> Preferencias o Código> Preferencias en 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"
}"