Wikini

InclureUneImage

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-54-163-20-57.compute-1.amazonaws.com

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 les icônes RDF proposées par le W3C) 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: wikipedia

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,

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
WikiNi
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" />
WikiNi

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>
WikiNi
Dans WikiNi, 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.
WikiNi
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('"','&quot;',$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]


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


Cliquez sur l'icone : -- GerdAmi

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 :
Inconvénient :
-- CharlesNepote

code d une action image 'peut etre amelioré amis fonctionne bien est est compatble xhtml
<?php
 
#if (!defined(WIKINI_VERSION))
#{
#die ("accès direct interdit");
#}
 
 
 
if ($this->GetParameter("url"))
{
        $alt="";
        if (!$this->GetParameter("alt"))
                {
                $alt='""';
                } else {
                $alt = $this->GetParameter("alt");
                }
        if (!$this->GetParameter("align"))
                {
                if(($this->GetParameter("align") != "left") || ($this->GetParameter("align") != "right"))
                print '<img src="'.$this->GetParameter("url").'" alt="'.$alt.'" />';
                } else {
                echo '<img src="'.$this->GetParameter("url").'" alt="'.$alt.'" style="float:'.$this->GetParameter("align").'" />';
                }
} else {
        echo "parmetre url olbigatoire";
}
 
?>

--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 :
13/10/2003

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


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> ...
Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]