canonicalwebteam.image template

CanonicalWebteam.Image-Template

Модуль для генерации показателей HTML -изображения для изображений. Наценка будет:

• Используйте нативную ленивую загрузку
• Явно определяйте атрибуты width и height , чтобы избежать эффекта прыжка страницы
• Префикс всех URL -адресов изображения с облачными URL -адресами CDN Proxy, чтобы преобразовать изображение в оптимальный размер
• Используйте предопределенные (2x) точки разрыва srcset для экранов Hidef

Параметры

• url (обязательная строка): URL на изображение (например, https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png )
• alt (обязательная строка): Alt Text для описания изображения
• hi_def (обязательно логическое): было ли загружено изображение в 2 раза ширина и высота желаемого размера
• width (обязательное целое число): количество шириной пикселей. Изображение должно быть
• height (необязательное целое число): количество пикселей высокое изображение должно быть
• fill (необязательно логическое): установите режим обрезки, чтобы «заполнить»
• loading (необязательная строка, по умолчанию: «ленивый»): установите на «Авто» или «Желание», чтобы отключить ленивую загрузку
• attrs (необязательный словарь): дополнительные <img> атрибуты (например, class или id ) могут быть переданы в качестве дополнительных аргументов

Использование

Местное развитие

Для местной разработки лучше всего проверить этот модуль с одним из наших веб -проектов, таких как Ubuntu.com. Для получения дополнительной информации следуйте этому руководству (только внутреннее).

Код приложения

Функцию image_template можно использовать непосредственно для генерации разметки изображения.

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

Тем не менее, наиболее распространенным использованием является добавление его в контексты шаблонов Django или колбы, в качестве функции image .

Использование Джанго

Добавьте его в виде тега шаблона:

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

Используйте его в шаблонах:

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

Использование колбы

Добавьте его в виде тега шаблона:

 # app.py

from canonicalwebteam import image_template
from flask import Flask

app = Flask ( __name__ )

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

Используйте его в шаблонах, например ::

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

Сгенерированная разметка

Оценка выходного изображения будет, например:

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

Против фрагмента кода

Чтобы добавить необходимую разметку для этого шаблона в качестве фрагмента пользователя, добавьте следующее в качестве фрагмента HTML (фрагменты пользователя в соответствии с файлами> Настройки или код> настройки на 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"
}"