[Astuce] Placeholder, un site pour générer des gabarits d'image

Hello hello

Ce n'est pas un tuto mais plutôt une ressource dont j'ai envie de te parler aujourd'hui.


Bien souvent, quand on réalise un codage (ou même une maquette graphique) on a besoin d'image avec des dimensions particulières. Je ne sais pas toi, mais, de mon côté, la flemme prend souvent le dessus et je me contente d'une div à qui je mets des dimensions et une couleur de fond pour faire comme si. Et si je te disais qu'il existe un site qui te permet, non seulement de créer des gabarits d'image aux dimensions voulues mais qui te permet aussi de choisir la couleur de fond, le texte et sa couleur ? Chouette hein :p


Le site est le suivant : https://placeholder.com/ et voilà comment l'utiliser (tu as une explication sur le site, mais je te remets les grandes lignes ici).


Une base commune : quelque soit la taille et le contenu de ton image, elle commencera par ça :

Code:

https://placehold.co

Des dimensions : ensuite, on va préciser les dimensions de l'image.
- Si c'est un carré, on ne va donner qu'une seule dimension

Code:

https://placehold.co/200

rendu:

- Si c'est un rectangle, on va indiquer la largeur, puis la hauteur

Code:

https://placehold.co/LxH

Exemple : https://placehold.co/500x150

rendu:

La couleur de fond et du texte : Le paramètre suivant qu'on peut fournir concerne la couleur de fond de notre image, à indiquer en hexadécimal et celui d'après correspond à la couleur du texte.
- Fond noir et texte gris clair :

Code:

https://placehold.co/500x150/000000/666666

rendu:

- Fond blanc et texte bleu :

Code:

https://placehold.co/500x150/ffffff/2d4b74

rendu:

- Fond orange et texte noir :

Code:

https://placehold.co/500x150/e26e26/000000

rendu:

Le format : Tu peux préciser quel format d'image tu veux récupérer (même si le format .svg qui est celui par défaut est top). Pour cela, il suffit d'indiquer à la fin SVG, PNG, JPG, JPEG ou WebP.
- SVG :

Code:

https://placehold.co/500x150/svg

rendu:

- PNG :

Code:

https://placehold.co/500x150/png

rendu:

- JPG :

Code:

https://placehold.co/500x150/jpg

rendu:

- JPEG :

Code:

https://placehold.co/500x150/jpeg

rendu:

- WebP :

Code:

https://placehold.co/500x150/webp

rendu:

Du texte : et pour finir, tu peux ajouter du texte en ajoutant ceci à la fin de ton url :

Code:

?text=ton+texte+est+ici

comme tu le vois, les espaces sont remplacés par des +

Par exemple :

Code:

https://placehold.co/500x150/e26e26/000000?text=Fond+orange+et+texte+noir

rendu:

Une fois ton code prêt, tu peux soit directement l'utiliser dans ton code HTML ou CSS, soit télécharger l'image


Tous les paramètres que j'ai indiqué ici ne sont pas obligatoire, tu peux n'en mettre que quelques uns ; en revanche, l'ordre est obligatoire lui (du coup, implicitement, si tu veux mettre une couleur de texte, tu es obligé d'indiquer une couleur de fond).

Il y a d'autres choses que tu peux personnalisation comme l'extension du fichier, mais, entre nous, je ne m'en suis jamais servie ^^

---

Si tu as des questions concernant cet outil, n'hésite pas à nous les poser à la suite de ce message (ou à jeter un oeil au site en lui-même ; les explications y sont vraiment bien faites).