Créez vos propres images sociales automatisées avec RESOC

Créez des images sociales automatisées avec HTML et CSS et intégrez-les dans le blog Eleventy et éventuellement déployer sur la plate-forme Netlify. Cet article vous guidera dans l'ensemble du processus étape par étape, réalisant une automatisation d'image sociale de haut niveau sans rédaction de code complexe.

Récemment, les images sociales automatisées sont devenues un sujet brûlant, et Github, Jetpack et d'autres ont lancé des outils connexes. Des développeurs comme Ryan Filler et Zach Leatherman ont également implémenté cette fonctionnalité sur leurs sites Web, mais nécessitent beaucoup de code personnalisé. De nos jours, avec de nouveaux outils, nous pouvons simplifier ce processus.

Ce tutoriel vous guidera pour créer des images sociales automatisées personnalisées à l'aide de HTML et CSS, les intégrer dans le blog Eleventy via la configuration et enfin se déployer sur Netlify.

Si vous avez hâte de voir le résultat final, veuillez visiter le lien du projet ou parcourir le code du projet!

Que sont les images sociales?

En html En partie, nous insérons des métadonnées graphiques ouvertes:

<meta content="La stratégie du ciel bleu" property="og:title">
<meta content="Moins de nuages, plus de bleu" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

Lorsque nous partageons cette page sur Facebook, nous et nos amis verrons:

LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage… Tous ces sites Web se comportent à peu près de la même manière: ils fournissent un lien avec une "carte" visuelle pour la rendre plus spatiale et contextuelle.

Twitter a son propre ensemble de balises de métadonnées - des cartes Twitter, mais elles sont très similaires. Lorsque Twitter ne trouve pas les cartes Twitter, il se replie pour ouvrir le graphique.

Les titres de page et les descriptions sont essentiels, mais dans les captures d'écran ci-dessus, elles semblent très petites par rapport aux images du ciel et des nuages, sans parler de la taille de la zone cliquable. C'est le pouvoir des images sociales. Lorsque les liens sont partagés, il est facile de comprendre l'influence de ces images.

Du niveau 0 au niveau 3

Toutes les images sociales ne sont pas égales. Ce qui suit ne sont pas des termes officiels, mais considérons le niveau d'influence de ces cartes d'image sociales:

Niveau 0

L'image sociale la plus élémentaire est qu'il n'y a pas d'images. Les liens peuvent être inondés avec beaucoup de contenu, avec de petites zones visuelles et manquer d'attrait visuel.

Niveau 1

Une technologie classique consiste à créer une image sociale unifiée sur l'ensemble du site . Bien que cette solution semble avoir un bon rapport entrée-sortie, on pourrait penser qu'elle est pire que d'avoir aucune image. Bien sûr, nous attirerons une certaine attention, mais la réaction peut être négative, surtout lorsque les gens voient que beaucoup de liens du même site Web se ressemblent. Il est sujet à la répétition et inutile.

Niveau 2

Le niveau suivant est la pratique standard pour les blogs et les sites Web de médias: chaque article a sa propre image en vedette et est différent les uns des autres. Cette pratique est tout à fait raisonnable pour les sites Web d'actualités, car les photos peuvent compléter le contenu de la page. L'inconvénient potentiel ici est la nécessité de trouver et de créer du matériel d'image pour chaque article publié.

Cela peut conduire à une certaine paresse. Nous avons tous vu des photos qui sont évidemment des photos de stock. Cela peut attirer l'attention, mais ce n'est peut-être pas l'attention que vous voulez vraiment.

Niveau 3

Niveau final: chaque page a des images sociales riches et significatives. C'est ce que fait CSS-Tricks. Les photos sociales de l'équipe sont semblables à une marque. Ils partagent la même mise en page. Ils mentionnent le titre de l'article, ainsi que le nom et la photo de profil de l'auteur, qui n'est pas visible par les titres et descriptions ordinaires. Ils sont frappants et mémorables.

Il y a une condition préalable évidente pour cette approche: l'automatisation. Créer une image unique pour chaque lien possible est impossible. Pensez à la quantité de travail supplémentaire que cela nécessite. Nous avons besoin de quelques solutions programmatiques pour nous aider à faire du travail lourd.

Créons un blog avec des images sociales uniques

Pour vous donner une bonne raison (et bac à sable) pour construire des images sociales uniques, nous créerons un blog simple. Lorsque j'écris et publie des articles sur ce blog, je suis un processus simple en deux étapes:

1. Articles d'écriture et de publication
2. Publier une URL publiée sur mon compte de réseau social

Les images sociales doivent jouer un rôle en ce moment. Nous voulons rendre notre blog aussi accrocheur que possible. Mais ce n'est pas notre seul objectif. Ce blog devrait créer notre marque personnelle. Nous espérons que nos amis, collègues et fans se souviendront de nous lorsqu'ils verront nos messages sociaux. Nous voulons quelque chose de reproductible, reconnaissable et représentatif.

La création d'un blog demande beaucoup de travail. Bien que les images sociales automatisées soient cool, il est imprudent de y consacrer trop de temps. (Chris est arrivé à la même conclusion à la fin de 2020). Donc, pour être plus efficace, nous faisons un site Web Eleventy. Eleventy est un simple générateur de sites Web statique. Au lieu de partir de zéro, utilisez un projet de démarrage existant. En fait, choisissons le premier, électronique-blog.

Visitez la page GitHub électronique-Base-blog et utilisez-la comme modèle:

Créons le référentiel et définissons le nom et la description du référentiel. Nous pouvons le définir public ou privé, cela n'a pas d'importance.

Ensuite, nous clonons le référentiel localement, installons le package et exécutons le site:

 GIT CLONE [votre URL du référentiel]
CD My-Demo-Blog ### ou n'importe quel nom que vous avez nommé NPM Installer
SERVIR DE RUNE NPM

Notre site Web fonctionne sur http: // localhost: 8080.

Déployons maintenant. Netlify rend cette tâche très rapide (et gratuite!). (Oh, avertissement de spoiler: notre automatisation sociale d'image repose sur la fonction Netlify.)

Visions donc Netlify et créons un compte si vous n'avez pas déjà de compte. Quoi qu'il en soit, créez un nouveau site:

Permettez à NetLify d'accéder au référentiel de blog.

NetLify déploie notre site:

Après environ une minute, le blog a été déployé:

Un modèle d'image domine tous

Nos images sociales seront basées sur un modèle d'image. Pour concevoir ce modèle, nous utiliserons des techniques que nous connaissons et aimons déjà: HTML et CSS. HTML ne se convertit pas automatiquement en images, mais il existe des outils qui peuvent le faire, notamment Chrome sans tête avec marionnettiste.

Cependant, au lieu de construire une empilement d'image sociale vous-même, utilisez le kit de développement de modèle d'image de résistance. Ainsi, à partir du répertoire des racines du projet, nous pouvons l'exécuter dans le terminal:

 NPX ITDK INIT RESOC-TEMPLATES / DEFAULT -M TITRE DESCRIPTION

Cette commande crée un nouveau modèle d'image dans le répertoire RESOC-Templates / par défaut. Il s'ouvrira également dans une nouvelle fenêtre de navigateur.

Nous pouvons utiliser ce modèle tel quel, mais cela nous permettra d'atteindre le niveau 2 dans la plage "d'influence". Ce dont nous avons besoin pour l'atteindre au niveau 3 et faire correspondre le modèle CSS-Tricks est:

• Le titre est aligné à droite, laissant un espace négatif à gauche.
• Il y a un pied de page en bas qui contient un gradient de fond composé de deux couleurs que nous utiliserons tout au long du blog.
• Nom et profil Image de l'auteur de l'article.

Si nous retournons au navigateur, nous pouvons voir dans le panneau "Paramètres" de la visionneuse de modèle que le modèle nécessite deux paramètres: titre et description. Il s'agit exactement du modèle que nous avons sélectionné lorsque nous exécutons -m title-description dans le terminal. Mais nous pouvons ajouter plus de paramètres en modifiant resoc-templates/default/resoc.manifest.json . Plus précisément, nous pouvons supprimer le deuxième paramètre pour obtenir:

 {
  "partiels": {
    "Contenu": "./content.html.mustache",
    "Styles": "./styles.css.mustache"
  },
  "Paramètres": [
    {
      "nom": "titre",
      "type": "texte",
      "Demovalue": "Une image vaut mille mots"
    }
  ]]
}

Le spectateur du navigateur reflète les changements:

Il est temps de concevoir l'image elle-même, nous pouvons la concevoir dans resoc-templates/default/content.html.mustache :

<div>
  <main><h1>{{ titre }}</h1></main>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="Créez vos propres images sociales automatisées avec RESOC">
  <h2>Philippe Bernard</h2>
</div>

C'est tout simplement HTML. OK, sauf {{ title }} . Il s'agit du moteur de modèle que la moustache, RESOC utilise pour injecter les valeurs de paramètres dans les modèles. Nous pouvons même taper du texte dans le champ de titre pour voir comment cela fonctionne:

Lors de la visualisation de l'aperçu, veuillez noter que nous manquons une image profil-pic.jpg . Copiez votre meilleure photo de profil sur resoc-templates/default/profil-pic.jpg :

Il est temps d'écrire CSS dans resoc-templates/default/styles.css.mustache . Le point de ce post n'est pas de savoir comment styliser le modèle, mais c'est le style que j'ai fini par utiliser:

 @Import URL ('https://fonts.googleapis.com/css2?family=anton&family=raLay&display=swap');

/ * ... CODE CSS ... * /

La plupart des dimensions dépendent des unités VW et VH pour aider à prédire les différents contextes que le modèle peut présenter. Nous suivrons la recommandation de Facebook, qui est de 1200 × 630. Les cartes Twitter, en revanche, sont de taille différente. Nous pouvons rendre l'image à faible résolution (comme 600 × 315), mais utilisons 1200 × 630, nous avons donc juste besoin d'utiliser des pixels.

Le spectateur rend un aperçu de Facebook à 1200 × 630 et zooms vers le bas pour s'adapter à l'écran. Si l'aperçu répond à vos attentes, l'image graphique ouverte réelle sera également.

Jusqu'à présent, les modèles répondent à nos besoins:

(Le contenu suivant continue de réécrire les pièces restantes en fonction de la structure du texte d'origine. Tout en maintenant la cohérence du contenu, ajustez l'expression du langage et la structure du paragraphe pour la rendre plus fluide et plus naturelle.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!