Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
pratique:informatique:pinterest [14/03/2018 15:34] – [Se refaire le tableau en web] 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' | Ouvrez votre tableau sur Pinterest, avec Firefox((Ça marche probablement avec d' | ||
- | Ensuite dans **Firefox**, | + | Ensuite dans **Firefox**, |
- | 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' |
- | < | + | |
- | cd mondossier/ | + | |
- | wget -i fichierliste -A.jpg | + | |
- | </ | + | |
- | + | ||
- | Et voilà, ça va tout télécharger... | + | |
- | Si vous souhaitez mettre à jour, refaites la manip pour lister les images puis faites un différentiel avec le premier | + | Si vous souhaitez mettre à jour, refaites la manip pour lister les images |
Évidement ça ne télécharge que ce qui se voit sur le tableau, donc des images " | Évidement ça ne télécharge que ce qui se voit sur le tableau, donc des images " | ||
Ligne 36: | Ligne 30: | ||
margin:0; | margin:0; | ||
- | } | ||
- | |||
- | .tableau { | ||
- | display: | ||
- | flex-flow: | ||
- | } | ||
- | |||
- | .tableau ul { | ||
- | column-count: | ||
- | list-style-type: | ||
} | } | ||
.thumb { | .thumb { | ||
- | margin:1em; | ||
max-width: | max-width: | ||
display: | display: | ||
height: | height: | ||
+ | } | ||
+ | |||
+ | .masonry { | ||
+ | padding: 0; | ||
+ | column-gap: 0.1em; | ||
+ | font-size: .85em; | ||
+ | column-count: | ||
+ | column-width: | ||
+ | } | ||
+ | |||
+ | .item { | ||
+ | display: inline-block; | ||
+ | padding: 0.5em; | ||
+ | |||
+ | |||
} | } | ||
</ | </ | ||
Ligne 70: | Ligne 68: | ||
<!-- Variables php pour lister les images --> | <!-- Variables php pour lister les images --> | ||
<?php | <?php | ||
- | $dir = 'images/ | + | $dir = 'board1/ |
$files = glob($dir, | $files = glob($dir, | ||
?> | ?> | ||
- | + | <div class=" | |
- | + | <div> | |
- | <div class=" | + | |
- | <ul> | + | |
<?php // Liste et affiche les images | <?php // Liste et affiche les images | ||
foreach($files as $image) { $f= str_replace($repertoire,'', | foreach($files as $image) { $f= str_replace($repertoire,'', | ||
- | <li><img class=" | + | <div class=" |
<?php } ?> | <?php } ?> | ||
| | ||
- | </ul> | + | </div> |
</ | </ | ||
+ | |||
</ | </ | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Alternative via Dokuwiki ==== | ||
+ | Quelques modif sur le plugin gallery (en cours). Il faut configurer dans l' | ||
+ | |||
+ | Mettre ceci dans le css fonctionne presque : | ||
+ | <code css> | ||
+ | div.dokuwiki div.gallery table img.tn { | ||
+ | width: | ||
+ | border: | ||
+ | } | ||
+ | div.dokuwiki div.gallery img.tn { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.gallery table td { | ||
+ | padding: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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: | ||
+ | |||
+ | 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 : | ||
+ | < | ||
+ | display: | ||
+ | } | ||
+ | |||
+ | div[snkjyu6gb="" | ||
+ | display: | ||
+ | } | ||
</ | </ |