• Accueil
  • programmation
  • Placeholder pour textes et images : créez des textes et images vides pour votre design !

Placeholder pour textes et images : créez des textes et images vides pour votre design !


Pendant la réalisation d’un site web, il est utile de mettre du contenu afin de mettre en place le design de ce dernier. Ce contenu n’a pas forcément besoin d’être compréhensible. Il peut s’agir :

  • d’un texte afin de montrer la police, des news, etc ;
  • d’images à placer dans le design.

 

Le problème de ce système est que le texte créé ainsi que les images seront supprimés une fois le graphiste ou le client passé par là. Prendre du temps pour créer du texte réaliste ainsi que de jolies images est donc une perte de temps et peut être rapidement coûteux pour une entreprise ! Mais des solutions existent… On appelle ça un placeholder.

 

Placeholder pour texte : lorem ipsum

Dans un premier temps il est utile de remplir un site web par des textes même si ceux-ci n’ont ni queue ni tête. Pour ce faire, il existe ce qui est appelé le lorem ipsum. Ce dernier permet d’aider à la mise en page et ressemble à du latin. De nombreux sites existent pour en générer  dont le très bon lipsum.com. Au milieu du site vous pourrez configurer la quantité de texte voulue :

Création de texte lorem ipsum

L’utilisation est simple et intuitive, vous choisissez la quantité de texte voulue et le type de texte : des paragraphes, mots, caractères ou listes. Une fois le texte généré vous pourrez l’intégrer à vitre site.

 

Placeholder pour images : fakeimg

Pour ce qui est des images, l’affaire peut sembler plus compliquée. Bien évidemment il est possible d’ouvrir un logiciel comme Paint et de générer une image, grise par exemple, aux dimensions que l’on veut. Cependant, qu’arrive-t-il si l’on décide de changer l’image d’un pixel seulement ? Puis finalement en ajouter 10 de plus ? Il faudrait encore ouvrir le logiciel pour changer l’image et perdre un temps fou ?

Des développeurs ont eu l’idée de créer un site contenant une API afin de créer des images le plus simplement du monde. Ce site s’appelle fakeimg.pl. Nous allons apprendre à nous en servir. Pour créer une image de 200×200 pixels, il suffit de se rendre à l’adresse suivante : http://fakeimg.pl/200×200/. Résultat :

Placeholder sous forme d'image

Pour obtenir une image aux dimensions différentes il suffit de remplacer le premier nombre « 200 » par la largeur voulue et le second par la hauteur voulue. Simple non ? Eh bien il est possible d’aller plus loin ! Pour l’instant, la couleur est grise mais il est possible de créer une image jaune par exemple : http://fakeimg.pl/400×200/fff000/. Résultat :

Placeholder custom : jaune et taille personnalisée

 

 

Vous l’aurez compris, il suffit de changer la valeur « fff000 » par la valeur hexadécimale de la couleur que vous souhaitez. Maintenant nous pouvons préciser la couleur du texte avec un autre paramètre : http://fakeimg.pl/400×200/fff000/000/. Résultat :

Placeholder custom : jaune et couleur de texte personnalisée

 

Là aussi, il suffit de remplacer le code « ooo » par la couleur du texte. Enfin, le texte peut a tout moment changer afin d’éviter que ce soient les proportions de l’image qui soient affichées. Il est aussi possible de changer la police du texte. Testons cela avec l’URL http://fakeimg.pl/350×200/ff0000/000/?text=Hello%20World&font=lobster :

Placeholder custom : rouge et texte personnalisé

 

Vous pouvez désormais utiliser ce site pour générer tout type d’images n’ayant pas besoin d’être graphiques. Pour les intéger sur votre site il y a 2 solutions : soit vous enregistrez l’image sur votre ordinateur, soit vous mettez le lien du site directement dans la balise « img » de la façon suivante :

<img alt="" src="http://fakeimg.pl/350x200/?text=World&font=lobster" />

Vous avez maintenant toutes les cartes en main pour mettre du contenu sur vos sites et vous concentrer sur les fonctionnalités et le design !

akiavara

Other posts by

Laisser un commentaire

Menu