Sunfox

Le journal de Sunny Ripert


Ajoutez la couleur dominante derrière vos images

Si vous pouvez extraire la couleur dominante d’une photo, une petite touche sympa à ajouter sur votre site est de se servir de celle-ci tant que votre image n’est pas chargée.

Voici un exemple sur cults3d.com :

Chargement d'une page sur Cults 3D

HTML

En HTML, le plus simple est d’appliquer la couleur dominante sur son style inline. C’est cette couleur qui apparaîtra durant le chargement

<img style="background: #f3de56" src="…" width="120" height="120" />

Avec Rails

Si vous utilisez la librairie CarrierWave dans votre application Rails, vous pouvez extraire facilement la couleur dominante à chaque upload grâce à ma gemme ruby carrierwave-color.

Avec WordPress

Si vous utilisez WordPress, ajoutez l’extension dominant-color et ça sauvegardera la couleur dominante à chaque upload de medias. Vous pourrez même éditer la couleur choisie, directement dans l’administration.

Articles probablement reliés

3 Commentaires

  1. 1 Ook? Ook! :

    Peut aussi être intéressant pour habiller d’un shadow une image et ainsi la mettre en valeur

  2. 2 Powerball :

    Merci pour l’article: Je utilise la version 3.9 et wordpress ne sais pas quelle est la raison que le code ne fonctionne pas je peux le faire à cause d’une configuration de PHP? Je utilise cPanel sur Host

    Merci beaucoup.

  3. 3 Sunny :

    Powerball : merci de créer un ticket sur https://github.com/theamnesic/dominant-color/issues en explicant l’erreur qui remonte, on va trouver une solution.

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.