Une vCard à votre image avec SPIP

1er octobre 2010,
par Romy Têtue

Mots-clefs associés à cet article :

Affichez une jolie carte de visite à votre image. Ce sera du plus bel effet pour télécharger la vCard de votre page contact !

SPIP permet de fabriquer des images dynamiques grâce à un éventail de filtres graphiques très complet, ce qui me donne des idées rigolotes, comme d’afficher une image de carte de visite qui se mette automatiquement à jour lorsque je change d’avatar. Ça se fait assez simplement en incrustant le logo de l’auteur dans une image statique de carte de visite.

Vous savez déjà afficher le visuel, une image de vCard de préférence en PNG, comme celle-ci qui est disponible sous licence libre GNU :

<img src="#CHEMIN{img/vcard.png}" alt="vCard" width="128" height="128" />

Occupons-nous plutôt de votre trombine. Je suppose que vous êtes l’auteur 1 et que votre tronche est bien associée au profil, de préférence en PNG (évitons le gif) :

<BOUCLE_auteur(AUTEURS){id_auteur=1}>
#LOGO_AUTEUR
</BOUCLE_auteur>

Bien. Mais pour pouvoir l’incruster dans la carte de visite, il faut mettre le logo au format. Pour cela il faut aller mesurer, sur le visuel cible, la zone qu’il faudra recouvrir par notre trombine. Cette zone n’est pas tout à fait carrée : 44 par 40 pixels, le logo d’auteur non plus, ce qui ne simplifie pas notre affaire mais se règle aisément en utilisant d’abord le filtre « passe partout » qui réduit le côté le plus grand du logo pour le faire rentrer dans cette surface :

[(#LOGO_AUTEUR
        |image_passe_partout{44,40}
        |image_recadre{44,40}
)]

Très bien ! Maintenant, pour aplatir deux images l’une sur l’autre, il faut qu’elles soient de mêmes dimensions, ici 128 par 128 pixels. Seconde difficulté : il faut caler la trombine à un endroit précis, éloigné des bords... Un tel recadrage se fait en deux fois, en convertissant si nécessaire au format PNG pour préserver la transparence :

[(#LOGO_AUTEUR
        |image_passe_partout{44,40}
        |image_recadre{44,40}
        |image_aplatir{png}
        |image_recadre{114,90,'left top',transparent}
        |image_recadre{128,128,'right bottom',transparent}
)]

Maintenant que la trombinette est prête, stockons-là dans une variable avec #SET{trombine,...}, pour la manipuler plus facilement ensuite, avec #GET{trombine}, et l’incruster facilement dans le visuel cible grâce au filtre |image_masque dont le mode d’incrustation est réglé à normal, de cette façon :

[(#CHEMIN{img/vcard.png}
        |image_masque{[(#GET{trombine}
                |extraire_attribut{src}
        )],mode=normal}
)]

Voici le code final, complet, sans oublier le lien permettant de télécharger la vCard :

<BOUCLE_auteur(AUTEURS){id_auteur=1}>
[(#SET{trombine,
[(#LOGO_AUTEUR
        |image_passe_partout{44,40}
        |image_recadre{44,40}
        |image_aplatir{png}
        |image_recadre{114,90,'left top',transparent}
        |image_recadre{128,128,'right bottom',transparent}
)]
})]
</BOUCLE_auteur>

[<a href="#CHEMIN{vcard.vcf}" title="T&eacute;l&eacute;chargez ma carte de visite &eacute;lectronique">(#CHEMIN{img/vcard.png}
        |image_masque{[(#GET{trombine}
                |extraire_attribut{src}
        )],mode=normal}
)</a>]

Ce sera du plus bel effet sur votre page contact ! Mais il est bien évidemment possible, et tentant, d’étendre cette boucle à tous les auteurs du site, de façon à générer un joli carnet de cartes de visite dynamiques. Pour vous éviter la saisie fastidieuse des trombines de chaque auteur dans SPIP, installez le plugin Gravatar ou hAvatar qui ira récolter les avatars disponibles par ailleurs. Et lorsque l’un de vos auteurs changera d’avatar, l’image de cette carte de visite sera automatiquement modifiée en conséquence.

Vos commentaires

1. Le 1er octobre 2010 à 23:02, par MatiasGrenn En réponse à : Une vCard à votre image avec SPIP

Bonjour,

Très bon tuto et je ne connaissais pas image_passe_partout, comme quoi on apprend tous les jours !

MG
2. Le 2 octobre 2010 à 09:48, par Romy Têtue En réponse à : Une vCard à votre image avec SPIP

Ce filtre n’est effectivement pas documenté, mais depuis longtemps dans SPIP et tellement utile !
3. Le 3 octobre 2010 à 02:51, par Romy Têtue En réponse à : Une vCard à votre image avec SPIP

Oups, j’ai parlé trop vite car ce filtre a été documenté sur doc.spip.org depuis ma dernière recherche :

Alors que image_reduire produit la plus petite image tenant dans un rectangle, image_passe_partout produit la plus grande image qui remplit ce rectangle.

Suivi d’un image_recadre avec les mêmes dimensions, il permet de produire des vignettes de dimensions imposées, sans déformation.
4. Le 17 octobre 2010 à 14:59, par Rastapopoulos En réponse à : Une vCard à votre image avec SPIP

Il me semble que image_masque permet de positionner directement la seconde image par-dessus la première, ce qui évite toute l’étape (deux filtres) de cadrage dans le bloc 128x128. On peut y mettre « left=xx, top=yy ».

5. Le 20 octobre 2010 à 15:11, par reno En réponse à : Une vCard à votre image avec SPIP

Dans la même idée : en m’inspirant de votre code, je voulais afficher le logo de l’article (un portrait) avec la premiere image de l’article afin de pouvoir réaliser un diaporama 1portrait-1image, voici le code qui fusionne ces deux images en une :

<BOUCLE_auteur(ARTICLES){id_rubrique=12}>

[(#SET{trombine,
[(#LOGO_ARTICLE
        |image_passe_partout{300,300}
        |image_recadre{300,300}
        |image_aplatir{png}
        |image_recadre{888,300,'left top', '7D7D7D'}
)]
})]
<BOUCLE_images1(DOCUMENTS){id_article}{0,1}>

[(#FICHIER
        |image_passe_partout{0,300}
        |image_aplatir{png}
        |image_recadre{588,300,'right center'}
        |image_recadre{888,300,'right center', '7D7D7D'}
        |image_masque{[(#GET{trombine}
        |extraire_attribut{src})]}
        )]
        </BOUCLE_images1></BOUCLE_auteur>

6. Le 5 décembre 2018 à 17:36, par Hervé Le Dantec En réponse à : Une vCard à votre image avec SPIP

Bonjour,

Votre article s’attache à la personnalisation des icônes de vCard et est très intéressant sur ce point.

Je cherche à savoir s’il est possible de générer le contenu des vCard à partir des champs extra d’un article (prénom, nom, e-mail, LinkedIn, etc.).

Avez-vous une idée de si c’est réalisable en SPIP 3.2 ?

Merci d’avance,

Cordialement,

Hervé