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 == 0 ) { $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> <br />';
$command = '{{image url="' . $selected_picture . '" alt="'.$alt_text.'" title="'.$alt_text.'" class="'.$alignement.'"'.( !empty($link) && ( $link != -1 && $link != -2 ) ? ' 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, $last, 1);
$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, $last, 0);
}
}
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 ' <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] == 1 ) $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] == 1 )
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 ' <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) == 0 ) {
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 == 0 ) 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 + 1 ) % $nb_cols == 0 ) || ( $i == count($files) - 1 ) ) 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"> left
<input type="radio" name="alignement" value="center" style="padding: 0px; margin: 0px; font-size: 10px"> center
<input type="radio" name="alignement" value="right" style="padding: 0px; margin: 0px; font-size: 10px"> 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
- Le système de navigation interdit de remonter ailleurs que sur le path de départ déclaré ;
- Le système n'affiche que certaines extensions (typiquement, des images !) ;
- Il est sans doute possible de modifier le code pour affiche run résultat compatible avec {{ActionAttach}} plutôt que {{Image}}
- Attention, le bouton "copier le code" ne fonctionne que sous IE. Si quelqu'un a une version compatible IE/Firefox, je suis preneur.
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