Comment inclure une image avec Wikini ?
Exemple de phpWiki
Dans phpWiki, suffit de faire un lien vers un .png ou .gif ou .jpg, c'est aussi con que ça. A chaque lien effectué sur un fichier image, zou, l'image est incluse.
Ce qui est emmerdant, c'est lorsque l'on veut effectivement faire un lien sur une image (pointer vers l'image, et pas inclure l'image dans la page). Je crois qu'il faut alors dans ce cas forcer un lien vers l'image : utiliser des crochets, et là ça fait un lien.
[L'inconvénient de cette méthode (à tester sur PhpWiki) c'est qu'une image sans extention (par exemple ) n'est pas affichée. -- CharlesNepote]
wiki2xhtml
Utilise le meme principe : un lien vers un .png ou .gif ou .jpg
[Même inconvénient que précédemment -- CharlesNepote]
Wikini ???
La version du CVS permet l'inclusion d'image (directement dans la page) ou le lien sur une image :
Pour inclure une image ayant pour texte alternatif 'un exemple':
[[http://un.example.com/image.gif un exemple]] (le lien doit pointer sur une image d'extension .gif, .jpg, .jpeg ou .png)
[Même inconvénient que précédemment -- CharlesNepote]
Pour inclure un lien sur une image (sans l'inclure à la page):
[[http://un.example.com/image.gif]] (ne pas indiquer de texte alternatif).
Exemple:
Version précédentes:
Wikini ne le fait pas par défaut. J'ai entendu parler de la possibilité d'inclure une image via une action, mais ça me parait dommage de devoir jouer de l'accolade pour une pauvre image.
Pour donner à Wikini la fonctionnalité d'inclusion d'une image si le lien termine par une extention gif jpg ou png, suffit de changer /formatters/wakka.php et d'ajouter, après $url = $matches[1];, (vers la ligne 60) :
$url_3der = substr($url,strlen($url)-3,3);
if (($url_3der == 'gif') || ($url_3der == 'jpg') || ($url_3der == 'png'))
return "<img src=\"$url\" alt=\"\" />".$matches[2]; // argument alt OBLIGATOIRE en xhtml
question
>> JeanLuc? : mais comment s'utilise cette nouvelle possibilité ? (pas pour une image lien mais pour insérer une image seulement ???)
Si vous voulez juste faire un lien vers une image, alors utilisez la syntaxe double crochets.
Et faire une image qui soit un lien ?
Et si on veut que notre image soit justement un lien ? Par exemple une vignette pointant vers une grosse version ? C'est d'utilisation courrante.
C'est une bonne question et je vous remercie de me l'avoir posée. Je pense simplement que dans le cas de la vignette, suffit d'afficher la petite image, et après mettre un lien texte nommé voir la grande. C'est moins gracieux, mais ça suffira largement dans le cadre d'un wiki.
Pour faire une image (centrée) qui est un lien,
- pourquoi ne pas simplement encourager
- l'utilisation de simples codes HTML,
- entre deux paires de guillemets doubles ? par DjO 28sep2004
Ainsi,
"(½ paire de guillemets doubles :-)
<div align="center">
<a href="http://www.wikini.net/wakka.php?wiki=LogoPourWikiNi#djo" title="WikiNi">
<img src="adresseURLdelimage" alt="obligatoire" />
</a>
</div>
"(autre ½ paire de guillemets doubles)
crée
Si on veut empêcher la bordure de 2 px
qui se rajoute par défaut aux images liens,
on rajoute border="0px" dans la balise img
<img src="adresseURLdelimage" alt="WikiNi" border="0px" />
Si on veut empêcher la bordure de 2 px
qui se rajoute par défaut aux images liens,
on rajoute border="0px" dans la balise img
<img src="adresseURLdelimage" alt="WikiNi" border="0px" />
Bien sûr le HTML permet aussi de créer des tableaux, pour mieux utiliser l'espace :
Ch@rpente HTML, suivie du tableau qu'elle crée.
<table border="0px" bgcolor="#99ffff" cellspacing="0px" cellpadding="0px" width="680">
<tr align="center">
<td width="80px">
<a href="http://www.wikini.net/wakka.php?wiki=LogoPourWikiNi#djo" title="WikiNi">
<img src="http://www.djo.ca/WikiNiDjO80blanc.gif" alt="WikiNi" border="0px" />
</a>
</td>
<td width="520px">
Dans Wikini....
</td>
<td width="80px">
<a href="http://www.wikini.net/wakka.php?wiki=LogoPourWikiNi#djo" title="WikiNi">
<img src="http://www.djo.ca/WikiNiDjO80bleu.gif" alt="WikiNi" border="0px" />
</a>
</td>
</tr>
</table>
|
|
Dans
 , on peut créer des tableaux HTML, lesquels peuvent contenir des im@ges et /ou du texte. En justifiant le texte de la cellule centrale, on obtient ainsi une jolie mise en page. J'élaborerai plus sur les tableaux et le HTML dans Regles Formatage Tableau. |
|
|
Bien sûr, cette recette HTML pour créer des images liens, dans des tableaux ou non, implique que l'image soit sur un serveur Web ; qui plus est, il est pertinent de mentionner ici que se hooker aux im@ges d'un esp@ce Web c'est utiliser la bande passante de cet esp@ce. C'est donc dire que si cet esp@ce n'est pas le nôtre, qu'il faudrait, étiquement parlant, demander la permission de se hooker à une im@ge, avant de le faire. -DjO 03jan2005
|
Donner un alt à l'image ?
Et si on veut mettre un message alternatif à l'image ? (pour les navigateurs textes, les moteurs de recherche, les aveugles, ...).
Là, ca me parait plus important que la question précédente. Je vois hélas pas comment faire avec la syntaxe actuelle.
La possibilité serait d'ajouter le protocole img
Ainsi : img://www.monsite.com/img/photo.jpg créerait un tag image (faut alors remplacer le code précédent par :
// img:
if (substr($url,0,4)=='img:')
{
$url = substr($url,4,strlen($url));
if (substr($url,0,2) == '//') $url = 'http:'.$url;
return "<img src=\"$url\" alt=\"\" />"; // argument alt OBLIGATOIRE en xhtml
}
pour ajouter un alt dans l'image, faudrait alors écrire :
[[img://www.monsite.com/img/photo.jpg le message alt ici]]
pour implémenter cela, faut ajouter
// check for img: link
else if (substr($tag,0,4)=='img:')
{
$tag = substr($tag,4,strlen($tag));
if (substr($tag,0,2) == '//') $tag = 'http:'.$tag;
return "<img src=\"$tag\" alt=\"".str_replace('"','"',$text)."\" />";
}
Avant le return "<a href=\"$tag\">$text</a>"; de la ligne 265 du fichier wakka.php.
Ce code a aussi l'avantage de permettre l'écriture suivante :
img:/img/photo.jpg ou [[img:/img/photo.jpg le message alt ici]]
Voila, commentaires bienvenus. La seconde methode, avec le pseudo protocole img: est plus souple, mais est une sorte de nouveauté dans les écritures wikis et on peut vouloir préférer la premiere solution (discrimination sur les extentions png gif jpg) pour etre plus conforme aux autres wikis.
Le alt est essentiel, mais le tooltip est aussi important. Sous IE, les deux notions sont similaires, mais pas sous Mozilla Firefox : http://texturizer.net/firefox/faq.html#tooltips . Je pense que le "alt wiki" (ce que l'on met après le lien vers l'image) devrait correspondre à un "alt html" + un tooltip -- ViNz
PS : les deux manières peuvent cohabiter pour peut qu'on mette le code du img: avant le code png||gif||jpg dans formatters/waka.php. Ca marche comme ça chez moi : http://www.angers.org/wiki/StephaneLeSolliec
PS2 : si la source de l'image est un script (.php, perl...) on peut rajouter une extension bidon &.jpg ou &.gif ou &.png à l'URL dynamique, tant que ça ne le perturbe pas : les Wiki croient alors voir une image. -- Gniarf
62.212.109.174/pika/carambar.php?texte=Gniarf&.jpg [[62.212.109.174/pika/carambar.php?texte=Gniarf&.jpg]]
(ceci était un test d'image dynamique (ailleurs) avec fausse extention rajoutée .jpg)
-- Gniarf [copié/collé par CharlesNepote]
- Dans l'exemple que tu donnes, Gniarf, c'est toi qui maîtrise le codage du lien. Que fais-tu lorsque tu veux insérer une image (issues d'un script) d'un autre site dont le webmestre n'a pas du tout l'intention de changer quoi que ce soit... Cf. mon exemple précédent : . -- CharlesNepote (en vacances et qui répond donc de loin en loin ;-)
Je conviens que c'est de la bidouille, lamentable par son coté bidouille même. Même pas honte :-) Pour ces images du RDF, je ne comprends pas trop l'intérêt du nommage de ces images sur le coup, mais c'est vrai qu'on ne peut rien y changer. Par contre, cette première bidouille m'a donné une idée et on peut passer outre leur nommage bizarre comme ceci :
www.w3.org/RDF/icons/rdf_w3c_icon.64#.jpg [[www.w3.org/RDF/icons/rdf_w3c_icon.64#.jpg]]
Ici, le rajout de la fausse ancre #.jpg semble marcher à tous les coups (pas de 404), le wiki va gentiment rajouter le code img src nécessaire. J'ai vaguement testé avec Mozilla, Opera, IE, sur l'image au dessus et mon Carambar, dans un PhpWiki et ici, et ça marche. Je suppose qu'il vaut mieux dire #.gif quand c'est un GIF ou #.png quand c'est un PNG par souci de clarté et peut-être pour quelques navigateurs archaïques, mais j'en doute. -- Gniarf
- Oui ça marche ;-) mais ça ressort encore du domaine de la bidouille !... Cf. ma proposition plus bas.
Cliquez sur l'icone :
Solution d'une action
Le site de WakkaWiki, duquel dérive WikiNi, propose une action pour publier des images : WakkaWiki:ImgAction (interwiki).Cette solution me paraît intéressante dans le sens où elle peut répondre à tous les besoins traités par la balise HTML "img". Mieux, elle peut en reprendre exactement la syntaxe, ce qui évite de réinventer la roue...
Avantages :
- syntaxe identique au HTML
- on peut désactiver simplement cette fonction en supprimant le fichier .php
- on peut personnaliser cette action sans toucher au coeur de WikiNi (exemples : sous-titre automatique, etc.)
- pas besoin de mettre à jour WikiNi pour l'utiliser, il suffit de copier le fichier dans le répertoire /actions/
- traitement peut-être très légèrement plus lent (appel à une action, donc un fichier supplémentaire... ; en revanche ce code n'est exécuté qu'en cas d'appel : une page sans image est donc légèrement plus rapide que les solutions précédentes) (je pense que, si surcoût il y a, il est non mesurable pour un humain)
code d une action image 'peut etre amelioré amis fonctionne bien est est compatble xhtml
--Crazy pops
J'ai écrit une action {{attach}} qui lorsque elle concerne une image l'affiche, sinon elle affiche la description comme lien vers le fichier associé. Par contre elle n'affiche pas l'image comme un liens, mais avec quelques modifications cela peut facilement se faire. Cette action gère aussi l'upload du fichier attaché à la page. Notez que le fichier est attaché à une page mais pas à plusieurs, ce qui permet d'avoir plusieurs fichiers différents ayant le même nom attachés à des pages différentes (les fichiers attachés sont dans des répertoires différents).
--GarfieldFr
22/09/2003
Après quelques modifications, l'action {{attach}} permet de lier une image à une URL du type http://domaine/path/to/page ou à une page du Wiki.
En resumé cette action permet :
- l'upload de fichier
- la suppression d'un fichier attaché.
- la liaison d'une page avec ce fichier, une description peut être donnée pour être affichée à la place du nom du fichier.
- affiche le fichier si c'est une image avec un "alt" associé
- permet faire un lien qui soit une image
- l'action supporte le safe_mode de PHP
Cela me semble être les besoins exprimés ici.
--GarfieldFr
Voici quelques reflexions pour avoir une image, puis du texte à sa droite (ou gauche), pour illustrer un article (gestion du "align", en fait). Parce que mettre une image c'est bien, mais elle tombe souvent comme un cheveu sur la soupe.
Utilise un style CSS pour faire ca, "float : right" par exemple permet de mettre l'image à droite du texte et le texte entoure l'image. --GarfieldFr
Dans SuggestionsReglesDeFormatage, a la fin, "Justification du texte", il y'a un hack pour placer du texte a droite, centré ou a gauche. Ca marche aussi pour les images. Un truc genre <<<http://monimage/ <<< va placer l'image a gauche, mais point de texte le long de l'image, il se trouvera en dessous.
J'ai modifié mon wakka.php pour gérer le align, et pouvoir faire "couler" du texte le long d'une image. La syntaxe est http://monurl/monimage.jpgL pour l'image a gauche et le texte qui "coule" a droite, et http://monurl/monimage.jpgR pour l'inverse. C'est pas très beau, mais si ca peut servir...
Remplacer le code pour intégrer une image donnée ci-dessus par celui-là :
// urls et image normal ou avec texte
else if (preg_match("/^([a-z]+:\/\/\S+?)([^[:alnum:]^\/])?$/", $thing, $matches)) {
$url = $matches[1];
$url_3der = substr($url,strlen($url)-4,4);
$url_oked = substr($url,0,strlen($url)-1);
if (($url_3der == '.gif') || ($url_3der == '.jpg') || ($url_3der == '.png'))
return "<img src=\"$url\" alt=\"\" />".$matches[2]; // argument alt OBLIGATOIRE en xhtml
if (($url_3der == 'gifL') || ($url_3der == 'jpgL') || ($url_3der == 'pngL'))
return "<img src=\"$url_oked\" align=\"left\" hspace=6 alt=\"\" />".$matches[2];
if (($url_3der == 'gifR') || ($url_3der == 'jpgR') || ($url_3der == 'pngR'))
return "<img src=\"$url_oked\" align=\"right\" hspace=6 alt=\"\" />".$matches[2];
return "<a href=\"$url\">$url</a>".$matches[2];
}
Un exemple la : http://rezal404.org/wikini/wakka.php?wiki=ReglesDeFormatage
Vous trouverez mes modifications minable de wikini sur ma page : DaOuar
- Au passage on perd la conformiter xhtml avec le align="right" ou "left"
Sans vouloir te vexer, j'ai fait une proposition et même développé le code qui va avec....et j'attends encore les réactions du groupe des développeurs. Par contre, j'ai eu des utilisateurs pour ce code (l'action {{attach}}). ;-) ... --GarfieldFr
Je pense que les 2 systèmes sont complémentaires, mais je trouve l'action attach un peu compliquée pour un débutant, mais très pratique pour un utilisateur un peu plus "aware".
Sinon j'avais essayé Webexplorer, un très bon uploader/navigateur de fichier en php3, mais je ne trouve pas sous quelle licence il est. idéal pour les débutants.
--DaOuar
Je viens de tester une petite modif sur l'image : on pourrait définir "align" dans l'image comme :
[[http://www.toto.com/image.png align=right text]]
--NguyenDaiQuy
Extrêment déçu de l'absence de système fiable et facile d'utilisation pour insérer une image (ou plutôt des images, avec mise en page, avec vignettes + lien vers grande image).
A quand une évolution de ce côté permettant de positionner des images, permettant de ne pas mettre des liens absolus mais relatifs, permettant de gérer vignettes + liens vers l'image en grand format derrière) ? -- Anonyme
Peut-être bientôt -- PatrickPaul
Je ne suis pas sur que cela se fasse un jour, un wiki est surtout conçut pour la rédaction en commun de documents. Ce que tu cherche existe déjà et fonctionne très bien (voir les galeries d'images). Ceci dit, tu peux très bien écrire ta propre action qui fait ce que tu veux et la proposer sur ce site. De plus, je te signale quand même qu'il existe une action permettant d'afficher une image et de lier des fichiers à la page...
PS: Il est souhaitable de signer
--GarfieldFr
Je suis bien d'accord qu'un WiKi est fait pour réaliser des documents. Mais c'est justement dans cette optique que j'ai besoin d'images et d'un minimum de mise en page (pouvoir au moins aligner du texte à côté d'une image). Je ne parlais bien sûr pas d'afficher des dizaines d'images avec un système de navigation, mais bien de placer 2 schémas explicatifs côte à côté, mettre un logo sur une première page, un insert au milieu d'un paragraphe, etc.
PS: Désolé, je vais essayer de m'enregistrer ;)
PS2: j'ai bcp de mal à utiliser ta fonction Attach pour les images (çà ne marche pas jusqu'ici chez moi), faut-il obligatoirement mettre les images dans le répertoire d'upload ? (si oui çà ne me convient pas vraiment niveau architecture des fichiers)
Dans le fichier de configuration, tu peux indiquer le répertoire d'upload de base, ensuite, pour chaque page il sera créé un sous-répertoire de ce répertoire. Par exemple, tu peux indiquer que le répertoire d'upload est /images et lorsque tu uploadera une image pour la page PageAvecDesImages il sera créé un répertoire /images/PageAvecDesImages qui contiendra toutes les image de la page concernée. --GarfieldFr
Garfield, typiquement ce principe d'organisation n'est pas adaptée à des images, si tu veux mettre un logo sur plusieurs pages, tu ne vas tout de même pas l'uploder dans le répertoire de chaque page ! WikkaWiki? a un système de gestion d'images qui marche très bien (avec {{image}}) pourquoi pas WikiNi ?? -- Anonyme
Finalement, j'ai effectivement repris le principe de WikkaWiki?, l'approche "mettre les images dans un répertoire par page" (avec ActionAttach) ne me convenant vraiment pas.
Dans actions/image.php
<?php
/*
"image" action
Parameters:
url - URL of image to be embedded
link - target link for image (optional). Supports URL, WikiName links, InterWiki links etc.
title - title text displayed when mouse hovers above image
class - a class for the image
alt - an alt text
$Id$
*/
$title="WikiImage";
$class="";
$alt="image";
$width="";
if (is_array($vars))
{
foreach ($vars as $param => $value)
{
if ($param == 'src' and $vars['url'] == '') {$vars['url']=$value;}
if ($param == 'title') {$title=htmlspecialchars($vars['title']);}
if ($param == 'class') {$class=htmlspecialchars($vars['class']);}
if ($param == 'alt') {$alt=htmlspecialchars($vars['alt']);}
if ($param == 'width') {$width=htmlspecialchars($vars['width']);}
}
}
if ( ! empty($width) )
{
$output = "<img class=\"".$class."\" src=\"".$vars['url']."\" alt=\"".$alt."\" title=\"".$title."\" border=\"0\" width=\"".$width."\"/>";
}
else
{
$output = "<img class=\"".$class."\" src=\"".$vars['url']."\" alt=\"".$alt."\" title=\"".$title."\" border=\"0\"/>";
}
// link?
if ($link = $vars['link'])
{
// $output = $this->Link($link, "", $output, 0, 0, 0);
$output = '<a href="'.$this->href("", $link).'">' . $output . '</a>';
}
print($output);
?>
Utilisation :
{{image class="what you want" url="interface/mon_zouli_logo.png" width="200" alt="Logo" title="Logo" link="UnMotWikiCible"}}
Evidemment, les paramètres width, class, link, etc. sont tout à fait optionnels.
-- SergiO?
Je crois qu'en y glissant du simple code HTML, avec des paires de double " : On peut faire pas mal de chose sur un Wikini : des tous petits exemples sur mon Wikini perso = Insérer des images ou du code HTML. (Mille pardons si ce lien dérrange). Vous pouvez même insérer du multimédia avec la balise <Embed> ...