الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

CanonicalWebteam.Image-template

وحدة لإنشاء علامة صورة HTML أداء للصور. سوف العلامات:

  • استخدام Lazyloading الأصلي
  • حدد صريحًا سمات width height لتجنب تأثير القفز على الصفحة
  • بادئة جميع عناوين URL الخاصة بـ Image مع عناوين 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 (سلسلة اختيارية ، افتراضي: "Lazy"): تعيين على "Auto" أو "Cean" لتعطيل Lazyloading
  • attrs ( class الاختياري): يمكن id سمات extra <img>

الاستخدام

التنمية المحلية

للتنمية المحلية ، من الأفضل اختبار هذه الوحدة مع أحد مشاريع موقع الويب لدينا مثل 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 CODE SNIPPET

لإضافة العلامات المطلوبة لهذا القالب كقصاص مستخدم ، أضف ما يلي كقصاص 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"
}"
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل