canonicalwebteam.image template

canonicalwebteam.image-template

为图像生成性能HTML图像标记的模块。标记将：

• 使用本机懒惰
• 明确定义width和height属性以避免页面跳跃效果
• 前缀所有图像URL带有云CDN代理URL，以将图像转换为最佳尺寸
• 使用hidef屏幕的预定义（2x） srcset断点

参数

• url （强制性字符串）：图像的URL（例如https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png ）
• alt （强制字符串）：描述图像的Alt文本
• hi_def （强制性布尔值）：是否将图像上传到2倍，所需尺寸的宽度和高度
• width （强制性整数）：图像应为图像的像素数
• height （可选整数）：图像应为高的像素数
• fill （可选布尔值）：将作物模式设置为“填充”
• loading （可选字符串，默认值：“ Lazy”）：将“自动”或“急切”设置为禁用Lazyloading
• 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函数。

Django用法

将其添加为模板标签：

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

VS代码片段

要将此模板作为用户段添加所需的标记，请将以下内容添加为HTML片段（文件> PEXENCES下的用户摘要，或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"
}"