이미지 연산자

이미지 연산자는 이미지의 크기와 비율을 재정의하거나 반응형으로 만드는 것과 같은 특성을 Google 이미지의 URL에 적용할 수 있도록 하는 Blogger 전용 연산자입니다.

구문

이름	연산자	피연산자	응용 구문	결과
조정된 크기의 이미지	resizeImage	2개 또는 3개	resizeImage(image,number,string)	IMAGE
조정된 크기의 이미지 배열			resizeImage(image,array[number],string)	ARRAY[OBJECT]
반응형 이미지	sourceSet		sourceSet(image,array[number],string)	STRING

참고: 응용 구문은 기본 구문에 동일한 연산자가 여러 번 포함될 때 사용할 수 있습니다. 이미지 연산자 사용과 관련하여 이는 기본 구문보다 사용하기가 더 쉽습니다. 자세한 내용 보기

지원되는 이미지

Blogger, Picasa, GooglePhotos 및 YouTube 비디오 썸네일 이미지를 통해 Google에서 호스팅하는 이미지 URL에는 크기를 조정할 수 있는 속성이 있습니다. 연산자는 이러한 매개 변수에 새로운 값을 적용합니다.

위의 소스에서 호스팅하는 이미지의 URL이 포함된 문자열 및 STRING 데이터로도 연산할 수 있습니다.

이미지 크기 조정

resizeImage 연산자에는 2 개의 구문이 있습니다. 첫 번째는 대부분의 경우 <img> 태그의 src 속성에 사용되는 이미지 크기를 조정할 수 있습니다.

1. 첫 번째 피연산자는 이미지의 URL입니다.
2. 두 번째 피연산자는 이미지의 새 비율을 정의하는 숫자입니다.
3. 세 번째 피연산자는 필요하지 않습니다. 다음은 이미지의 새로운 비율을 포함하는 문자열입니다
   • 정사각형으로 자르기 : "1:1", "2:2", "25:25" 등...
   • 특정 비율로 자르기 : "4:3", "16:9", "800:600" 등...
   • 세로로 자르기 : 이 형식은 지원되지 않습니다.

기본 구문을 사용한 예

<img expr:src='data:view.featuredImage resizeImage 600 resizeImage "4:3"'/>

응용 구문을 사용한 예

<img expr:src='resizeImage(data:view.featuredImage, 600, "4:3")'/>

값이 있는 예

<img expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/s200/image.jpg", 500, "500:200")'/>

이미지 200px의 크기가 500px으로 조정되었습니다. 비율은 500:200입니다.



HTML 렌더링 결과는 다음과 같습니다.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/w500-h200-p-k-no-nu/image.jpg'/>

크기가 조정된 이미지 배열 만들기

resizeImage 연산자의 두 번째 구문은 크기가 조정된 이미지를 포함하는 배열을 만듭니다.

1. 첫 번째 피연산자는 이미지의 URL입니다.
2. 두 번째 피연산자는 이미지의 새 비율을 정의하는 숫자 배열입니다.
3. 세 번째 피연산자는 필요하지 않습니다. 다음은 이미지의 새로운 비율을 포함하는 문자열입니다
   • 정사각형으로 자르기 : "1:1", "2:2", "25:25" 등...
   • 특정 비율로 자르기 : "4:3", "16:9", "800:600" 등...
   • 세로로 자르기 : 이 형식은 지원되지 않습니다.

연산의 결과는 항목이 있는 객체 배열이 됩니다.

• url : 크기가 조정된 이미지의 URL입니다.
• size : 크기가 조정된 이미지의 크기입니다.

기본 구문을 사용한 예

<b:loop values='data:view.featuredImage resizeImage [50,75,100] resizeImage "16:9"' var='image'>

  URL : <img expr:src='data:image.url'/>
  SIZE : <data:image.size/>

</b:loop>

응용 구문을 사용한 예

<b:loop values='resizeImage(data:view.featuredImage, [50,75,100], "16:9")' var='image'>

  URL : <img expr:src='data:image.url'/>
  SIZE : <data:image.size/>

</b:loop>

값이 있는 예

<b:loop values='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/s200/image.jpg", [50,75,100], "16:9")' var='image'>

  <img expr:src='data:image.url'/>

</b:loop>

이미지 크기가 각각 50px, 75px 및 100px로 조정되었습니다. 비율은 16:9입니다.



HTML 렌더링 결과는 다음과 같습니다.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/w50-h28-p-k-no-nu/image.jpg'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/w75-h42-p-k-no-nu/image.jpg'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/w100-h56-p-k-no-nu/image.jpg'/>

반응형 이미지

sourceSet 연산자는 resizeImage 연산자의 두 번째 구문과 매우 유사합니다. 결과가 태그의 srcset 매개 변수에 삽입될 값을 가진 문자열이라는 차이점이 있습니다.

1. 첫 번째 피연산자는 이미지의 URL입니다.
2. 두 번째 피연산자는 숫자 배열입니다.
3. 세 번째 피연산자는 필요하지 않습니다. 다음은 이미지의 새로운 비율을 포함하는 문자열입니다
   • 정사각형으로 자르기 : "1:1", "2:2", "25:25" 등...
   • 특정 비율로 자르기 : "4:3", "16:9", "800:600" 등...
   • 세로로 자르기 : 이 형식은 지원되지 않습니다.

적용 결과

URL_IMAGE_200px w200,
URL_IMAGE_400px w400,
URL_IMAGE_800px w800,
URL_IMAGE_1600px w1600

기본 구문을 사용한 예

<img expr:src='data:view.featuredImage'
     expr:srcset='data:view.featuredImage sourceSet [200,400,800,1600] sourceSet "3:1"'/>

응용 구문을 사용한 예

<img expr:src='data:view.featuredImage'
     expr:srcset='sourceSet(data:view.featuredImage, [200,400,800,1600], "3:1")'/>

값이 있는 예

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/s200/image.jpg'
     expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkkV387ui1wlZWCN1KBydRrxn8EdWJ6TdH4b5lWxkemKAIf1giq3uIUUE0klngStiV_Vihp75p2FVXf26XBso2SFatHWQRJFZM_k6uvI9CLvIIsehDad0n1ON3AGHZbj544s_0l7DCVk/s200/image.jpg", [200,400,800,1600], "3:1")'
     style='width: 100%;'/>

200px 이미지가 컨테이너 너비의 100 %로 확대되었습니다. srcset 속성은 컨테이너 크기에 가장 가까운 크기를 선택합니다.

다른 연산자

• + (concatenate)
• + (addition)
• - (substraction)
• * (multiplication)
• / (division)
• % (modulus)
• ?: (selector)
• all
• and (&&)
• any
• appendParams
• contains (array)
• contains (string)
• count
• eq (==)
• filter
• first
• format
• fragment
• gt (>)
• gte (>=)
• in
• limit
• lt (<)
• lte (<=)
• map
• neq (!=)
• none
• not (!)
• offset
• or (||)
• params
• path
• resizeImage
• select
• skip
• snippet
• sourceSet
• take
• to
• where

소개로 돌아가기