Wikini

ActionAvailableImages

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-44-210-107-64.compute-1.amazonaws.com

AvailableImages?


Présentation

Afin de faciliter aux utilisateurs d'un WiKi l'accès aux images disponibles sur le site et qu'ils peuvent intégrer dans leur page avec l'action {{image}}, j'ai mis en place un petit système de navigation et de sélection d'image.
A l'écran : une arborescence de répertoires en dessous du répertoire d'images publié (ou répertoire "Upload" avec ActionAttach, etc.) et à droite les images disponibles dans ce répertoire. Cela permet de voir quelles images sont déjà uploadées et disponibles sur le WiKi. Une sélection d'une image, d'un alignement et d'un texte permet d'avoir pour les paresseux ou les débutants le code à mettre dans une page WiKi.

Exemple : http://www.rackscan.net/openconf/wakka.php?wiki=AvailableImages (attention, ce n'est pas un WiKi de test, merci de vous restreindre au BacASable si vous voulez tester quelque chose)


Mise en place

Prérequis : mettre en place l'action image 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 '<a href="'.$this->href(''", $link).'">'.$output.'</a>';
}

print($output);

?>


Mise en place des images de navigation (icones, etc.) : mettre à la racine de votre WiKi sous images/explorer/ le contenu de ce fichier zip (6 ko) : http://serge.simon.free.fr/testkini/uploads/explorer.zip (le path est paramètrable dans le script ci-dessous).

Mise en place : mettre l'action AvailableImages? dans actions/availableimages.php

<SCRIPT LANGUAGE="JavaScript">
function ClipBoard_Copy()
{
holdtext.innerText = image_text.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}
</SCRIPT>
<?php

  
// WiKi extension "AvailableImages", (c) Sergio 2004
  // version 1.02
  // - ajout d'une boîte de sélection pour une cible optionnelle
  // - max caractères sur l'affichage des noms pour éviter les noms trop longs
  // - paths de départ multiples (remplir le tableau $pathes)

  // Works fine with WiKiNi 0.4.1 and WikkaWiki 1.1.5.1

  // === Paramètres du script
  
$pathes = array();
  
$pathes[]    = 'images/';                                // Pathes de depart a analyser (la navigation sera limitee a ce path)
  
$pathes[]    = 'uploads/';        
  
$pathes[]    = 'interface/';      
  
$nb_cols 4;                                            // Nombre de colonnes 
  
$pictures_filetypes '\.jpg|\.jpeg|\.png|\.gif|\.bmp';  // Type de fichiers a afficher sous forme d'expression régulière
  
$thumbnails_width 120;                                 // Largeur maximale des images a afficher en mode navigation  
  
$thumbnails_height 120;                                // Hauteur maximale des images a afficher en mode navigation  
  
$max_characters 20;                                    // Caractères maximum à afficher pour le nom des images

  // === Récupération des valeurs du formulaire 
  
$selected $_POST['selected'];
  
$selected_picture $_POST['selected_picture'];
  
$alignement $_POST['alignement'];
  
$alt_text $_POST['alt_text'];
  
$link $_POST['link'];

  
// === Path actuel par défaut
  
$path $pathes[0];

  
// === On ne prend le path en paramètre que si c'est un sous-path du path de référence
  
sort($pathes);
  
$found false;
  if ( isset(
$_GET['path']) ) {
    foreach (
$pathes as $p) {
      
$pos strpos($_GET['path'], $p);
      if ( 
$pos !== FALSE && $pos == ) { $path $_GET['path']; break; } 
    }
  }

  
// === Si on est en mode "selected" une image a été sélectionnée
  
if ( isset($selected) && ! empty($selected) ) {
    if ( 
file_exists($selected_picture) )
    {
      echo 
'Commande à utiliser : <br />';
      list(
$width$height$type$attr) = getimagesize($selected_picture);
      
$size filesize($selected_picture);
      
$picture_datas '<font size="-2"><b>'.$width.'</b>x<b>'.$height.'</b> | <b>'.round($size/1024).'</b> ko </font>';
      if ( 
$width $thumbnails_width ) {
        
$height round( ( $height $thumbnails_width 2) / $width );
        
$width $thumbnails_width 2;
      }
      if ( 
$height $thumbnails_height ) {
        
$width round ( ( $width $thumbnails_height 2) / $height );
        
$height $thumbnails_height 2;
      }

      echo 
'<div align="center">';
      echo 
'<a href="'.$selected_picture.'"><img src="'.$selected_picture.'" width="'.$width.'" height="'.$height.'" border="0"></a>&nbsp;<br />';
      
$command '{{image url="' $selected_picture '" alt="'.$alt_text.'" title="'.$alt_text.'" class="'.$alignement.'"'.( !empty($link) && ( $link != -&& $link != -) ? ' link="'.$link.'"' '').'}}';
      
// echo $this->Format($command); // Attention si utilisation de l'action image il vaut mieux qu'elle soit patchée pour accepter le parametre width
      
echo $picture_datas;
      echo 
'<br />';
      echo 
'<br />';
      echo 
'<span id="image_text">';
      echo 
$command;
      echo 
'</span><br />';
      echo 
'<textarea id="holdtext" style="display:none;"></textarea>';
      echo 
'<button onClick="ClipBoard_Copy();" style="padding: 0px; margin: 0px; font-size: 10px">Copier le code vers le presse-papier</button><br />';
      echo 
'<br />';
      echo 
'</div>';
    } else {
      echo 
"<b>Erreur</b> l'image '$selected_picture' n'existe pas.<br />";  
    }
  }
  else
  {
    
// === Sinon affichage et sélection des images/paths disponibles

    // Fonction pour obtenir tous les éléments d'un type (et/ou extensions précises) au sein d'un répertoire
    
function get_DirElements($path$kind$extensions '')
    {
      
$results = array();
      
$fd opendir($path);
      while ( ( 
$item readdir($fd) ) !== FALSE )
      {
        if ( 
$kind == 'dirs' && is_dir($path $item) && $item != '.' && $item != '..' ) { 
          
$results[] = $item
        }
        elseif ( 
$kind == 'files' && is_file($path $item) && eregi($extensions$item) ) { 
          
$results[] = $item
        } 
      }
      
closedir($fd);
      return (
$results);
    }

    
// Fonction construisant l'arbre des répertoires
    
function build_TreeLevel(&$dirs$current_path$starting_path$level 0)
    {
      
// Chaque ligne successive du tableau contient un tableau ayant les éléments 
      // "path complet du répertoire", "niveau du répertoire dans l'arborescence", "est-ce le dernier element du niveau ?"
      // Il suffira de parcourir dans l'ordre ce tableau pour construire l'arborescence complète des répertoires
      
$max_level $level// Contiendra la profondeur maximale de l'arborescence
      
$temp_dirs get_DirElements($starting_path'dirs');
      
$nb count($temp_dirs)-1;
      
$i 0;
      foreach (
$temp_dirs as $dir) {
        
// Gestion dernier élément
        
if ( $i++ == $nb $last 1; else $last 0;
       
        
// Gestion développement du répertoire courant
        
if ( eregi($starting_path.$dir$current_path) ) {
          
$dirs[] = array($starting_path.$dir$level$last1);
          
$r build_TreeLevel($dirs$current_path$starting_path.$dir.'/'$level 1);
          if ( 
$r $max_level $max_level $r;
        } else {
          
// Si pas le répertoire courant on ne développe pas mais on stocke juste l'entrée en cours
          
$dirs[] = array($starting_path.$dir$level$last0);
        }
      }
      return (
$max_level);
    }
    
// Fonction affichant une cellule d'un tableau avec une image
    
function show_Cell($pic$w$h$url '') {
      
$images_path 'interface/explorer/';                   // Path où se trouvent les images liees a la navigation elle-même
      
if ( empty($url) ) {
        echo 
'<td valign="middle"><img src="'.$images_path.$pic.'" width="'.$w.'" height="'.$h.'" align="absmiddle" border="0">';
      } else {
        echo 
'<td valign="middle"><a href="'.$url.'"><img src="'.$images_path.$pic.'" width="'.$w.'" height="'.$h.'" align="absmiddle" border="0"></a>';
      }
    }

    
// Fonction affichant un arbre de navigation de répertoires type explorer
    
function show_FullTree($starting_path$current_path$level 0)
    {
      
// Load tree of all dirs
      
$path_elements explode ("/",$starting_path);
      
$i 0;
      
$path '';
      for (
$i 0$i <= $level$i++) {
        
$path .= $path_elements[$i].'/';
      } 

      
$max_level build_TreeLevel($dirs$starting_path$path);

      
// Show tree
      
echo '<tr>';
      if ( 
eregi($starting_path$current_path) ) {
        
show_Cell('i_dir_open.gif''16''13');
      } else {
        
show_Cell('i_dir_closed.gif''16''13');
      }
      echo 
'<td nowrap="nowrap" valign="top" align="left" width="100%" colspan="'.($max_level+2) .'">';
      
$url ereg_replace('&path=.*','',$_SERVER['REQUEST_URI']) . '&path=' $path;
      echo 
'&nbsp;<font size="-2"><a href="'.$url.'">' basename($path) . '</a></font>';
      echo 
'</td></tr>';
      if ( 
is_array($dirs) && eregi($starting_path$current_path) ) {
        foreach (
$dirs as $dir) {
          
$dir_name  $dir[0];
          
$dir_level $dir[1];

          
// Gestion dernier element
          
if ( $dir[2] == $last 'last_'; else $last '';

          
// Element de plus haut niveau
          
echo '<tr>';
          
// On ajoute le nombre d'elements vides necessaires
          
for ( $i=0;$i<$dir_level;$i++) {
            if ( 
$dir[2] == 
              
show_Cell('b_vert.gif''15''20');
             else
              
show_Cell('b_vert.gif''15''20');
          }

          if ( 
eregi($dir_name$current_path) ) {
            
show_Cell('b_'.$last.'dir_open.gif''15''20');
            
show_Cell('i_dir_open.gif''16''13');
          } else {
            
show_Cell('b_'.$last.'dir_closed.gif''15''20');
            
show_Cell('i_dir_closed.gif''15''13');
          }
          
$url ereg_replace('&path=.*','',$_SERVER['REQUEST_URI']) . '&path=' $dir_name .'/';
          echo 
'<td nowrap="nowrap" valign="top" width="100%" align="left" colspan="'.($max_level $dir_level 1) .'">';
          echo 
'&nbsp;<font size="-2"><a href="'.$url.'">' basename($dir_name) . '</a></font><br />';
          echo 
'</td></tr>';
        }
      }
    }

    echo 
'<div align="center"><form action="'.$this->href().'" method="POST">';
    echo 
'<table border="0" cellspacing="5" cellpadding="5">';
    echo 
'<tr><td valign="top">';

    echo 
'<table cellpadding="0" cellspacing="0" border="0">';
    foreach (
$pathes as $p)
      
show_FullTree($p$path);
    echo 
'</table>';

    echo 
'</td><td valign="top">';

    
$files get_DirElements($path'files'$pictures_filetypes);
    
// Si aucune image ...
    
if ( count($files) == ) {
      echo 
'<font size="-2">(aucune image dans ce répertoire.)</font><br />';
    } else {
      echo 
'<table border="0">';
      echo 
'<tr>';
      foreach ( 
$files as $picture )
      {
        if ( 
$i $nb_cols == ) echo '<tr>' "\n";
        echo 
'<td align="center">' "\n";
        
        list(
$width$height$type$attr) = getimagesize($path $picture);
        if ( 
$width $thumbnails_width ) {
          
$height round( ( $height $thumbnails_width ) / $width );
          
$width $thumbnails_width;
        }
        if ( 
$height $thumbnails_height ) {
          
$width round ( ( $width $thumbnails_height ) / $height );
          
$height $thumbnails_height;
        }

        echo 
'<input type="radio" name="selected_picture" value="'.$path.$picture.'"><img src="'.$path.$picture.'" width="'.$width.'" height="'.$height.'" border="0" alt="'.$picture.'" title="'.$picture.'">' "\n";
        echo 
'</a><br />' "\n";
        if ( 
strlen($picture) > $max_characters ) {
          echo 
'<font size="-2">'.substr($picture,0,$max_characters).'...</font>';
        } else {
          echo 
'<font size="-2">'.$picture.'</font>';
        }
        echo 
'</td>' "\n";
        if ( ( ( 
$i ) % $nb_cols == ) || ( $i == count($files) - ) ) echo '</tr>' "\n";

        
$i++;
       
      }
      echo 
'<tr>
        <td colspan="'
.$nb_cols.'">
          <table width="100%">
            <tr>
              <td>Texte alternatif :</td>
              <td>
                <input type="text" name="alt_text" size="50" style="padding: 0px; margin: 0px; font-size: 10px"><br />
              </td>
            </tr>
            <tr>
              <td>Cible (optionnelle) : </td>
              <td>
                <select name="link" style="padding: 0px; margin: 0px; font-size: 10px">
                  <option selected value="-2">Aucune destination (image non clickable)</option>
                  <option value="-1">--------------------------------</option>'
;
      foreach (
$this->LoadAll("select * from ".$this->config["table_prefix"]."pages where latest = 'Y' order by tag") as $page)
      {
        echo 
'<option value="'.$page[tag].'">' $page[tag] . '</option>';
      }
      echo 
'    </select><br />
              </td>
            </tr>
            <tr>
              <td>Alignement : </td>
              <td>
                <input type="radio" name="alignement" value="left" CHECKED style="padding: 0px; margin: 0px; font-size: 10px">&nbsp;left&nbsp;
                <input type="radio" name="alignement" value="center" style="padding: 0px; margin: 0px; font-size: 10px">&nbsp;center&nbsp;
                <input type="radio" name="alignement" value="right" style="padding: 0px; margin: 0px; font-size: 10px">&nbsp;right 
                <br />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td colspan="'
.$nb_cols.'" align="center">
          <input type="submit" name="selected" value="  Generer le code  " style="padding: 0px; margin: 0px; font-size: 10px">
        </td></tr></table>'
;
    }
  echo 
'   </td></tr>
   </table></form></div>'
;
  }
?>


Utilisation

Mettre l'action {{AvailableImages}} n'importe où sur une page pour accéder à la navigation parmi les images disponibles.


Remarques

Pour le copier coller avec Mozilla/FireFox, je crois qu'il est désactivé par défaut dans les fonctions javascript pour des problèmes de sécurité. voir . Sinon la selection du texte + clic droit "copier" fonctionne très bien avec Mozilla/FireFox et ça sous tous les OS (même m$) ;o)
-- OlivierB

Evolutions
Système de thumbnails ...
A coupler avec le système d'uploads ...
ALT text automatique sur sélection d'image en fonction du nom de l'image (par JavaScript, si la zone de saisie d'alt text est vide).
Voir s'il est possible d'intégrer les images de navigation directement dans le code (comme dans sniff par exemple).

-- Probleme
N'ayant pas trouvé de page bug je me permet de laisser un commentaire ici
j'ai été obligé de modifier image.php en ligne 44 j'ai du mettre $output = '<a href="'.$this->href(' " ', $link).'">'.$output.'</a>'; au lieu de href(' ' ", $link). Je ne sais pas si c'est une erreur mais chez moi ca plante.
Dans ta doc Il faut préciser que le repertoire interface/explorer est necessaire au bon affichage de l'arborescence
En espérant t'avoir aidé car c'est super
Andy
Andco_antispam@caramail.com


Commentaires [Cacher commentaires/formulaire]