38 lines
2.7 KiB
Plaintext
38 lines
2.7 KiB
Plaintext
# Générer des images pour le partage sur les réseaux
|
|
|
|
* 2023-01-30 22:25:00
|
|
* Logiciel libre, Projets personnels
|
|
|
|
**Il existe une quantité importante d'outils pour éditer des images**. Ce sont soit des logiciels à installer ou soit des services en ligne. Mais parmi ces nombreux choix, je n'en ai trouvé aucun qui soit **à la fois libre et qui permettrait de s'abstraire de la mise en page**.
|
|
|
|
Dès lors que je décide de publier un article sur le blog, je vais partager son lien sur quelques sites dont des réseaux sociaux. Ces réseaux vont récupérer le contenu de la page de l'article et extraire un certain nombre d'informations dont **les données Open Graph**. Le protocole Open Graph permet aux réseaux sociaux de comprendre comment afficher l'aperçu d'une page web partagée par un utilisateur. Les principales données qui sont récupérées sont le titre de la page, sa description et l'image qui sera affichée pour le partage.
|
|
|
|
J'avais pour habitude d'ouvrir **Inkscape** pour éditer cette image. Cela fonctionne très bien mais ça demande un peu de temps et si je souhaites publier ailleurs que depuis ma machine, c'est tout de suite un casse-tête.
|
|
|
|
=> /uploads/content/638/inkscape.jpg Inkscape [IMG]
|
|
|
|
J'ai parcouru le web pour trouver un outil qui répondrait à mes envies et **j'ai finalement décidé d'en développer un** 🤪
|
|
|
|
Cet outil permet donc de créer une image de la dimension qu'on veut. Vous pourrez saisir un titre, une description et divers informations comme l'auteur et des logos. Il y a quelques options pour changer les couleurs, ajouter une image et un overlay de couleur avec une opacité. Tout le paramétrage est enregistré dans le navigateur.
|
|
|
|
=> /uploads/content/638/63d97b58.png OG:IMAGE [IMG]
|
|
|
|
Le projet est publié sous **licence GPLv3** et
|
|
=> https://gitnet.fr/deblan/og-image son code est disponible sur Gitnet
|
|
. J'ai décidé d'utiliser
|
|
=> https://vuejs.org/ VueJS3
|
|
pour gérer toute la partie interaction et
|
|
=> https://tailwindcss.com/ Tailwind CSS
|
|
pour la présentation.
|
|
|
|
Si vous avez envie d'essayer, vous pouvez utiliser
|
|
=> https://deblan.gitnet.page/og-image/ la version en ligne
|
|
. Elle est hébergée sur **Gitnet Pages**,
|
|
=> https://www.deblan.io/post/624/gitnet-heberge-vos-pages-statiques mon service d'hébergement de pages statiques
|
|
similaire à Github Pages.
|
|
Vous pouvez utiliser cet outil sans vous tracasser pour vos données car rien n'est stocké sur mon serveur. Toutes les données et les traitements sont réalisés dans votre navigateur, ce qui en fait un outil simple à auto-héberger.
|
|
|
|
La version actuelle est toute neuve et j'aspire à lui ajouter des fonctionnalités. N'hésitez pas à me faire des retours !
|
|
|
|
En attendant, bon partages 🚀
|