Impressum

Plugin image_ragged : « Image détourée dans le texte »

Galop d’essai avec SPIP 2.1.10 et le squelette SARKA-SPIP 3.0.4.
mardi 7 juin 2011
par  François Daniel Giezendanner
popularité : 1%
1 vote

Le Plugin image_ragged permet de réaliser l’habillage d’une image en fonction de la forme réelle de l’image : le texte suit le contour du motif non transparent.

Cela signifie que les images doivent être enregistrée en png ou en gif après avoir rendu transparent le pourtour du motif choisi.

 Description

Ce plugin offre un nouveau modèle pour insérer des image dans les textes SPIP. Au lieu d’afficher l’image dans une boite, comme <imgXXX|left> le fait, le modèle <img234|ragged> permet de faire « couler » le texte autour de l’image.

Le modèle ragged va « découper » selon la couleur de fond de l’image pour que le texte colle au plus près du contenu de l’image.


 Options Supplémentaires

  • <img234|ragged|left> pour spé­cifier l’alignement (droite ou gauche),
  • <img234|ragged|margin=100> pour spé­cifier la marge autour de l’image,
  • <img234|ragged|couleur=00ff00> pour spé­cifier la couleur de fond à découper. Si on n’en spé­cifie pas, on détoure selon la trans­pa­rence (format PNG).

 Compatibilité SPIP

  • SPIP 1.9.2
  • SPIP 2.0
  • SPIP 2.1

 Galop d’essai avec alignement « left » et « right »

Sur un site en DEV nous avons essayé ce plugin avec SPIP 2.1.10 et le squelette SARKA-SPIP 3.0.4.

L’essai est effectué avec un long article en lorem ipsum et 6 images dont le pourtour du motif central est transparent, ces images sont alignées soit à gauche (« left ») soit à droite (« right »), le résultat est excellent :

JPEG - 385.4 ko
ragged 1
JPEG - 414.1 ko
ragged 2
JPEG - 470.3 ko
ragged 3
JPEG - 507.8 ko
ragged 4
JPEG - 487.4 ko
ragged 5
JPEG - 528.9 ko
ragged 6

 Galop d’essai avec alignement « center »

Par contre l’alignement des images au centre (« center ») ne fonctionne pas correctement. L’exemple ci-dessous montre ce dysfonctionnement avec l’image « Red Hat » (oiseau avec chapeau et manteau rouge) que l’on fait passer de « right » à « center ».

  • 1ère copie d’écran : avec l’alignement « right » l’image « Red Hat » est affichée correctement en 3ème position ;
  • 2ème copie d’écran : avec l’alignement « center » l’image « Red Hat » passe en 2ème position (surprenant), elle se déforme en entourant partiellement la deuxième image et elle est sans texte d’entourage ;
  • 3ème copie d’écran : l’image « Red Hat » est affichée avec l’alignement « center » sans interférence avec une autre image. Au lieu d’être placée au centre entourée par le texte, elle est alignée à gauche déformée par étalement sur la marge gauche de la page et sans texte d’entourage.
GIF - 72.5 ko
ragged 9
GIF - 62.8 ko
ragged 7
GIF - 40.6 ko
ragged 8
Alignement « right », correct : l’image « Red Hat » est affichée correctement en 3ème position Alignement « center », erroné : l’image « Red Hat » passe en 2ème position (surprenant), elle se déforme en entourant partiellement la deuxième image et elle est sans texte d’entourage Alignement « center », erroné : l’image « Red Hat » est affichée avec center sans interférence avec une autre image. Au lieu d’être placée au centre entourée par le texte, elle est alignée à gauche déformée par étalement sur la marge gauche de la page et sans texte d’entourage

Sources


Commentaires

Publications

Derniers articles publiés

Agenda

<<

2014

 

<<

Juillet

 

Aujourd'hui

LuMaMeJeVeSaDi
30123456
78910111213
14151617181920
21222324252627
28293031123
Aucun évènement à venir les 6 prochains mois

Météo

Geneva, GE, Switzerland

Conditions météo à 16h25
par weather.com®

Nuageux

21°C


Nuageux
  • Vent : 4 km/h - nord-ouest
  • Pression : 1011 mbar tendance symbole falling rapidly
Prévisions >>

Prévisions du 24 juillet
par weather.com®

Inconnu

Max 22°C
Min 14°C


Inconnu
  • Vent : N/D km/h
  • Risque de precip. : %
<< Conditions  |  Prévisions >>

Prévisions du 25 juillet
par weather.com®

Soleil voilé

Max 26°C
Min 15°C


Soleil voilé
  • Vent : 6 km/h
  • Risque de precip. : 10%
<<  Prévisions  >>

Prévisions du 26 juillet
par weather.com®

Averses

Max 23°C
Min 13°C


Averses
  • Vent : 9 km/h
  • Risque de precip. : 70%
<<  Prévisions  >>

Prévisions du 27 juillet
par weather.com®

Soleil et nuages épars

Max 24°C
Min 15°C


Soleil et nuages épars
  • Vent : 8 km/h
  • Risque de precip. : 0%
<<  Prévisions  >>

Prévisions du 28 juillet
par weather.com®

Averses

Max 22°C
Min 12°C


Averses
  • Vent : 9 km/h
  • Risque de precip. : 80%
<<  Prévisions  >>

Prévisions du 29 juillet
par weather.com®

Averses

Max 20°C
Min 12°C


Averses
  • Vent : 9 km/h
  • Risque de precip. : 40%
<<  Prévisions  >>

Prévisions du 30 juillet
par weather.com®

Soleil et nuages épars

Max 22°C
Min 13°C


Soleil et nuages épars
  • Vent : 11 km/h
  • Risque de precip. : 10%
<< Prévisions


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


9 sites référencés dans ce secteur

Brèves

Mise à jour de sécurité SPIP 2.1.10 du 7 avril 2011

mardi 19 avril 2011

...et oui encore une nouvelle version de SPIP (SPIP 2.1.10) disponible suite à la découverte d’une faille par Arnault.

Cette faille concerne les branches 2.0 et 2.1 et peut permettre à un rédacteur de déconnecter le site de sa base de données.

PIWIK succède à PhpMyVisites pour SPIP 2

jeudi 8 janvier 2009

L’analyseur de trafic web PhpMyVisite en plugin pour SPIP 1.9x a maintenant un magnifique successeur très performant pour SPIP 2, il s’agit du plugin PIWIK :