logo

Generování obrázků pro sociální sdílení v jedenácti

Inspirován Jasonem Lengstorfem jsem přidal obrázky pro sdílení na sociálních sítích do všech svých blogových příspěvků na stevenhicks.me. To znamená, že když sdílíte článek z mého webu na místě, jako je Twitter, dostanete pěknou velkou kartu, jako je tato:

Bonbón! Nemůžu se nabažit těch vibrací chlupatého koberce ze 70. let.

Stav techniky

Než vám ukážu, jak já Připojil jsem to k mému 110 webu, zvažte tento článek od Stephanie Eckles o použití loutkáře k vytváření obrázků pro sdílení na sociálních sítích. Pokud chcete k vytváření obrázků pro sdílení na sociálních sítích používat HTML a CSS, je to pravděpodobně to, co hledáte!

Metoda, kterou jsem zvolil (1) používá Cloudinary k překrytí názvu článku na společném obrázku pro sdílení na sociálních sítích.

Většinu toho, co jsem potřeboval, pokryl Jason ve svých článcích o přidávání překryvných textů v Cloudinary, návrhu karty pro sdílení na sociálních sítích a automatickém generování obrázků pro sdílení na sociálních sítích pomocí get-share-image . Díky, Jasone!

Pozor, časově nejnáročnější částí bylo vyladění překryvných textů Cloudinary. Spousta pohrávání si s tajemnými argumenty. Je to doslova tlačení pixelů, aby se text dostal na správné místo.

Odeslání adres URL obrázků za jedenáct

Zde je můj dodatek k tomuto problémovému prostoru:PR, který ukazuje vše, co jsem potřeboval udělat, abych spojil obrázky do jedenácti!

Není toho moc, ale pojďme si to projít.

1. Přidejte get-share-image závislost

Uděláte to pomocí npm install @jlengstorf/get-share-image nebo yarn add @jlengstorf/get-share-image . Přidal jsem to do svého devDependencies protože mi záleží na oddělení závislostí dev od závislostí runtime. Možná je vám to jedno – nebudu vás kvůli tomu přetahovat.

2. Přidejte jedenáct vypočtených datových souborů

Vypočítané datové soubory Eleventy vkládají vypočítané vlastnosti do šablony stránky pro každou stránku, na kterou se vztahují. Jako možná chcete vypočítat adresu URL obrázku pro sdílení na sociálních sítích, která je založena na názvu článku!

Přidal jsem soubor s názvem blog.11tydata.js na blog/ složku. Rozhodl jsem se to vložit do blog/ složku, protože jsem chtěl pouze generovat sociální obrázky pro své články na blogu; připadalo mi hloupé generovat sociální obrázek pro mou stránku s informacemi, na kterém je uvedeno „O“. Nejsem si jistý, zda název souboru musí začínat blog , ale to je to, co udělali dokumenty ve svém příkladu (posts/posts.11tydata.js ), tak jsem do toho šel.

Obsah blog/blog.11tydata.js :

const getShareImage = require('@jlengstorf/get-share-image').default;

module.exports = {
  eleventyComputed: {
    shareImage: (data) => {
      return getShareImage({
        // settings for cloudinary overlays
      });
    },
  },
};
  1. Zavedeme get-share-image závislost.
  2. Exportujeme objekt s vlastností nazvanou eleventyComputed .
  3. Každá vlastnost eleventyComputed je vypočítaná vlastnost, která bude k dispozici v šablonách stránek. V našem případě vypočítáme vlastnost s názvem shareImage . Jeho hodnota je výsledkem volání getShareImage s řadou konfigurací pro překryvnou vrstvu Cloudinary.

Toto shareImage vlastnost se vypočítá pro každou stránku v rámci blog/ , na základě jeho metadat (to je to, co data argument předaný do funkce představuje).

Jedinými dynamickými údaji zde pro můj web byl title vlastnost, která bude předána do getShareImage :

module.exports = {
  eleventyComputed: {
    shareImage: (data) => {
      return getShareImage({
        // ...
        title: data.title,
        // ...
      });
    },
  },
};

3. Vyšlete shareImage vlastnost ve vaší šabloně

Mám jednu šablonu základní stránky pro svůj web. Je založen na mopsím jazyce.

Aktualizoval jsem jej, aby vydával shareImage v příslušných metaznačkách, pokud existují:


meta(property='og:image' content=`${shareImage || 'https://www.stevenhicks.me/static/img/avatar.jpg'}`)
meta(property='twitter:image' content=`${shareImage || 'https://www.stevenhicks.me/static/img/avatar.jpg'}`)

Všechny články na blogu budou mít shareImage vypočítanou vlastnost, takže budou vydávat své vygenerované obrázky. Stránky jako Home a About nebudou mít shareImage vypočítané, protože jsem vložil blog.11tydata.js soubor v blog/ složka — takže se zaseknou s obrázkem mého obličeje. MOJE TVÁŘ!

Zabal to, Steve

PR má nakonec 39 přidaných řádků – a více než polovinu z toho tvoří konfigurační nastavení pro překryvný text. JavaScript je skvělý!

Pravděpodobně jste našli tento článek, protože už máte jedenáct stránek, ale pokud ne, měli byste se na to rozhodně podívat. Je to skvělá volba pro vytvoření blogu nebo jakéhokoli jiného webu, kde se data často nemění. Připadá mi to intuitivnější než jiné oblíbené možnosti. Tento příklad zejména ukazuje, jak dobře je navržen pro generování dynamického obsahu. Pokaždé, když narazím na nový problém, s potěšením zjistím, že existuje jednoduchý mechanismus vestavěný do jedenáctky, který jej řeší.


1 Hahahahaha Chovám se, jako bych měl v tomto rozhodnutí agenturu, ale ve skutečnosti jsem neviděl Stephanin článek, dokud jsem neinvestoval spoustu času do generování obrázkové šablony založené na Jasonových článcích. Jsem stejně nadšený z omylu o utopených nákladech jako kdokoli jiný, a jsme tady.