canonicalwebteam.image template

canonicalwebteam.Image-template

이미지의 수행자 HTML 이미지 마크 업을 생성하는 모듈. 마크 업은 다음과 같습니다.

• 기본 Lazyloading을 사용하십시오
• 페이지 점프 효과를 피하기 위해 width 과 height 속성을 명시 적으로 정의합니다.
• 이미지를 최적의 크기로 변환하려면 Cloudinary CDN 프록시 URL을 사용하여 모든 이미지 URL을 접두사
• Hidef 화면에 사전 정의 된 (2x) srcset 브레이크 포인트를 사용하십시오

매개 변수

• url (필수 문자열) : 이미지에 대한 URL (예 : https://assets.ubuntu.com/v1/9f6916dd-k8s-prometheus-light.png )
• alt (필수 문자열) : 이미지를 설명하는 Alt Text
• hi_def (필수 부울) : 이미지가 업로드되었습니다.
• width (필수 정수) : 이미지의 폭 픽셀 수
• height (선택적 정수) : 이미지가 높은 픽셀 수
• fill (선택적 부울) : 작물 모드를 "채우기"로 설정
• loading (선택 사양 문자열, 기본값 : "Lazy") : Lazyloading을 비활성화하기 위해 "자동"또는 "eger"로 설정
• attrs (선택 <img> ) : 추가 인수로 전달할 수 id class

용법

지역 개발

지역 개발의 경우 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" },
)

그러나 가장 일반적인 사용법은 image 기능으로 Django 또는 Flask 템플릿 컨텍스트에 추가하는 것입니다.

장고 사용

템플릿 태그로 추가하십시오.

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

대 코드 스 니펫

이 템플릿에 필요한 마크 업을 사용자 스 니펫으로 추가하려면 다음을 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"
}"