{{pointimage}}

Comportements
permet de placer des points clicables sur une image
syntaxe minimale : {{pointimage file="nomdelimage.jpg"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
tags permet de limiter à certains tags (séparés par une virgule)
nbclasses Niveau de grandur de tags dans le nuage / par défaut 6... ne pas toucher car pas trop stable ;-)
class Partie à compléter


L'action pointimage


Elle permet de placer des points "cliclables" sur une image.
Ces points peuvent
  • soit juste faire apparaître un texte
  • soit montrer du texte et un lien vers une page web (donc aussi du wiki)


La syntaxe de base et l'ajout de points


attention à ne pas avoir un nom de fichier trop long ou compliqué car ça créé une erreur... éviter par ex les _ ou - dans vos noms de fichiers
ça c'est la version "ouverte" qui vous permet de rajouter des points et de les "gérer" par après.
Ces ajouts se font directement via l'image en utilisant le bouton qui apparait en haut à gauche et en remplissant le popup qui s'ouvre (on peut taper du code wiki, du html ou du texte simple)


Télécharger le fichier mode_emploi_points_image.png

Définir l'aspect des points

1. La couleur
{{pointimage file="nomdelimage.jpg" color="#cb0070,#0094c4,#816b5e" label="Usages,Ecosystèmes,Patrimoine"}}

Deux paramètres permettent de placer des points de couleurs différentes :
color="#cb0070,#0094c4,#816b5e" --> on indique le noms des couleurs html
label="Usages,Ecosystèmes,Patrimoine" --> on précise le titre associé à chaque couleur

2. La taille
Le paramètre pointsize="20" précise le diamètre en pixels

3. Le Motif
On peut remplir le rond avec une image. Pour cela il faut :
- ajouter l'image dans le répertoire image du thème utilisé
- modifier le CSS du thème
- ajuster la taille du rond à l'image, sinon elle sera tronquée
Télécharger le fichier infosign.png
.img-marker {
background:url(../images/info-sign.png) no-repeat center center !important;
}


Gestion des points existants

La gestion des points déjà placés se fait via une interface accessible via le bouton qui apparait au survol de l'image en haut à droite.
Il vous emmène vers un page wiki que vous pouvez éditer (pour modifier les points, leurs titres, descriptions ou tout simplement pour les enlever)
Chaque point déposé sur la carte génère un code sur cette page d'administration avec la syntaxe suivante
~~""<!--416-331-green--><!--title-->ici c'est votre titre<!--/title-->""
""<!--desc-->""ici c'est le texte que vous avez placé pour décrire votre point""<!--/desc-->
""~~

Pour empêcher l'ajout de points sur votre image, il suffit d'utiliser cette syntaxe

{{pointimage file="dali.jpg" readonly="1"}}

  • => on a ajouté readonly="1"

Des exemples ?