Importer des photos en masse dans vos points avec ces 6 étapes

Tutoriels - 5 janvier 2017

Grâce à l’éditeur Click2Map, nous avons construit la carte suivante, regroupant les 100 meilleures photos National Geographic de l’année 2016 (nous vous invitons à y jeter un coup d’œil, elles valent le coup).

 

Agrandir la carte

 

Cette carte a été créée grâce à un simple import d’un fichier CSV (fichier Microsoft Excel) et à la création dans l’éditeur d’un modèle de repère.

Nul besoin d’ajouter individuellement chaque image ou encore de créer vos points manuellement. En effet, une solution efficace s’offre à vous dans l’éditeur Click2Map : l’onglet ‘Code’.

Cet onglet peut contenir toute sorte de code HTML. En lisant ce terme, certains voudront tout de suite abandonner ce tutoriel car persuadés que cette démarche est trop compliquée ou qu’elle requiert des notions en développement et programmation informatique. Pas du tout ! Suivez ces 6 étapes pour importer en masse vos photos sur votre carte.

 

1- Récupérer les liens URL de vos photos

Avant d’attaquer directement dans l’éditeur Click2Map, quelques étapes de préparation sont nécessaires, notamment avec vos photos.

Regroupez et organisez toutes les images sur votre ordinateur dont vous aurez besoin à l’import. Le but est de les héberger sur le serveur de votre site internet (ou éventuellement votre blog).

Comment faire cela ? Si vous vous y connaissez en informatique, vous pouvez importer directement les photos en vous connectant sur le ftp de votre site internet.

Si ce terme ne vous parle pas du tout, rendez-vous dans la bibliothèque des médias de votre site internet. Sur WordPress par exemple, cliquez sur Médias > Bibliothèque de médias > Ajouter. Sur Drupal, cliquez sur Contenu > Médias > Ajouter un fichier. Etc.

Ajoutez toutes vos photos puis récupérez les liens URL avec un clic droit sur la photo > Copier l’adresse du lien.

Reportez chaque lien URL dans votre fichier CSV.

 

2- Créer ou compléter votre fichier CSV

Construisons correctement votre fichier CSV (obtenez de l’aide pour convertir votre fichier Excel en un fichier CSV ici).

Pour notre carte d’exemple, les colonnes suivantes ont été créées dans notre fichier CSV : Titre, Adresse, Ville, Pays, URL, Groupe, Modèle

Le Titre correspond au titre du repère affiché sur la carte et dans la légende à droite.

L’Adresse, la Ville et le Pays permettent à l’éditeur de localiser votre point sur la carte.

La colonne ‘URL’ correspond aux liens web récupérés dans l’étape 1.

Ici, la colonne Groupe correspond aux différentes catégories présentes dans la légende de la carte : Photos du Jour, Photos de Voyage,... Associez les bonnes catégories aux bonnes photos.

Enfin, la colonne Modèle est lié au modèle que vous allez créé dans l’étape 4. Donnez-lui le nom de votre choix. Ici nous l’avons appelé ‘NationalGeographic’. Puis nous l‘avons copié dans chaque ligne de la colonne Modèle. Attention le nom d’un Modèle ne doit pas contenir de caractères spéciaux ou d’espaces.

Maintenant rendez vous dans l’éditeur Click2Map pour préparer votre import.

 

3- Créer un champ personnalisé

Dans votre base de données Click2Map, un champ personnalisé doit être ajouté pour contenir les URL de vos photos. En effet, ce n’est pas un champ standard existant dans Click2Map.

Rendez vous dans le menu Base de données > Propriétés, créez une catégorie de données, dans notre cas appelée ‘Photos’, puis un champ de données nommé ‘url’ de type Texte.

Ce champ sera utilisé dans votre modèle de repère.

 

4- Créer un modèle de repère

Ensuite, créez votre modèle de repères pour indiquer à l’éditeur où vous souhaitez faire apparaitre vos photos, notamment dans notre cas dans l’onglet ‘Code’.

Menu Outils > Collection de modèle, créez-en un Nouveau. Nommez-le du même intitulé que dans votre fichier CSV, dans notre cas : NationalGeographic.

Si vous souhaitez associer une icône personnalisée à vos points, cliquez sur l’icône bleue en bas à gauche de votre fenêtre d’édition.

Puis, rendez vous dans ‘Onglets suppl.’ pour configurer votre onglet Code.

Cliquez sur ‘Code’. Ajoutez le code HTML suivant dans l’encadré blanc.

 
         <center>
<img src="#Photos.url" width="250px"><br><br>
<p><strong>Source</strong>: National Geographic</p>
</center>
 

Le champ #Photos.url correspond au champ de données personnalisé précédemment créé.

Le champ Width correspond à la taille de votre image, nous les avons redimensionné à cette taille de 250 pixels afin qu’elles soient optimisées dans l’infobulle du repère.

 

5- Importer

Tout est prêt. Il est temps d’importer votre fichier.

Cliquez sur Nouveau > Import. Choisissez le format CSV, point-virgule. Puis importez.

Une fenêtre s’ouvre pour vous faire associer les colonnes de votre fichier aux bons éléments dans Click2Map. Associez Titre avec l’élément Titre, Ville avec Adresse (Ville), Modèle avec Modèle, etc jusqu’au dernier champ.

Validez.

 

6- Afficher l’onglet ‘Code’ par défaut

C’est presque fini ! Vos points sont importés et localisés sur la carte.

Il ne vous reste plus qu’à afficher votre onglet Code par défaut et masquer les autres éléments (Description, Adresse, etc.)

Dans le menu Outils, cliquez sur Opérations groupées.

Sélectionnez tous vos points, puis choisissez dans la liste déroulante ‘Modifier les éléments affichés’.

Cachez tous les champs. Validez.

Vérifiez sur un repère que votre photo s’affiche correctement et à la taille souhaitée.

Votre carte est prête à être publier.

N'attendez pas !

Enregistrez-vous maintenant