J'ai à nouveau réfléchi aux images des médias sociaux. Vous savez, les images qui (peuvent) apparaître lorsque vous partagez un lien dans des endroits comme Twitter, Facebook ou iMessage. Vous laissez essentiellement de l'argent sur la table sans eux, car ils tournent un message régulier avec un petit lien en un post avec une grande image de l'attention de l'attention, avec une zone cliquable massive. De n'importe quelle image sur un site Web, l'image des médias sociaux pourrait être l'image la plus visionnée, la plus rappelée, la plus demandée sur le site.

c'est essentiellement ce morceau de html qui les fait se produire:

Mais assurez-vous de lire dessus car il y a un tas d'autres balises HTML pour bien faire.

Je pense que j'y pense à nouveau parce que Github semble avoir de nouvelles cartes de médias sociaux. Ce sont nouveaux, non?

Ces images de médias sociaux GitHub sont clairement générées par programme. Consultez un exemple URL.

Automation

Bien que je pense que vous pouvez faire beaucoup de coups d'une image de médias sociaux conçue par des besoins entièrement conçue à la main, ce n'est pas pratique pour les sites avec beaucoup de pages: blogs, commerce électronique… vous savez ce que je veux dire. L'astuce pour des sites comme celle-ci est d'automatiser leur création via des modèles d'une manière ou d'une autre. J'ai mentionné les prises avec d'autres personnes dans le passé, mais récapitulons:

• Drew McLellan: Images de partage social dynamique
• Vercel: ouvrir l'image du graphique en tant que service
• phil Hawksworth: Social-Image-Generator
• ryan filler: Automatic Social Share Images

vous savez ce que tous ceux-ci ont en commun? Marionnettiste.

Puppeteer est un moyen de tourner et de contrôler une copie sans tête de Chrome. Il a cette fonctionnalité incroyablement utile de pouvoir prendre une capture d'écran de la fenêtre du navigateur: attendre page.screenshot ({path: 'scissenshot.png'});. C’est ainsi que notre site Web de polices de codage fait les captures d'écran. L'idée de capture d'écran est ce qui fait avancer les gens. Pourquoi ne pas concevoir un modèle de médias sociaux dans HTML et CSS, puis demandez à Puppeteer de le capturer, et utilisez que comme image de médias sociaux?

J'adore cette idée, mais cela signifie avoir l'accès à un serveur de nœuds (Puppeteer s'exécute sur Node) qui s'exécute tout le temps, ou que vous pouvez frapper en tant que fonction sans serveur. Il n'est donc pas étonnant que cette idée ait résonné avec la foule Jamstack qui sont déjà habituées à faire des choses comme l'exécution de processus de construction et le tirage de fonctions sans serveur.

Je pense que l'idée «d'hébergement» la fonction sans serveur dans une URL - et la transmettre les valeurs dynamiques de ce qu'il faut inclure dans la capture d'écran via le paramètre URL est également intelligente.

la route svg

Je creuse l'idée d'utiliser SVG comme chose que vous modèle pour les images de médias sociaux, en partie parce qu'elle a de telles coordonnées fixes à concevoir à l'intérieur, qui correspond à mon modèle mental de faire les dimensions exactes dont vous avez besoin pour concevoir des images de médias sociaux. J'aime la façon dont SVG est si composable.

George Francis a blogué «Créez vos propres images sociales SVG génératives» qui est un merveilleux exemple de tout ce qui se rassemble bien, avec une touche de randomisation et de fantaisie. J'aime aussi l'astuce satisfaits, ce qui en fait un outil utile pour la capture d'écran ponctuelle.

J'ai également taillé dans la création dynamique de SVG: consultez cette page de conférence sur notre site de conférences.

Malheureusement, SVG n'est pas un format d'image pris en charge pour les images de médias sociaux. Voici Twitter spécifiquement:

URL de l'image à utiliser dans la carte. Les images doivent avoir une taille inférieure à 5 Mo. Les formats JPG, PNG, WebP et GIF sont pris en charge. Seul le premier cadre d'un GIF animé sera utilisé. Svg n'est pas pris en charge.

twitter docs

Pourtant, la composition / les modèles dans SVG peut être cool. Vous le convertissez en un autre format pour l'utilisation finale. Une fois que vous avez un SVG, la conversion de SVG en PNG est presque trivialement facile. Dans mon cas, j'ai utilisé SVG2PNG et une très petite tâche Gulp qui s'exécute pendant le processus de construction.

Qu'en est-il de WordPress?

Je n'ai pas de processus de construction pour mon site WordPress - du moins pas un qui s'exécute à chaque fois que je publie ou met à jour un message. Mais WordPress profiterait le plus (dans mon monde) à partir d'images dynamiques de médias sociaux.

Ce n'est pas que je ne les ai pas maintenant. Jetpack contribue grandement à faire bien cela. Il fait «l'image en vedette» de l'article de l'image des médias sociaux, me permet de le prévisualiser et de poteaux automobiles aux réseaux sociaux. Voici une vidéo que j'ai faite à ce sujet. Cela va m'amuser dans un endroit où les images en vedette sont attachées et affichent bien.

mais cela n'automatise pas leur création. Parfois, un graphique sur mesure est le chemin à parcourir (celui ci-dessus pourrait être un bon exemple de cela), mais peut-être plus souvent, une carte bien imprimée est la voie à suivre.

Heureusement, j'ai pris le vent du générateur d'images sociales pour WordPress de Daniel Post. Regardez comme Fancy:

C'est exactement ce dont WordPress a besoin!

Daniel lui-même m'a aidé à créer un modèle personnalisé juste pour CSS-Tricks. J'avais grand-chose à avoir un tas de modèles à choisir qui incorporent le titre, l'auteur, les citations choisies, les images en vedette et d'autres choses. Jusqu'à présent, nous nous sommes installés sur seulement deux, un modèle avec le titre et l'auteur, et un modèle avec une image, un titre et un auteur en vedette. Les images sont créées à partir de ces métadonnées à la volée:

Ce n'est pas un marionnetteer. Ce n'est même pas le svgtopng alimenté par des fantômes. Ce sont des images générées par PHP! Et même pas ImageMagick, mais directement GD, la chose a été intégrée à PHP. Ces images ne sont donc créées dans aucune sorte de syntaxe qui se sentirait probablement à l'aise pour un développeur frontal. Vous feriez probablement mieux d'utiliser l'un des modèles, mais si vous voulez voir comment mon personnalisé a été codé (par Daniel), Lemme Know et je peux publier le code quelque part public.

Résultat assez cool, non?

Je comprends pourquoi il a dû être construit de cette façon: il utilise une technologie qui fonctionnera littéralement n'importe où WordPress peut fonctionner. C’est vraiment dans l’esprit WordPress. Mais cela me fait souhaiter que la création des modèles pourrait être fait d'une manière plus moderne. Comme ne serait-ce pas cool si le modèle de vos images de médias sociaux était comme Social-Image.php à la racine du thème comme un autre fichier de modèle? Et vous modèle et concevez cette page avec toutes les API WordPress normales? Comme un bloc ACF presque? Et il obtient une capture d'écran et utilisé? Je répondrai pour vous: oui, ce serait cool.