canonicalwebteam.image template

canonicalWebTeam.Image-template

Modul untuk menghasilkan markup gambar HTML performant untuk gambar. Markup akan:

• Gunakan Native Lazyloading
• Secara eksplisit mendefinisikan atribut width dan height untuk menghindari efek lompatan halaman
• Awalan semua URL gambar dengan URL proxy CDN cloudinary, untuk mengubah gambar ke ukuran optimal
• Gunakan titik istirahat srcset yang telah ditentukan sebelumnya untuk layar HIDEF

Parameter

• url (string wajib): URL ke gambar (mis https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png
• alt (string wajib): Alt teks untuk menggambarkan gambar
• hi_def (wajib boolean): Apakah gambar telah diunggah 2x lebar dan tinggi dari ukuran yang diinginkan
• width (integer wajib): Jumlah piksel lebar gambar seharusnya
• height (bilangan bulat opsional): Jumlah piksel tinggi gambar seharusnya
• fill (boolean opsional): Atur mode tanaman ke "isi"
• loading (string opsional, default: "malas"): diatur ke "otomatis" atau "bersemangat" untuk menonaktifkan malaseloading
• attrs (Kamus Opsional): Atribut <img> Ekstra (misalnya class atau id ) dapat dilewati sebagai argumen tambahan

Penggunaan

Pengembangan Lokal

Untuk pengembangan lokal, yang terbaik adalah menguji modul ini dengan salah satu proyek situs web kami seperti ubuntu.com. Untuk informasi lebih lanjut, ikuti panduan ini (hanya internal).

Kode aplikasi

Fungsi image_template dapat digunakan secara langsung untuk menghasilkan markup gambar.

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

Namun, penggunaan yang paling umum adalah menambahkannya ke konteks Django atau Template Flask, sebagai fungsi image .

Penggunaan Django

Tambahkan sebagai tag template:

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

Gunakan dalam template:

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

Penggunaan Flask

Tambahkan sebagai tag template:

 # app.py

from canonicalwebteam import image_template
from flask import Flask

app = Flask ( __name__ )

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

Gunakan dalam templat, misalnya ::

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

Markup yang dihasilkan

Markup gambar output akan menjadi misalnya:

 < 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 cuplikan kode

Untuk menambahkan markup yang diperlukan untuk templat ini sebagai cuplikan pengguna, tambahkan yang berikut sebagai cuplikan HTML (cuplikan pengguna di bawah file> preferensi, atau kode> preferensi pada 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"
}"