Différences

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

--- pratique:informatique:pinterest [14/03/2018 13:09] – créée Zatalyz
+++ pratique:informatique:pinterest [30/03/2018 15:31] – [Se refaire le tableau en web] Zatalyz
@@ Ligne 23: / Ligne 23: @@
 Si vous souhaitez mettre à jour, refaites la manip pour lister les images puis faites un différentiel avec le premier fichier, ça évitera de télécharger deux fois les mêmes images.
+É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;
+}
+.thumb {
+max-width:100%;
+display:block;
+height:auto;
+}
+.masonry {
+    padding: 0;
+    column-gap: 0.1em;
+    font-size: .85em;
+	column-count: auto;
+	column-width: 200px;
+}
+.item {
+    display: inline-block;
+    padding: 0.5em;
+}
+</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="masonry">
+<div>
+    <?php // Liste et affiche les images
+    foreach($files as $image) { $f= str_replace($repertoire,'',$image); ?>
+       <div class="item"><img class="thumb" src="<?php echo $f; ?>" alt=""/></div>
+    <?php } ?>
+</div>
+</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...