Site source : https://somewhereintheworld.tumblr.com/
Contenu : 2614 billets (uniquement des images)

1- télécharger les contenus du site

Il existe des plugins à ajouter aux navigateurs pour télécharger tous les médias (images, MP3, vidéos...) d'une page mais peu le font sur l'ensemble d'un site.
L'effet infinite scroll de Tumblr devrait permettre de récupérer toutes les images d'un seul coup mais l'idéal serait de récupérer les fichiers natifs, non recadrés ni compressés.

Coup de chance : Tumblr permet de télécharger un ficher zip avec tous les contenus de son site (sous réservé de pouvoir se conneceter au site en mode administrateur)
Tumblr : règlages du blog > Exporter


Le dossier Media contient toutes les images, à chaque fois dans leur version d'origine (dimensions et format de fichier, soit jpg et gif).
Les noms des fichiers sont composés de 9 caractères numériques.

Plan B : utiliser HTTrack (logiciel libre) qui permet de télécharger un site en entier.
Cette solution génère un clone du site consultable offline mais chaque image est rangée dans un dossier en version HD et en version reformatée (si la largeur de l'image est supérieure à 500px). Reste à trouver ou inventer un script qui réunirait toutes les images dans un seul dossier en ne gardant à chaque fois que la meilleure qualité.

2- renommer les fichiers

Utiliser antrenamer (logiciel libre). Ce super logiciel permet de renommer des fichiers en masse selon des critères aussi variés que subtils (date, donnée EXIF, aléatoire...).
Pour remplacer le nom de base du fichier par une suite ordonnée de nombres (0001.jpg, 0002.jpg...) :
• Fichiers > Dossiers : sélectionner le dossier où se trouvent les images
• Opérations > Énumération
- Masque : %num%%ext%
- Démarrer à : 1
- Nombre de chiffres : 4 (car il y a 2514 fichiers à renommer)
- Incrémenter de : 1
• "Go" Démarrer

Pour changer l'ordre des images de façon aléatoire :
• Opérations > Noms aléatoires
- Masque : %random%%ext%
- Méthode : Nombre aléatoire (8 chiffres)
• "Go" Démarrer
• Puis réaliser toutes les étapes de Opérations > Énumération décrites plus haut.

Ranger tous les fichiers d'images dans un dossier, appellons le "images".

3- créer une page HTML

Créer le code HTML pour afficher 2614 images peut être long et répétitif. Utilisons un tableur pour faire ce travail à notre place.

Utiliser LibreOffice Calc (logiciel libre) pour créer un nouveau classeur.
• Dans la première cellule (A1), saisir : <img src="images/
• Sélectionner la seconde cellule (B1) : Format > Cellule
- Catégorie : Nombre
- Format : - 1235
- Nombre de décimales : 0
- Zéros non significatifs : 4
- OK

• Dans la troisième cellule (C1), saisir : .jpg">
• Sélectionner les 3 cellules (A1+B1+C1)
• Cliquer sur la poignée dans le coin bas/droite de la sélection (le curseur se transforme en croix).
• Tirer la poignée vers le bas pour générer de nouvelles cellules. Les nombres de la deuxième colonne doivent s'accroître.
• Continuer jusqu'à la ligne 2614, conserver la sélection.
• Édition > Copier

Nota : il existe différentes façons de générer cette suite à partir de fonctions diverses (concaténation de texte). Je vous laisse utiliser celle qui vous convient en fonction de votre niveau de maîtrise du logiciel.

Nous avons généré la partie du code HTML pour afficher toutes les images mais il reste à ajouter le code pour créer une vraie page HTML complète digne de ce nom.
Utilisons un éditeur de texte et de code.

Utiliser Notepad++ (logiciel libre)
• Créer un nouveau fichier texte
• Édition > Coller
Dans le document, sélectionner l'espace vide entre <img src="images/ et 0001. Si les caractères masqués sont affichés, cet espace vide est signalé par une flèche orange (cf. capture ci-dessous)
• Édition > Copier
• Recherche > Remplacer
- recherche : coller ([ctrl]+[v])
- le champ Remplacer par : doit rester vide
- cliquer sur Remplacer tout

• Fermer la fenêtre Remplacer
• En tout début de document, juste avant la première ligne <img src..., coller le code suivant :
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

---
• En toute fin de document, juste après ...jpg">, coller le code suivant :
---
</body>
</html>
---
• Enregistrer le fichier :
- soit directement au format Hyper Text Markup Language (.html)
- soit au format .txt qu'il suffira de changer en .htm ou .html
Le fichier doit être enregistré au même niveau que le dossier "images".
Le nom du fichier n'a pas d'importance.

Si on ouvre ce fichier avec un navigateur web, la page doit afficher toutes les images les unes à la suite des autres, dans leur format de base.