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