Différences

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

--- pratique:informatique:pinterest [29/03/2018 12:48] – [Alternative via Dokuwiki] Zatalyz
+++ pratique:informatique:pinterest [29/10/2023 18:55] (Version actuelle) – [CSS personnalisé] Zatalyz
@@ Ligne 12: / Ligne 12: @@
 Ouvrez votre tableau sur Pinterest, avec Firefox((Ça marche probablement avec d'autres navigateurs, vous adaptez.)), puis scrollez tranquillement pour afficher toutes les images du tableau. C'est important, tout doit apparaître dans votre navigateur, Pinterest ne charge pas toute la page d'un coup.
-Ensuite dans **Firefox**, menu **Outils**, puis **Informations sur la page**, onglet **Médias** => sélectionnez tout et copier la liste dans un fichier texte.
+Ensuite dans **Firefox**, menu **Outils**, puis **Informations sur la page**, onglet **Médias** => sélectionnez tout et enregistrez sous.
-Ensuite ouvrez le dossier où vous souhaitez télécharger le bazar, puis depuis un terminal :
+Vérifiez qu'il y a bien autant de fichier que d'épingles ; il va peut-être ajouter votre avatar. Pour éviter ça, ne prenez pas les media noté "icônes", "images de fond" et la première "image" (votre avatar).
-<code>
-cd mondossier/
-wget -i fichierliste -A.jpg
-</code>
-Et voilà, ça va tout télécharger... Vérifiez qu'il y a bien autant de fichier que d'épingles ; il va peut-être ajouter votre avatar.
-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.
+Si vous souhaitez mettre à jour, refaites la manip pour lister les images en format texte puis faites un différentiel avec la liste sur le premier dossier, ç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.
@@ Ligne 36: / Ligne 30: @@
     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;
+}
+.masonry {
+    padding: 0;
+    column-gap: 0.1em;
+    font-size: .85em;
+	column-count: auto;
+	column-width: 200px;
+}
+.item {
+    display: inline-block;
+    padding: 0.5em;
 }
 </code>
@@ Ligne 74: / Ligne 72: @@
        ?>
+<div class="masonry">
+<div>
-<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>
+       <div class="item"><img class="thumb" src="<?php echo $f; ?>" alt=""/></div>
     <?php } ?>
-</ul>
 </div>
+</div>
 </body>
@@ Ligne 110: / Ligne 107: @@
 Malheureusement Gallery utilise des lignes (row) et non des colonnes pour son tableau... Il va falloir hacker un peu ça...
+===== CSS personnalisé =====
+Voir aussi [[pratique:informatique:css_firefox]].
+Le CSS sur Pinterest change régulièrement donc faut mettre à jour...
+Perso je veux les images, pas le bla bla sous les épingles.
+Personnaliser le CSS avec cette règle, actuellement :
+<code>div[data-test-id="pointer-events-wrapper"] {
+display:none;
+}
+div[snkjyu6gb=""] {
+display:none;
+}
+</code>