ImageCompliant
Introduction
J'ai réalisé cette action car il manquait (à mon goût) un système valable d'intégration d'images dans les pages WikiNi. Les contributions comme InclureUneImage, ActionAttach... sont vraiment bien, mais présentent quelques faiblesses (c'est toujours subjectif). Des effets dérangeants comme l'impossibilité d'aligner correctement l'image, où le petit symbole à côté des images (pour ActionAttach), la non-validation XHTML... etc
J'ai choisis l'utilisation d'une action pour plusieurs raisons :
- Facilité d'utilisation
- Facilité d'installation
- Facilement modifiable
Nouvelles
- 2005-03-23 : Sortie de la v. 0.0.1.
- Premier jet, avec les fonctionnalités de base (alignement, bordure, lien, invisibilité, validité XHTML 1.0, description...)
Utilisation
La balise de l'ActionImageCompliant? est : {{img}} avec ces paramètres (tous optionnels à part 'src`) :
- src : Adresse de l'image. (HTTP ou local)
- desc : Description de l'image. Cette description sera contenue dans les paramètres 'alt` et 'title` de la balise HTML <img>.
- align : Permet de choisir l'alignement de l'image. Ce paramêtre prend pour options :
- left pour un alignement à gauche.
- center pour un alignement au centre de la page.
- right pour un alignement à droite.
- link : Lien sur l'image vers une page locale ou externe.
- target : Cible du lien sur l'image. La valeur par défaut est '_top`. Ce paramêtre prend pour options :
- _top : Fenêtre courante du navigateur. Valeur par défaut.
- _blank : Ouverture dans une nouvelle fenêtre du navigateur.
- hidden : Si ce paramêtre est spécifié et n'est pas égal à '0` alors, l'image sera masquée (utile pour une image de script de stats par exemple).
- border : Si ce paramêtre est spécifié et n'est pas égal à '0` alors, l'image (si un lien est placé dessus) sera entourée d'une bordure.
Exemples
Voici des exemples d'utilisations :
- Affichage d'une image externe :
- {{img src="http://image.m3nu.info/button.png"}}
- génère :
- <div style="display: inline"><img class="image" style="border: 0" src="http://image.m3nu.info/button.png" alt="" title="" /></div>
- Affichage d'une image locale :
- {{img src="button.png"}}
- génère :
- <div style="display: inline"><img class="image" style="border: 0" src="button.png" alt="" title="" /></div>
- Affichage d'une image avec une description :
- {{img src="http://image.m3nu.info/button.png" desc="Mickaël Menu"}}
- génère :
- <div style="display: inline"><img class="image" style="border: 0" src="http://image.m3nu.info/button.png" alt="Mickaël Menu" title="Mickaël Menu" /></div>
![http://image.m3nu.info/button.png"](http://image.m3nu.info/button.png"){kind=link}
- Affichage d'une image avec un lien (qui s'ouvre dans la même fenêtre) :
- {{img src="http://image.m3nu.info/button.png" link="http://m3nu.info"}}
- génère :
- <div style="display: inline"><a href="http://m3nu.info" ><img class="image" style="border: 0" src="http://image.m3nu.info/button.png" alt="" title="" /></a></div>
- Affichage d'une image avec un lien (qui s'ouvre dans une nouvelle fenêtre) :
- {{img src="http://image.m3nu.info/button.png" link="http://m3nu.info" target="_blank"}}
- génère :
- <div style="display: inline"><a href="http://m3nu.info" target="_blank"><img class="image" style="border: 0" src=""http://image.m3nu.info/button.png" alt="" title="" /></a></div>
- Affichage d'une image avec un lien et une bordure :
- {{img src="http://image.m3nu.info/button.png" link="http://m3nu.info" border="1"}}
- génère :
- <div style="display: inline"><a href="http://m3nu.info" ><img class="image" src="http://image.m3nu.info/button.png" alt="" title="" /></a></div>
- Affichage d'une image masquée (regardez dans le code de la page) :
- {{img src="http://image.m3nu.info/button.png" hidden="1"}}
- génère :
- <div style="display: none"><img class="image" style="border: 0" src="http://image.m3nu.info/button.png" alt="" title="" /></div>
- Affichage d'une image centrée dans la page :
- {{img src="http://image.m3nu.info/button.png" align="center"}}
- génère :
- <div align="center"><img class="image" style="border: 0" src="http://image.m3nu.info/button.png" alt="" title="" /></div>
- Affichage d'une image alignée à droite :
- {{img src="http://image.m3nu.info/button.png" align="right"}}
- génère :
- <div align="right"><img class="image" style="border: 0" src="http://image.m3nu.info/button.png" alt="" title="" /></div>
Installation
L'installation est très simple puisqu'aucun fichier de WikiNi ne doit être modifié.
- 1. Créez le fichier 'actions/img.php` (dans le répertoire d'installation de votre wiki).
- 2. Copiez le contenu qui suit à l'intérieur de ce fichier.
<?php
/**
* ImageCompliant pour WikiNi - GNU General Public License
*
* @author Mickaël Menu <mickael.menu@gmail.com>
* @copyright Copyright (c) 2005 Mickal Menu
* @category actions
* @version 0.0.1
* @since 2005-03-21
* @license http://www.gnu.org/licenses/gpl.html GNU General Public License
* @link http://www.wikini.net/
*/
if (!defined("WIKINI_VERSION"))
{
exit();
}
// Récupération des paramètres.
$img_src = $this->GetParameter("src");
$img_desc = $this->GetParameter("desc");
$img_align = $this->GetParameter("align");
$img_link = $this->GetParameter("link");
$img_target = $this->GetParameter("target");
$img_hidden = $this->GetParameter("hidden");
$img_border = $this->GetParameter("border");
// Vérification du paramêtre 'src`.
if (empty($img_src))
{
exit();
}
// Gestion du paramêtre 'hidden`.
if ($img_hidden)
{
$img_div_style = "display: none";
}
else
{
$img_div_style = "display: inline";
}
// Gestion du paramêtre 'border`.
if (!$img_border)
{
$img_style = "border: 0";
}
// Gestion du paramêtre 'align` et création de la "div" contenant l'image.
if (!empty($img_align) && ($img_align == 'left' || $img_align == 'center' || $img_align == 'right'))
{
echo $this->Format('""<div align="'.$img_align.'">""');
}
else
{
echo $this->Format('""<div style="'.$img_div_style.'">""');
}
// Gestion des paramètres 'link` et 'target`.
if (!empty($img_link))
{
echo $this->Format('""<a href="'.$img_link.'"""');
if (!empty($img_target) && ($img_target == '_blank' || $img_target == '_top')) {
echo $this->Format('"" target="'.$img_target.'"""');
}
echo $this->Format('"">""');
}
// Affichage de l'image.
echo '<img class="image"';
if (!$img_border)
{
echo ' style="'.$img_style.'"';
}
echo ' src="'.$img_src.'" alt="'.$img_desc.'" title="'.$img_desc.'" />';
if (!empty($img_link))
{
echo $this->Format('""</a>""');
}
echo $this->Format('""</div>""');
?>
- 3. C'est terminé. :)
Bogues
Apparemment cela ne valide pas CSS. Probablement à cause des paramètres 'style`. Je réglerais le problème dans une future révision.
-- MickaelMenu (le 28-03-2005)
Apparement cela ne gere le redimentionnement dynamique de l'image, en deux coups de cuillères a pot et c'est torché! ( je viens de le faire c'est pour ca...)
- Dites je le met ou le nouveau code ?
Suggestions
Je suis ouvert à toute suggestion d'amélioration de cette action, et n'hésitez pas à publier sur cette page vos modifications. Je vous demanderais juste de respecter la charte du site lors de vos réponses. A savoir : organisez proprement votre texte et signez-le.
Pour me contacter directement : MickaelMenu
C'est une solution très proche du HTML ; je ne suis pas sûr qu'elle soit assez proche de la volontaire simplicité d'un wiki. Elle a cependant le mérite d'être très complète et fidèle au HTML pour ceux qui connaissent. Quelques remarques :
- pourrais-tu renommer la page DiscussionsActionImageCompliant ou bien ContributionActionImageCompliant? pour éviter de laisser entendre aux néophyte qu'elle fait partie de WikiNi
- pourrais-tu documenter comme je l'ai fait pour le premier cas, le code HTML généré ? (éventuellement ailleurs sur la page)
- je trouve que générer alt="Description (pour validité XHTML)" lorsqu'il n'y a pas de description, n'est pas une bonne idée (en tous cas ce n'est pas très parlant pour ceux qui en ont besoin)
- je ne vois pas l'intérêt de l'image masquée
- est-ce que tous les exemples générés sont compatible XHTML 1.0 Strict (objectif de WikiNi est terme) ?
-- CharlesNepote
- Je ne suis pas encore très familiarisé avec les wikis, donc si vous avez des idées pour ma syntaxe : n'hésitez pas. J'ai choisis 'img` car cela me paraissait plus court et simple que 'image`.
- J'ai créé (et supprimé l'ancienne page) la page DiscussionsActionImageCompliant, et mis une redirection sur la page ImageCompliant, car c'est plus facile à utiliser dans une phrase ;).
- J'ai documenté le code HTML.
- Il n'y a pas de génération de alt="Description (pour validité XHTML)" mais juste une balise 'alt` vide :). Ici (WikiNi.net) il n'y a pas l'action 'img` d'installée, alors pour pouvoir afficher directement le résultat entre double-guillemets, j'ai dû ajouter quelques éléments. Le formatter (logiquement) supprimait la balise 'alt` vide à cause des ". Je me suis assuré de garder la validité de cette page ;). Vous pouvez toujours voir (temporairement) les effets et le vrai code généré ici : http://m3nu.info/PageDeTest/ (ou alors plus haut, dans la documentation HTML).
- Les images masquées ne servent pas vraiment à grand chose, si cela se confirme, je supprimerais cette fioriture superflue :) (je l'ai ajouté pour le fun à vrai dire).
- Non, les exemples ne sont pas encore compatibles XHTML 1.0 Strict, pour cela, il faudrait que je sépare les informations de style. Ceci est prévu pour une prochaine version (utilisation du fichier wakka.css). Néanmoins, les exemples sont pour l'instant conformes (compliants :)) XHTML 1.0 transitional (donc avec WikiNi 0.4.3 et -).
- -- MickaelMenu