canonicalwebteam.image template

canonicalwebtam.image-template

Un module pour générer un balisage d'image HTML performant pour les images. Le balisage sera:

• Utiliser le chargement de lazy natif
• Définissez explicitement les attributs width et height pour éviter l'effet de saut de page
• Préfixe toutes les URL de l'image avec des URL proxy CDN cloudinary, pour transformer l'image en taille optimale
• Utiliser des points de rupture prédéfinis (2x) srcset pour les écrans Hidef

Paramètres

• url (chaîne obligatoire): l'URL d'une image (par exemple, https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png )
• alt (chaîne obligatoire): texte alt pour décrire l'image
• hi_def (obligatoire booléen): une image a été téléchargée 2x la largeur et la hauteur de la taille souhaitée
• width (entier obligatoire): le nombre de pixels larges l'image doit être
• height (entier facultatif): le nombre de pixels de haut, l'image doit être
• fill (Boolean en option): Réglez le mode de récolte sur "Remplir"
• loading (chaîne facultative, par défaut: "paresseux"): réglé sur "Auto" ou "avide" pour désactiver le chargement paresseux
• attrs (Dictionnaire facultatif): les attributs supplémentaires <img> (par exemple class ou id ) peuvent être passés comme arguments supplémentaires

Usage

Développement local

Pour le développement local, il est préférable de tester ce module avec l'un de nos projets de site Web comme ubuntu.com. Pour plus d'informations, suivez ce guide (interne uniquement).

Code de demande

La fonction image_template peut être utilisée directement pour générer un balisage d'image.

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

Cependant, l'utilisation la plus courante consiste à l'ajouter aux contextes Django ou Flask, en tant que fonction image .

Utilisation de Django

Ajoutez-le comme une balise de modèle:

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

Utilisez-le dans des modèles:

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

Utilisation du flacon

Ajoutez-le comme une balise de modèle:

 # app.py

from canonicalwebteam import image_template
from flask import Flask

app = Flask ( __name__ )

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

Utilisez-le dans des modèles, par exemple ::

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

Marquage généré

Le balisage de l'image de sortie sera par exemple:

 < 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 Extrait de code

Pour ajouter le balisage requis pour ce modèle comme extrait utilisateur, ajoutez ce qui suit sous forme d'extrait HTML (extraits d'utilisateur sous Fichier> Préférences ou Code> Préférences sur 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"
}"