canonicalwebteam.image template

CanonicalWebTeam.Image-Template

Um módulo para gerar marcação de imagem HTML Performant para imagens. A marcação irá:

• Use preguiçoso nativo
• Defina explicitamente atributos de width e height para evitar o efeito de salto de página
• Prefixo todos os URLs de imagem com URLs de proxy de CDN em nuvem, para transformar a imagem no tamanho ideal
• Use pontos de interrupção predefinidos (2x) srcset para telas de Hidef

Parâmetros

• url (String obrigatória): o URL para uma imagem (por exemplo, https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png )
• alt (string obrigatória): texto alt para descrever a imagem
• hi_def (booleano obrigatório): uma imagem foi carregada 2x a largura e a altura do tamanho desejado
• width (número inteiro obrigatório): o número de pixels de largura a imagem deve ser
• height (número inteiro opcional): o número de pixels de altura a imagem deve ser
• fill (booleano opcional): defina o modo de cultivo para "preencher"
• loading (string opcional, padrão: "preguiçoso"): definido como "automático" ou "ansioso" para desativar o preguiçoso
• attrs id Dicionário Opcional): class Extra <img>

Uso

Desenvolvimento local

Para o desenvolvimento local, é melhor testar este módulo com um de nossos projetos de site como o Ubuntu.com. Para mais informações, siga este guia (somente interno).

Código do aplicativo

A função image_template pode ser usada diretamente para gerar marcação de imagem.

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

No entanto, o uso mais comum é adicioná -lo aos contextos de modelo de Django ou Flask, como uma função image .

Uso do Django

Adicione -o como uma tag de modelo:

 # 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 -o em modelos:

# 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 do frasco

Adicione -o como uma tag de modelo:

 # 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 -o em modelos, por exemplo ::

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

Marcação gerada

A marcação da imagem de saída será, por exemplo:

 < 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 snippet de código

Para adicionar a marcação necessária para este modelo como um snippet de usuário, adicione o seguinte como um snippet html (snippets de usuário em arquivo> preferências ou código> preferências no 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"
}"