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é : 2%
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

 

<<

Août

 

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
25262728293031
Aucun évènement à venir les 6 prochains mois

Météo

Geneva, GE, Switzerland

Conditions météo à 05h45
par weather.com®

Clair de lune et nuages épars

16°C


Clair de lune et nuages épars
  • Vent : 4 km/h - sud
  • Pression : 1009 mbar ↑
Prévisions >>

Prévisions du 2 août
par weather.com®

Orage épars

Max 25°C
Min 15°C


Orage épars
  • Vent : 16 km/h
  • Risque de precip. : %
<< Conditions  |  Prévisions >>

Prévisions du 3 août
par weather.com®

Orage épars

Max 24°C
Min 15°C


Orage épars
  • Vent : 8 km/h
  • Risque de precip. : 60%
<<  Prévisions  >>

Prévisions du 4 août
par weather.com®

Orage épars

Max 25°C
Min 14°C


Orage épars
  • Vent : 9 km/h
  • Risque de precip. : 50%
<<  Prévisions  >>

Prévisions du 5 août
par weather.com®

Orage

Max 22°C
Min 12°C


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

Prévisions du 6 août
par weather.com®

Soleil voilé

Max 23°C
Min 12°C


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

Prévisions du 7 août
par weather.com®

Soleil

Max 25°C
Min 14°C


Soleil
  • Vent : 11 km/h
  • Risque de precip. : 0%
<<  Prévisions  >>

Prévisions du 8 août
par weather.com®

Soleil

Max 27°C
Min 16°C


Soleil
  • Vent : 8 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 :