Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
pratique:informatique:pinterest [14/03/2018 13:09] – créée 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 | + | Vérifiez qu'il y a bien autant de fichier que d' |
- | < | + | |
- | cd mondossier/ | + | Si vous souhaitez |
- | wget -i fichierliste | + | |
+ | Évidement ça ne télécharge que ce qui se voit sur le tableau, donc des images " | ||
+ | |||
+ | ===== Se refaire le tableau en web ===== | ||
+ | Ça demande d' | ||
+ | |||
+ | 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. | ||
+ | < | ||
+ | body { | ||
+ | | ||
+ | |||
+ | } | ||
+ | |||
+ | .thumb { | ||
+ | max-width: | ||
+ | display: | ||
+ | height: | ||
+ | } | ||
+ | |||
+ | .masonry { | ||
+ | padding: 0; | ||
+ | column-gap: 0.1em; | ||
+ | font-size: .85em; | ||
+ | column-count: | ||
+ | column-width: | ||
+ | } | ||
+ | |||
+ | .item { | ||
+ | display: inline-block; | ||
+ | padding: 0.5em; | ||
+ | |||
+ | |||
+ | } | ||
</ | </ | ||
- | Et voilà, ça va tout télécharger... Vérifiez qu'il y a bien autant de fichier que d' | + | <code html index.php> |
+ | < | ||
+ | <html xmlns=" | ||
- | Si vous souhaitez mettre à jour, refaites la manip pour lister les images | + | < |
+ | < | ||
+ | <!-- <link rel=" | ||
+ | <link rel=" | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <!-- Variables php pour lister les images | ||
+ | <?php | ||
+ | $dir = ' | ||
+ | $files = glob($dir, | ||
+ | ?> | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | <?php // Liste et affiche les images | ||
+ | foreach($files as $image) { $f= str_replace($repertoire,'', | ||
+ | < | ||
+ | <?php } ?> | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== 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: | ||
+ | } | ||
+ | |||
+ | 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: | ||
+ | } | ||
+ | </ |