c

AIDE ET ASTUCES
Pour la Configuration de la galerie photo
LRB Portfolio dans Lightroom

c

Avant Propos :
L'aide que je propose est assez "basique" et elle s'adresse surtout à ceux qui ne sont pas familiarisés avec la langue de Shakespeare. Même les autres y trouverons sûrement l'occasion de gagner du temps sur des choses qui ne sont pas très claires au début. Et pour tous, ou du moins ceux qui n'ont aucune notion de code HTML un ou deux petits Bonus pour améliorer votre galerie LRB.

Je suis bien allé chercher de l'aide sur le net, mais pas facile de trouver quelque chose qui tienne la route. Exemple ? J'ai payé 1,50€ pour une vidéo d'aide sur LRB Portfolio, ici. Eh bien c'est pas la peine d'y aller, allez plutôt acheter une baguette de pain pour ce prix ! Et en plus il vous restera quelques centimes pour des Carambars ! :-)
Cette présente aide va donc vous permettre je l'espère de ne pas perdre de temps sur certaines choses. En fin de page vous trouverez mon email, si vous avez des informations sur la mise en oeuvre de cette galerie LRB qui ne sont pas là ou des astuces pour l'utiliser plus facilement, n'hésitez pas à m'en faire part, je les intègrerais ici.

Vous pouvez télécharger LRB Portfolio ici, il coûte 17,33 euros (15£ UK) et même si il est en anglais il est assez simple et surtout il marche bien. Il y a une version d'essai gratuite avec un nombre de photos limité à 10 par galerie.


------------      D  E  B  U  T     D  E     L ' A  I  D  E     ------------

La première chose à faire est de déterminer combien de galeries vous désirez présenter, et surtout de bien connaitre le nombre de photos par galerie.

Vous aller donc créer un répertoire avec les photos de 2 galeries ensembles et dans l'ordre.
Exemple : 29 photos au total, les 15 premières photos pour la galerie N°1 et les 14 suivantes pour la galerie N°2. (Si il y avait une 3ème galerie, nous aurions par exemple un total de 39 photos, distribuées comme suit : 15 pour la galerie N°1, 14 pour la galerie N°2 et enfin 10 pour la galerie N°3)
Ouvrir Lightroom à l'onglet "Bibliothèque" et faire "Fichier/Importer des photos ou des vidéos…"
Quand les 29 photos sont là, vérifier qu'elles soient bien dans l'ordre voulu, càd les 15 premières pour la galerie N°1 et le reste pour la galerie N°2. Vous pouvez modifier l'ordre, mais gardez en tête le nombre de photos par galerie, c'est important car il faudra le préciser plus loin, et si vous vous trompez d'une seule photo la galerie ne marchera pas.
Pour aller voir où inscrire le nombre de photos, cliquer ici : #galery_1

Maintenant nous allons aller dans l'onglet "Web" et sélectionner LRB Portfolio en haut à droite, la galerie s'affiche avec les paramètres par défaut, et en anglais.
Pas de problème, nous allons traduire ça, mais gardez à l'esprit qu'au départ elle était en anglais. Nous verrons plus loin pourquoi.


Ensuite il faut spécifier le type de caractères, en effet, si vous laisser ce paramètre par défaut il sera impossible d'avoir accès aux caractères français accentués. Il faut donc sélectionner UTF8.
NDLA : Ce détail n'est pas évident à trouver de suite je vous le dis !


Dans la colonne de droite maintenant, nous allons changer les titres des menus qui sont en anglais. Pour chaque "page" du menu, colonne de droite, il y a une fenêtre.

HOME PAGE INFO
Première chose à faire, et ce sera pareil avec toutes les autres pages, c'est de la cocher pour qu'elle soit affichée. Donc il faut cocher "Show Home Page Link"
La première est la "page" "Home Page info". Il va suffire d'aller sur ""Home Page Menu Title" et de changer le mot anglais "HOME" par le mot français "ACCUEIL" (attention à l'orthographe !) Vous pouvez aussi laisser le mot "Home", ce mot est bien connu même des français, surtout quand il est sweet.

Ici un exemple d'un "Menu" LRB Portfolio en anglais :

"Faces" (Portraits) "Fashion" (Mode) "Editorial" sont des galeries photos, "Pricing" (Tarifs) est une "Blank Page" (Page blanche) que le concepteur à rajoutée, ce que nous pourrons faire également.
NB : Pour vous en inspirer, vous pouvez aller voir le site de l'auteur ici.

"Page Title" c'est le nom de la page qui s'affichera en haut dans le navigateur dans une barre horizontale, donnez lui un nom, ça fera plus "pro" ! :-)

"Home Page Text" : si vous voulez taper du texte il faut absolument cocher cette case !

"Site Text" Vous pouvez taper votre texte ici. Pour les retraits à la ligne c'est spécial, j'en parlerais plus tard en bas de page.

ABOUT PAGE
Changez "About" par ce que vous voulez, moi j'ai mis "matériel utilisé". A l'origine c'est "About me" soit en français "à mon sujet".
Pour utiliser un avatar, il faut préparer une photo pas trop grande (moi j'ai pris une photo du D700) et se rappeler de son nom et de son emplacement. Pour l'emplacement je vous conseille le répertoire où se trouvent toutes les photos de la galerie.
A droite, il faut évidement cocher "Use Avatar" et dans "About Avatar URL" taper resources/images/avatar.gif (un seul "s" à resources, pas de majuscule) le format de la photo sera jpg ou gif ou png...

BLANK PAGE
C'est utile si vous voulez une page à remplir de ce que vous voulez.

CONTACT PAGE OPTION

Si vous la voulez, cochez "Include Contact Page". Il s'agit de vos coordonnées.
"Contact Page Menu Title" peut rester, ça marche aussi en français.

Maintenant nous allons cocher ce que nous voulons voir apparaître.
Au sujet du formulaire de contact, je n'ai pas pu le faire marcher, quand je clique sur "Send" qui veut dire "Envoyer" ça ne marche pas. Dans une vidéo d'aide en anglais dans la vidéo entre 18:55 et 19:43 et plus exactement à 19:22 le créateur de LRB Portfolio explique quelque chose, il dit que ça ne marche pas. : "it does not work…" qu'il dit ! J'ai laissé un message pour avoir des renseignements. Si vous avez des infos sur ce sujet je vous prierai de m'en faire part, je mettrais ce tuto à jour. Donc ne cochez pas "Show Contact Form" (qui veut dire "montrer le formulaire")


Pour ma part j'ai coché :

- "Show Contact Details" (montrer les details du contact)

- "Show Contact name" (montrer le nom du contact)

- "Use Contact nage As Link" (utiliser le nom du contact comme lien de messagerie)

- "Show Mobile/Cell Details" (montrer les détails du téléphone portable) et

- "Facebook"


CONTACT PAGE SETTINGS

Mettre votre email dans "Contact Form Email Header"
Mettre votre nom dans "Contact Info"
Mettre votre adresse email dans "Contact Info" (je n'ai pas mis mailto:)
Mettre votre adresse email dans "Email Address (no Mailto) sans mettre maillot devant.
Si vous avez coché "Show/mobile/Cell Details" taper votre numéro de téléphone dans la case "Mobile/Cell Number"
Mettre votre adresse "Facebook" dans la case "Facebook"
Cocher "Use twitter/Facebook etc Icons" si vous voulez que les icônes soient visibles avec un lien dessus.

GALLERY 1
Cocher "Include Gallery 1" (ce sera pareil pour Gallery 2, mais pas pour les autres galeries sauf si vous en voulez plus).
Mettre le nom de la galerie dans la case "Gallery Name"
Et surtout ! Mettre le nombre de photos !

EXTERNAL LINKS
Chez moi c'est décoché, donc inactif.

FONT AND BODY SETTINGS
Ici c'est un peu une "mise en page". Sélectionner dans la case "Body Font Family" la police que vous voulez. Pour la taille du texte qui se trouve par exemple dans la page "Accueil" (ou "Home") et qui sera changé aussi sur toutes les autres pages simultanément, il faut afficher la taille dans la case : "Content Font Size". Une taille de 14px est correct. Le reste est assez simple à paramétrer.

SEO
Acronyme qui veut dire : Search Engine Optimization.
- "HTML metadata Description" c'est la description de votre site en quelques mots. Cela apparaitra dans les quelques lignes de description quand un moteur de recherche aura trouvé votre galerie.
- "HTML Metadata Keywords" c'est des mots-clés que vous pouvez taper ici, pour que les moteurs de recherche trouvent votre site, mais c'est devenu gadget.

GOOGLE ANALYTICS CODE
Il s'agit du suivi des pages de sites Web créées dynamiquement au moyen de technologies telles que PHP ou ASP ou même JSP. Moi je ne m'en occupe pas.

ADDITIONAL FOOTER TEXT
C'est du texte additionnel de bas de page. Je n'ai pas essayé, mais sachez que ce sera actif seulement après l'exportation.

MENU SETTINGS
La police du Menu. Small-caps c'est petites majuscules. Pour ma galerie c'est taille 17px

MENU IMAGES
Si vous voulez utiliser une image spéciale que vous aurez préparé avant, pour la première page de chaque page du Menu. Par exemple sur la page "ACCUEIL" telle photo, page "MATERIELS" telle autre photo, dans cette fenêtre "Menu Images" il faut cocher "Use Image".
Vous avez donc préparer une image dont le nom est toto.jpg (de la taille des images de la galerie) pour la page "MATERIELS" qui se nommait avant "ABOUT" ! Vous aller sur la case "ABOUT MENU IMAGES" et vous changer le nom de l'image par le nom de votre image préparée précédemment. C'est à dire que au lieu de resource/images/about.png vous aurez resource/images/toto.jpg et pareil pour le reste.
Le problème (s'il en est) c'est que cette image n'est pas dans la galerie, pour l'instant nous n'avons fait que paramétrer la galerie avec son nom mais elle n'y est pas ! Sachez bien où elle se trouve, et quand la galerie sera faite, nous irons mettre l'image toto.jpg (avec l'image de l'avatar aussi) dans le répertoire "Images" du répertoire "resource".

PALETTE DE COULEURS
Moi je laisserai comme c'est ! :-) D'abord c'est pas facile de s'y retrouver, et vous risquer une chose, c'est de voir disparaitre du texte, par exemple toute la barre de "Menu" parce que par mégarde vous aurez spécifié une couleur de fond qui sera la même que la couleur de la police ! :-(

ASPECT
Cliquez sur le petit triangle et vous aurez accès à un pop-up cliquez ensuite sur "Modifier…" et choisissez soit du texte ou une image. Dans le cas ci-contre il s'agit d'une image.


Pour utiliser une image cocher "utiliser une plaque d'identité graphique".

Quand vous modifiez cette image, n'oubliez pas à chaque fois d'effacer l'image et d'aller chercher la nouvelle.


Un exemple :
GALLERY PADDING
Il s'agit de l'espace entre les photos de la galerie. (Pour les autres curseurs, il suffira de les maneuvrer et de regarder l'effet qu'ils ont dans la fenêtre centrale).

INFORMATIONS SUR L'IMAGE
"Identity Plate Position" c'est la position de la plaque d'identité. De toute façon, tirez les curseurs et vous verrez bien ce qui se passe ! :-)

PARAMETRES DE SORTIE
"Image Settings" c'est la qualité de l'image. J'ai laissé 70

C-MOTION
Pour faire bouger les photos de la galerie, il faut cocher "Use Cmotion to scroll". Si vous le décochez, alors il y aura un curseur qui s'affichera automatiquement et qui servira à faire avancer les photos.
Pour ma galerie, j'ai décoché "Auto scroll"
J'ai aussi décoché "Keep Scrolling on Mouse Out" autrement dit j'ai désactivé l'injonction : "continuer à faire défiler les photos même quand la souris est en dehors de la zone". En effet, il est plus facile de cette façon de contrôler le défilement des photos, un déplacement de la souris hors de la fenêtre de visualisation arrète le défilement, essayez et vous verrez.

EXPORTATION
Cliquer dans Lightroom et dans l'onglet "WEB" sur "Exporter" Donner un nom à votre répertoire et OK.
C'est maintenant que vous allez mettre les photos avatar.jpg et toto.jpg (et toutes les autres, par exemple celles des premières pages du menu) dans resource/images

LANCER VOTRE GALERIE :
Vous savez le faire, il suffit de double cliquer sur le fichier index.html et votre galerie va s'ouvrir dans votre navigateur préféré !

RETRAITS DE LIGNE :
C'est le marqueur <br> qui va vous permettre de faire un "retour à la ligne". Placez le dans la zone de texte dans la colonne de droite, avec un espace avant et après, puis faites "Enter".
Maintenant, il y a une façon assez simple d'effectuer ces "retraits de ligne" c'est d'ouvrir la page qui contient ce texte dans un éditeur de texte HTML.
Evidement, si vous avez "Dreamweaver", la "Rolls" des éditeurs, c'est le top, sinon, sans aller chercher loin, ouvrez votre fichier, par exemple "contact.html dans votre bon vieux WinWord ! Vous pourrez à ce moment là insérer vos retraits de ligne et corriger les fautes d'ortographe. Dans l'aide vidéo de l'auteur il explique la formule à taper, mais c'est difficilement compréhensible et encore moins visible.


BONUS ! d

Comme vous ètes arrivé jusqu'ici, pour vous récompenser je vous donne une solution pour "justifier" votre texte ! Si vous le désirez, parce que il y en a qui décrient cette option ! Moi j'aime bien. Enfin, "C'est vous qui voyez" comme dirait l'autre...
Voici comment faire, dans la fenêtre de texte qui se trouve à droite, tapez votre texte en commençant et en finissant par : (n'oublier pas un espace après et avant).

<p align="justify"> .....Votre texte..... </p>

NB : pour ceux qui pratique le HTML une info concernant ces balises : Une fois saisie il faut placer le paragraphe hors du champ des attributs de style du thème en utilisant la commande "Ignorer le format" du menu Format. Votre texte, en mode édition, doit être surligné en rose pour signaler cette option.

Pour ceux qui connaissent un peu le code source HTML, vous pouvez également utiliser d'autres balises. Vous pourrez aussi modifier vos pages, un exemple ci-dessous :

SECOND BONUS ! d

Vous avez noté que quand vous ouvrez une page du Menu, par exemple la page "Accueil" la photo d'illustration est la première photo de la première galerie. Il serait bien d'avoir pour chaque page du Menu une photo différente n'est-ce pas ? C'est assez facile et voici comment procéder :
Status : Votre galerie est terminée et vous l'avez exportée.
1 - Préparer la photo que vous voulez disposer dans la page "Accueil" par exemple, et vous allez lui donner les mêmes hauteur et largeur que les photos qui se trouvent dans le répertoire "large".
2 - Copier cette photo dans le répertoire "large"
3 - Ouvrir le fichier "index.html" dans un éditeur HTML (Winword par exemple ou Dreamweaver) en mode "Code" et non pas en mode "Création".
4 - Repérer la zone de votre texte d'accueil (il est écrit en noir entre des balises multicolores) et dans les lignes qui suivent, recherchez une ligne (ligne N°49 ou dans ces eaux là) rechercher donc une ligne qui ressemble à ça :
<div id="aboutleft"><img src="large/amf_2013.jpg" alt="description de l'image" title="description de l'image" /></div>
5 - Dans le libellé de cette ligne vous avez trouver : <img src="large/amf_2013.jpg"....</div>
6 - Dans VOTRE galerie le nom de cette image source est celui de la première photo de votre galerie. Il vous suffit maintenant de remplacer le nom de cette photo par le nom de la photo que vous avez préparée et qui se trouve déjà dans le répertoire "large".
NB : Dans mon exemple, le nom de la photo préparée pour ma page d'accueil est : amf_2013.jpg


Une autre astuce ? OK, c'est mon jour de bonté... (ça fait trop, je sais...)

Dans votre texte qui se trouve soit sur la page "Accueil" ou sur la page " Contact", vous aurez peut-être envie de créer un lien sur un mot qui le compose. Rien n'est prévu pour ça dans le paramètrage automatique, mais maintenant que vous êtes presque un expert en HTML :-) il va vous être facile de le faire... En suivant les instructions ci-dessous.
Vous avez simplement besoin d'un éditeur HTML (comme Word/Document html) et bien sûr de l'adresse du lien que vous voulez insérer.
Ouvrez donc votre page avec le texte dans lequel sur un (ou +) mot vous allez créer un lien, et repérez le mot. Comme exemple je vais prendre cette phase dans le texte :
.../...Il s'agit d'un Plug-In de Lightroom, LR/Mogrify2 très pratique.../...
- Le lien que je vais insérer sera sur le mot "LR/Mogrify2"
- L'adresse sera : http://photographers-toolbox.com/products/lrmogrify2.php
Maintenant regardez la ligne en dessous de ce paragraphe, elle n'a pas de retrait de ligne, et regardez ce qui est souligné, c'est ce qu'il y a à rajouter pour créer votre lien. Entre les premières balises <a.......</a> vous avez l'adresse du lien + le mot choisi + la couleur de ce mot, en l'occurrence bleu.
Ne cherchez pas plus loin, il vous suffit de remplacer l'adresse du lien par la votre et le mot qui va servir de départ pour le lien.
NB : Vous avez vu qu'il y a une balise "couleur" pour le bleu. En effet, il faut que votre mot soit en bleu, la couleur du texte hyperlien.

Il s'agit d'un Plug-In de Lightroom, <a href="http://photographers-toolbox.com/products/lrmogrify2.php"><FONT color="blue">LR/Mogrify2</FONT></a> très pratique.

Il y a une autre façon un peu plus "orthodoxe" de faire :
Dans votre éditeur HTML, surlignez le mot sur lequel vous voulez appliquer le lien. Allez chercher "Créer un hyperlien" et cliquez dessus, inscrivez l'adresse du lien et faites OK !
(Dans Dreamweaver c'est menu "Insertion/Hyperlien") <<<< Version d'évaluation disponible !
Un petit "hic" c'est que votre mot ne sera pas en bleu. (Dans la plupart des cas le mot s'inscrit en bleu automatiquement, pas ici) Donc vous allez rajouter de part et d'autre de votre mot ces deux balises :
<FONT color="blue">...votre mot...</FONT>


------------      F  I  N      D  E     L ' A  I  D  E      ------------


Mon avis sur cette galerie :

Facile à mettre en oeuvre, elle reste paramétrée pour les galerie suivantes, elle est simple, et le visiteur de votre galerie s'y retrouvera facilement, quel que soit son écran, et même sur un Ipad. Je devrais dire "le visiteur de vos galeries" car sans difficultés il est possible d'installer une multitude de galeries !
Nous pouvons regretter l'impossibilité de mettre une musique de fond. Je n'ai pas trouvé non plus la possibilité de mettre une légende sous les photos. (si vous avez l'astuce faites-le moi savoir)
Pour combler ce manque, j'utilise Mogrify, un "Plug-In" pour Lightroom (compatible avec les versions 2, 3, 4 et 5) il permet de créer des cadres complexes et multicolores ainsi que l'affichage des EXIFs et autres annotations commentaires et "Copyright", il n'est pas cher parce que l'on donne ce que l'on veut. Il y a un minimum, mais c'est "peanuts" !

Un autre soft (en anglais) de création de galerie très complet que j'aime beaucoup c'est JuiceBox Builder-pro, pour du HTML5, ce n'est pas un "Plug-in" de Lightroom. Il s'agit d'une application Adobe AIR et ça tourne sous Windows et Mac OS. Il y a le son et la possibilité d'insérer des commentaires écrits pour chaque photo ainsi que leurs EXIFs. Si vous voulez voir un exemple, demandez-le moi, je vous enverrais le lien, en attendant leur site est ici.

Me contacter

FIN