11ty 및 Cloudinary가 있는 자동 개방형 그래픽 이미지

5507 단어 11tyeleventycloudinaryssg

게시물 데이터, Cloudinary API, 소셜 공유에 사용되는 Eleventy (11ty) 를 사용하여 모든 블로그 게시물이나 노트에 유일한 OG 이미지를 자동으로 생성하는 방법을 찾고 싶습니다.
이 솔루션의 목적은 모든 게시물에 대해 수동으로 블로그 게시물 이미지를 만들지 않고 소셜 미디어 사이트(예를 들어 트위터)에서 블로그 게시물을 공유할 때 더욱 돋보이게 하는 시간을 절약하는 것이다.
이전에 나는 게시물에 일반적인 이미지를 사용하거나 블로그 게시물 제목에 특정한 이미지를 사용했다면 이것은 OG 이미지가 될 것이다.그러나 나는 모든 게시물에 독특한 것이 있어서 소셜 미디어의 사람들에게 이 게시물이 무엇에 관한 것인지 즉시 알려줄 수 있기를 바란다.
이 점을 실현할 수 있는 방법은 많다. 예를 들어 Drew McLellan 2018년에 Dynamic Social Sharing Images 썼지만 Drew가 구축할 때 이 일을 하고 있다. 그리고 매우 똑똑한 것들과 Puppeter를 사용했다. 그리고 이 글은 작가Stephanie Eckles도 Puppeter를 사용했다.
이것들은 모두 좋은 해결 방안이지만, 나는 더욱 간단한 설정, 경량급 의존항을 원한다. 그다지 기술적이지 않고, 단지 그것을 설정하고 잊어버릴 수 있을 뿐이다.

솔루션


내가 실현하고자 하는 것은 이미지 맨 위에 게시물 제목을 표시하고 이미지에 내 로고를 추가하는 OpenGraph 이미지가 있다.이것이 바로 그의 모습이다.

우선, 그림의 OpenGraph 태그를 페이지 템플릿 <head> 에 추가해야 합니다. 제 예에서 eleventy blog.njk 레이아웃에 이 태그가 있습니다.다음은 현재 사용 중인 코드입니다.
{% if postImage %}
<meta name="twitter:image" property="og:image" content="{{ site.cloudinary_url }}{{ postImage }}" />
<meta name="twitter:image:alt" property="og:image:alt" content="{{ title }}" />
{% else %}
<meta name="twitter:image" property="og:image" content="{{ site.meta.ogImg }}" />
<meta name="twitter:image:alt" property="og:image:alt" content="{{ site.meta.ogImgAlt }}" />
{% endif %}
여기서 게시물이 게시물 그림을 지정했는지 확인하고, 없으면 기본 그림을 사용합니다. (여기에 쓴 내용을 사용하려면 수정이 필요합니다.)페이스북과 트위터에서 사용하는 OpenGraph 라벨 name="twitter:image" property="og:image" 을 합친 것이지 같은 일을 위해 여러 줄 코드를 작성한 것이 아니라는 것을 알게 될 것이다.이미지에 Alt text를 지정할 수 있습니다.
Cloudinary를 사용했기 때문에 요청할 때 이미지에 APItext and image overlays를 추가할 수 있다는 것을 알게 되어 기쁩니다.
이것은 나의 생각에 게시물 제목과 나의 로고가 한 이미지에 중첩되어 실현될 수 있다는 것을 의미한다.

그것은 어떻게 일합니까?


이것은 cloudinary 이미지 요청 URL에 변수를 전달함으로써 이루어집니다. 그리고 cloudinary API는 이 변수를 사용하여 사용자 정의 이미지를 동적으로 만듭니다.
이것은 사용자 정의 덮어쓰기가 있는 이미지를 요청하는 완전한 URL입니다. 이 예에서는 블로그 글 제목과 제 사이트 로고입니다.
https://res.cloudinary.com/juanfernandes/w_1200,f_auto/l_juanfernandes-logo,w_100,g_south_east,x_60,y_40/l_text:Georgia_80_bold_center:Using Defer to improve performance,co_rgb:eee,c_fit,w_600//v1579162296/computer-18363301920-1.jpg
가장 좋은 것은 브라우저에서 URL에 변수를 추가해서 그림을 설계할 수 있다는 것이다.
현재 이것은 제가 blog.njk 레이아웃 템플릿에서 Cloudinary 변수와 Eleventy의 블로그 게시물 변수를 사용하여 작성한 OpenGraph 이미지 코드입니다.
<meta name="twitter:image" property="og:image" content="{{ site.cloudinary_url }}w_1200,f_auto/l_juanfernandes-logo,w_100,g_south_east,x_60,y_40/l_text:Georgia_80_bold_center:{{ title }},co_rgb:eee,c_fit,w_600/{{ postImage }}" /><meta name="twitter:image:alt" property="og:image:alt" content="{{ title }}" />

우리 그것을 분해하자


본질적으로 저는 Nunjucks 변수를 사용하여 게시물 제목 텍스트와 이미지를 전달하고 Cloudinary가 게시물 이미지에 텍스트와 이미지를 덮어쓰는 방법을 알려 줍니다.다음은 이 모든 변수의 의미입니다.
  • https://res.cloudinary.com/juanfernandes/ 이것은 변수입니다. 제 계정 이름
    • 이 있는cloudinary URL을 전달하는 데 사용됩니다.
  • w_1200,f_auto/ 1200픽셀 너비의 이미지와 자동 이미지 형식을 요구합니다
  • l_juanfernandes-logo 덮어쓰기 그림에 사용하고 싶은 이미지의 이름입니다. 제 로고는 앞에 l_ 있습니다. 이것은cloudinary가 덮어쓰기 그림으로 사용하도록 알려주는 것입니다
  • w_100,g_south_east,x_60,y_40/ X 및 Y 값
    • 을 사용하여 이미지의 크기, 100px 너비 및 위치, 오른쪽 아래 및 정확한 위치를 지정합니다.
  • l_text:Georgia_80_bold_centercloudinary에 따르면 덮어쓰기 텍스트는 조지아 글꼴이고 글꼴 크기는 80px, 굵기, 가운데
  • Automated Open Graph images with 11ty and Cloudinary 블로그 글 제목의nunjucks 변수
  • co_rgb:eee,c_fit,w_600 이것은 cloudinary가 텍스트의 색을 덮어쓰고 수직과 수평으로 가운데에 놓고 텍스트의 최대 폭을 설정하고자 한다는 것을 알려준다
  • /v1579162296/computer-18363301920-1.jpg 이 변수는cloudinary에 업로드된 게시물 이미지의 이름을 전달합니다
    • 일반적인 게시물에 대해 예를 들어 저는 브랜드 색을 사용하여 일반적인 이미지를 만들었습니다. 텍스트는 이미지의 중심에 추가되고 로고는 오른쪽 아래에 추가됩니다.
    사용자 정의 이미지를 사용한 게시물의 경우 흰색 텍스트가 선명하게 보이도록 어두운 이미지인지 확인합니다.
    이것은 빠른 해결 방안이자 가벼운 승리이다. 이것은 나의 게시물을 소셜 미디어에서 더욱 돋보이게 할 것이다.Cloudinary API 덮어쓰기에 대한 자세한 내용은 자세히 살펴보고 알아야 합니다.

    힌트: 당신의 사교 공유 사진 테스트


    트위터와 페이스북은 소셜 미디어'카드'를 테스트하는 도구를 제공했다. 다음은 내가 지금 트위터에 올린 모습이다.

  • Facebook Sharing Debugger

    • 진일보하다


    저는 더 나아가 텍스트의 색을 전달하거나 서로 다른 로고나 이미지를 덮어쓰기로 선택할 수 있습니다. 내용 관리 시스템을 통해 설정할 수 있습니다. 제 경우 게시물을 만들 때 사용합니다Forestry.io.
    나는 심지어 그것을 11ty 플러그인으로 만들 수 있다.
    당신이 이것이 매우 유용하다고 생각하기를 바랍니다. 만약 당신이 그것에 관한 어떤 일을 토론하고 싶다면 우리에게 연락하십시오.
    zoj3591 Nim---비트 연산 바둑
    (부분) 리버스 엔지니어링 Neumorphism.io

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage