Différences

Ci-dessous, les différences entre deux révisions de la page.

--- pratique:informatique:pinterest [14/03/2018 13:11] – [Télécharger les images d'un tableau] Zatalyz
+++ pratique:informatique:pinterest [29/03/2018 12:48] – [Alternative via Dokuwiki] Zatalyz
@@ Ligne 26: / Ligne 26: @@
 Évidement ça ne télécharge que ce qui se voit sur le tableau, donc des images "petites". Mais franchement, en général ça suffit.
+===== Se refaire le tableau en web =====
+Ça demande d'avoir configuré php.
+Un petit dossier contenant index.php, style.css et le dossier board1 dans lequel on mettra toutes les images de board1.
+C'est pas responsive mais on s'en fout.
+<code css style.css>
+body {
+    margin:0;
+}
+.tableau {
+    display:flex;
+    flex-flow:row wrap;
+}
+.tableau ul {
+    column-count:6;
+    list-style-type: none;
+}
+.thumb {
+margin:1em;
+max-width:100%;
+display:block;
+height:auto;
+}
+</code>
+<code html index.php>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Gallery</title>
+    <!-- <link rel="shortcut icon" href="images/favicon.png" /> -->
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+<html>
+<body>
+<!-- Variables php pour lister les images -->
+    <?php
+    $dir = 'board1/*.{jpg,jpeg,gif,png}';
+    $files = glob($dir,GLOB_BRACE);
+       ?>
+<div class="tableau">
+<ul>
+    <?php // Liste et affiche les images
+    foreach($files as $image) { $f= str_replace($repertoire,'',$image); ?>
+       <li><img class="thumb" src="<?php echo $f; ?>" alt=""/></li>
+    <?php } ?>
+</ul>
+</div>
+</body>
+</html>
+</code>
+==== Alternative via Dokuwiki ====
+Quelques modif sur le plugin gallery (en cours). Il faut configurer dans l'administration la largueur des miniatures à 236px (c'est ce qu'on récupère), mettre la hauteur beaucoup plus grande pour avoir de la marge (j'ai mis 500px).
+Mettre ceci dans le css fonctionne presque :
+<code css>
+div.dokuwiki div.gallery table img.tn {
+	width:100%;
+	border:none;
+}
+div.dokuwiki div.gallery img.tn {
+margin:0;
+padding:0;
+}
+div.dokuwiki div.gallery table td {
+padding:0.1em;
+}
+</code>
+Malheureusement Gallery utilise des lignes (row) et non des colonnes pour son tableau... Il va falloir hacker un peu ça...