Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.
La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.
Chaque truc est suivi d’un forum auquel nous vous invitons à participer.
N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.
Merci pour cet article, très intéressant ...
une chose me questionne concernant la dernière image ... il n’est pas possible de faire le reflet avec du GD2 ? quand même pas hin :-)
c’est fait avec ’toshop ça non ?
Non non, le reflet est bien réalisé avec les filtres de SPIP. Cétotomatik, donc (bon, pas là, vu que c’est une copie d’écran, mais la copie d’écran est bien celle d’une fenêtre de mon site de test).
Je vais laisser un peu de suspens, mais je finirai par publier le truc...
héhé, sacré Arno*
Je sentais bien que tu ne disais pas tout, laisant flotter une douce brume de suspence.
Mais tu as raison, attends un peut que tout le monde regardes ses RSS, ou que l’info passe sur les listes de discution ;-)
PS : je remarque que la puce(.gif) à été changée ...
<- ici on la voit pas
Encore moi,
je teste tout ça, l’occasion de commencer à regarder SPIP 1.9 également, et j’ai un truc qui ne marche pas comme je le voudrais (/pensais) :
mon titre de site est "g u a p h . n e t", avec un "g" et un "p" qui en minuscule on une partie du caractère qui descend en dessous de la ligne basse (je crois que l’on dis ça)
or, je me suis dis ... eh bien c’est simple suffit de passer le titre en |majuscules et le "problème" est résolu ... seulement voiolà apparement ça passe pas en |majuscules ; extrait de ma balise :
[(#NOM_SITE_SPIP|majuscules|image_typo{taille=48,couleur=808080})]
une idée ?
arf, autant pour moi
j’avais pas vu que maintenant |majuscules le faisait en CSS :
style='text-transform: uppercase'
Oui, c’est un peu embêtant, je ne sais pas si on ne va pas changer ça dans la version finale.
En attendant, tu peux faire le filtre « majuscules » toi-même pour qu’il fonctionne en UFT-8. Il suffit d’utiliser mb_strtoupper :
Ces commandes « multi-byte » sont justement destinées à UFT-8.
re moi, allez c’est la dernière ;-)
merci pour l’info "|mb_strtoupper" ça fonctionne
j’ai trouvé pour faire un reflet ;-)
j’ai juste mis du temps à comprendre que l’image de la texture devait au moins être aussi grande que l’image devant être générée
naïvement, je pensais qu’il la répétait en mosaïc quoi
Bravo !
Pour obtenir quelque chose d’encore plus neutre au niveau du reflet : fabrique ton fichier « degrade.png » non pas dans une couleur proche du fond, mais en gris 50%, et seule la transparence sera affectée.
Et, pour limiter l’intensité du reflet (je suppose que c’est l’intention de ton utilisation d’une couleur proche du fond), commence ton dégradé de transparence déjà semi-transparent (genre 50% d’opacité en haut de l’image, et non 100% comme ça semble le cas actuellement ; et tu dégrades jusqu’à 0% comme actuellement un peu plus bas).
De cette façon, ton reflet est « neutre ». Si tu changes la couleur de fond dans ta feuille de style, l’image reflet est toujours utilisable sans modification, c’est-à-dire sans que le reflet semble verdâtre par rapport au fond. Essaie par exemple de changer ta couleur de fond en noir, puis en rouge vif, tu verras que ton reflet actuel ne sera pas beau.
Sinon, je n’ai pas testé, mais à priori la typo en « image de fond » (background:url...) ne sera pas affichée correctement dans MSIE, puisque le truc pour afficher le PNG24 dans MSIE ne peut s’appliquer à un tag img.
merci pour ces infos, effectivement c’est plus propre et sera plus simple pour faire des modifs de couleur ou autres plus tard ...
oui pour l’image de fond, j’ai simplement appliqué le même style que pour les images PNG en plus du style (background :url...) ... mais je pensais bien que ce ne serait pas si simple :-p
y pas un moyen tout même ? quitte à refaire le fichier : spip.php?page=win_png et en faire un spéciale pour les fonds spip.php?page=win_png_fond
allez Arno* la prochaine SPIP 1.9 sort bientôt, faut absoluement trouver un truc là ...
pour avoir une image (PNG 24 avec couche alpha) en fond de bloc, j’ai trouvé une solution :
http://blog.guaph.net/rubrique1.html
c’est toujours un fichier « *.htc » mis en « behavior » :
http://www.twinhelix.com/css/iepngf...
seul inconvenient ... l’image n’est pas répétée (mosaïque) dans le fond du bloc :-/ enfin je n’est pas encore regardé de près ... le « *.htc » doit pouvoir être amélioré
Bonjour, bravo et merci pour tout ça !
En local, j’ai réussi à avoir un reflet, mais seulement sur des lettrages, comme sylvain (et grâce à lui, d’ailleurs, merci sylvain !). Pour avoir le reflet d’une photo, faut-il le faire en trois "passes" : une pour l’originale, une avec le flip-horizontal de l’mage et une avec le dégradé, ou ai-je raté un prodigieux filtre "image-degrade" ?
Cordialement.
eric
Je réalise que j’ai bien mal exprimé ma question, désolé... En fait, j’ai fait mon titre avec image-typo et image-masque. Jusque-là, tout va bien. Après, j’ai voulu un reflet de ce titre : encore OK. Le problème, c’est quand j’ai voulu lui appliquer un dégradé : j’ai de nombreuses choses à apprendre encore (tant mieux). Ai-je raté quelque chose ? J’avoue ne pas comprendre... En attendant, je me suis servi d’image_alpha, pour l’atténuer, c’est pas si mal. Merci d’avance de votre réponse.
Cordialement.
eric
La clé n°1 : le filtre « extraire_attribut »...
La clé n°2 : l’article « Des titres en relief » pour se servir de la clé n°1...
Tout est dans le site, désolé d’avoir posté pour rien. Encore merci pour tout ce travail réalisé sur les filtres de traitement d’images.
Cordialement.
eric
pour mb_strtoupper ca fonctionne bien pour les majuscules, mais mes caractères accentués passent à l’as...
je ne comprends pas trop pourquoi et ca m’attriste :)
si quelqu’un a une idée, merci :)
Et quand l’image_typographique est aussi un lien, il faut en plus genérer son état rollover, mais comment ?
Je pensais avoir trouvé la solution pour générer le reflet, mais ça ne fonctionne pas correctement...
En ce qui me concerne, je cherche à créer un reflet sur différentes images, de taille différentes, et j’aimerais que ce reflet ait systématiquement une hauteur de 36 pixels.
Le reflet généré via Spip fait effectivement 36 pixels, mais le reste de l’image reste visible avec un alpha de 90 (voir lien hypertexte ci-dessous).
Au final, je voudrais que l’image générée ait la taille du reflet, donc 36 pixels. Je pensais pouvoir recadrer en utilisant un autre masque, mais ça ne fonctionne pas. Quelqu’un aurait-il une idée ?
Merci d’avance.
Je trouve ici la réponse à ma recherche sur les majuscules, j’en profite pour poser une question sur l’approche de la typo en GD2 : est-ce qu’il est prévu de la modifier : rêvons à |approche=-10...
pourras t’on connaitre l’astuce du reflet ? cela m’intéresse beaucoup !!!!
Salut Arnaud :)
je cherche a avoir un effet de rotation sur les titre de rubrique, voir ici : (le titre en question est "News" dans la partie centrale de la page". J’ai chercher sur tout "Beyrout", mais rien vu sur le sujet, aurais tu une solution. Merci beaucoup...
bon ben j’ai rien dit :) ca marche, j’ai rajouter "|image_rotation90" a image_typo, c’est con :) desole pour le derangement :)
++
@ Karim,
Qu’est-ce que tu veux faire exactement ? Parce que là, ton « News » a bien tourné...
Dommage, le lien que donne sylvain n’existe plus pour faire un titre avec reflet
Si vous connaissez l’astuce, merci d’avance !
Bonsoir, plus aucun trace de l’astuce des Reflets sur le web. Cela pourrait être très intéressant de publier un petit explicatif, ici ou sur spip-contrib par exemple.
D’accord avec Damien.
salut je voudrais superposer 2 images : une image en fond avec un alpha et un titre par dessus en image typographique, qqun a une idée ?
MErci newbie
Bonjour !
Toutes mes félicitations, merci beaucoup pour toutes ces explications (dont j’use et j’abuse avec grand plaisir)
Ma question porte sur l’esperluette "&" je n’ai pas trouvé le moyen de la faire afficher correctement avec les images typo de spip... Serait-ce la faute de ma police ? Suis-je une bille à ce point ?? Toujours est-il qu’à l’arrivée je n’arrive qu’à faire ressortir le code "& amp ; Vous conviendrez qu’au niveau de l’esthétique on peut faire mieux ! Je croise les doigts pour qu’il existe une solution à mon problème (il n’y a pas de problème, il n’y a que des solutions).
Merci encore pour la diffusion de vos idées de génie sur les filtres spip.
Cordialement
Marie.
En réponse au message précédent, j’ai eu le même problème. Dans mes_fonctions.php, j’ai rajouté :
function ampersand($strString, $blnEncode=true){ return preg_replace('/&(amp;)?/i', ($blnEncode ? '&' : '&'), $strString);}Puis dans mon squelette, j’applique à titre les 2 filtres suivants : |mb_strtoupper|ampersand| dans cet ordre
bravo, merci pour l’esperluette je cherchais une solution depuis quelque temps et ça marche nikel.