canonicalwebteam.image template

CanonicalWeBteam.Image-Template

โมดูลเพื่อสร้างมาร์กอัปภาพ HTML ที่มีประสิทธิภาพสำหรับภาพ มาร์กอัปจะ:

• ใช้ Lazyloading ดั้งเดิม
• กำหนดคุณลักษณะ width และ height อย่างชัดเจนเพื่อหลีกเลี่ยงเอฟเฟกต์การกระโดดหน้าเว็บ
• คำนำหน้า URL ภาพทั้งหมดที่มี URL พร็อกซี CDN cdn เพื่อแปลงภาพให้เป็นขนาดที่เหมาะสมที่สุด
• ใช้จุดพัก srcset ที่กำหนดไว้ล่วงหน้า (2x) สำหรับหน้าจอ hidef

พารามิเตอร์

• url (สายบังคับ): URL ไปยังรูปภาพ (เช่น https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png )
• alt (สตริงบังคับ): ข้อความ alt เพื่ออธิบายภาพ
• hi_def (บูลีนบังคับ): มีการอัปโหลดภาพ 2x ความกว้างและความสูงของขนาดที่ต้องการ
• width (จำนวนเต็มบังคับ): จำนวนพิกเซลที่กว้างควรเป็นภาพ
• height (เป็นตัวเลือกจำนวนเต็ม): จำนวนพิกเซลที่สูงควรเป็นภาพ
• fill (บูลีนเสริม): ตั้งค่าโหมดการครอบตัดเป็น "เติม"
• loading (สตริงเสริม, ค่าเริ่มต้น: "ขี้เกียจ"): ตั้งค่าเป็น "อัตโนมัติ" หรือ "กระตือรือร้น" เพื่อปิดใช้งาน 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 หรือ Flask เป็นฟังก์ชั่น 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 (ตัวอย่างของผู้ใช้ภายใต้ไฟล์> การตั้งค่าหรือรหัส> การตั้งค่าบน 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"
}"