canonicalwebteam.image template

canonicalwebteam.image-template

画像のパフォーマンスのあるHTML画像マークアップを生成するモジュール。マークアップは次のとおりです。

• ネイティブのレイジーロードを使用します
• ページジャンプ効果を回避するために、 widthとheight属性を明示的に定義します
• すべての画像URLをCloudinaryCDNプロキシ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 （オプションの辞書）：追加の引数としてadrect <img>属性（ classまたはid ）を渡すことができます

使用法

ローカル開発

ローカル開発のために、ubuntu.comのようなウェブサイトプロジェクトの1つでこのモジュールをテストするのが最善です。詳細については、このガイド（内部のみ）をフォローしてください。

アプリケーションコード

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

ただし、最も一般的な使用法は、 image関数としてDjangoまたはFlaskテンプレートのコンテキストに追加することです。

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スニペットとして追加します（ファイルの下のユーザースニペット>設定、または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"
}"