Bonjour,
Je suis en train de passer de Lightroom à Darktable avec beaucoup de plaisir et j’aimerais pouvoir faire une galerie de mes reportages comme Lightroom en propose. C’est très apprécié des clients pour visionner les images rapidement.
Quels logiciels connaissez-vous sous Linux qui proposent suffisamment de templates modifiables (sans marque type « propulsed by blabla ») pour faire une galerie web sobre et élégante en HTML (j’ai abandonné flash pour plein de raisons).
Merci
Bonjour,
en imaginant que ce soit au format web, le premier qui me vient à l’esprit c’est Piwigo, qui est indépendant de l’environnement.
Piwigo, il faut l’installer sur le site, ce n’est pas très souple. J’aurais aimé une appli qui fasse un simple dossier.
J’ai regardé http://gimpfr.org/contrib_photolabo.php mais les thèmes sont vraiment trop vieillots.
Pour donner un exemple de ce que je cherche voici une galerie faites avec Lightroom simple et jolie : http://voilierloick.fr/blog/CaboPolonio/
Cela fait plusieurs heures que je cherche et je ne trouve vraiment rien qui ait la souplesse et le coté classe de Lightroom dans ce domaine sous Linux… malheureusement. Au moins j’ai pas encore trouvé.
As-tu essayé l’export (directement depuis le module d’export) vers [galerie web]. Le modèle a été refait est est assez simple et beau je trouve.
Réfléchi quand-même Piwigo est vraiment puissant, gestion d’utilisateurs, de groupe des droits d’accès base de donnée tient à la charge, c’est libre.
Mon site est fait avec Piwigo, environ 2900 albums, environ 155.000 photos en haute résolution, plus d’1TB de données.
Vraiment un must pour de nombreuses années. Très personnalisable. Très facile à gérer déplacement d’album, changement des droits, etc…
Merci, tu as raison je vais creuser et voir ce qui est possible avec Piwigo.
Bonjour,
effectivement sauf erreur, Lightroom gère tout via un script Javascript inclus dans le dossier d’exportation.
Il y a aussi jAlbum, multi-OS ; tu fais tout sur ta machine puis tu mets en ligne. Le prix de la licence varie selon l’usage, commercial ou non.
Je l’utilisais quand il était gratuit, avant que Lightroom n’existe et que je connaisse rien du web et des CMS.
Oui j’ai aussi regardé mais il y a toujours ces pubs « powered by » dans les versions gratuites que j’aime pas trop. Je crois que je vais me lancer dans l’usine à gaz de Piwigo pour voir. Lviatour a raison, c’est sûrement un investissement intéressant pour l’avenir pour un photographe, ou bien carrément passer à un CMS…
Mais bref, le problème c’est que la réponse à ce topic semble bien être : Non, il n’y a rien d’aussi simple et pratique que les galerie LR sur Linux. Et c’est bien dommage.
Bonjour, as-tu considéré l’export « galerie Web » comme le suggère @Pascal ?
C’est très simple à mettre en œuvre et avec un CSS modifié une fois pour toute, tu peux assez facilement faire quelque chose de ressemblant à l’exemple que tu indiques ( http://voilierloick.fr/blog/CaboPolonio/)…
Bonjour,
c’est en effet une base de départ intéressante. Peut-on trouver des modèles différents quelque part ?
On peut se les faire, un peu comme les DTstyles, il s’agit juste de CSS à adapter et à partager.
En revanche, j’ai constaté que s’il y a une apostrophe dans les noms des fichiers photo, les miniatures ne peuvent pas être ouvertes… Il y a alors des erreurs dans le code HTML généré.
Je sais qu’on va me rétorquer qu’il faut pas de ces caractères, je lis ça depuis 30 ans… 
Après, ça manque de paramètres à l’export, les champs Titre et Description des métadata des photos sont prises en compte, mais on devrait pouvoir choisir d’autres variable, comme l’auteur, la licence, … dans la page des miniatures. Et idem et par forcément les mêmes dans les swipes (affichages grands formats).
Je sais qu’on va me rétorquer qu’il faut pas de ces caractères, je lis ça depuis 30 ans…
Non, je dirais plus de faire une rapport de bug sur le redmine pour que la correction soit faite 
Yep! Done… 
Et c’est corrigé
sinon il y a aussi un script lua qui permet d’exporter des planches contacts numériques avec titre, nom de fichier, etc. ça ressort du PDF, jpg, pg ou tiff par contre.
Vraiment désolé, Pascal, je n’avais pas vu passer ton post, merci Manu pour ce rappel. J’ai fait durer ce topic pour rien 
(bien que nous avons plein de réponse utiles pour les cas plus complexes).
Cette exportation est en effet tout à fait suffisante pour bien des cas. Moi aussi je la trouve jolie. J’enlèverais bien les bandes gris sombres autour des thumbnails mais je suppose que ce n’est pas trop difficile sur le css.
Quelques paramétrages sur le nombres de colonnes seraient bienvenues car toucher à la structures doit être plus difficile sur le css? non? (j’y connais pas grand chose).
En tout cas, pour moi cette option suffit pour mettre le sujet en [Résolu]. Elle permet tout à fait de présenter correctement un reportage.
Merci.
Remplace les éléments suivant dans le CSS et tu as 4 vignettes par ligne. J’ai mis quelques commentaires pour aider à changer.
[code].title{
margin-left: auto;
margin-right: auto;
margin-top: 50pt;
margin-bottom: -5pt;
background-color:#5a5858;
color:#d2d0d0;
padding: 0pt;
font-weight:bold;
font-size:20pt;
width: 900px; /* width of page (below) + padding (below 20px). /
}
.page{
background-color:#d2d0d0;
padding: 20px;
padding-right: 0px;
padding-bottom: 40pt;
margin-left: auto;
margin-right: auto;
margin-top: 0pt;
margin-bottom: 0pt;
/ width 220 for each thumbs, 3 on line => 660, 4 => 880 */
width: 880px;
counter-reset: section;
border-style:solid;
border-width:1px;
border-color:#222222;
}
.footer{
background-image:none;
background-color:#5a5858;
padding: 0pt;
text-align:right;
margin-left: auto;
margin-right: auto;
margin-top: 5pt;
margin-bottom: 20pt;
width: 692px;
}
.dia img {
align-self: center;
}
.page div {
height:250px;
float:left;
max-width:200px;
margin:0px;
margin-right:20px;
margin-bottom:30px;
}
.page .dia{
background-color:#5a5858;
margin-right:0pt;
margin-bottom:10pt;
margin-top:4px;
width:200px;
height:200px;
border-style:solid;
border-width:1px;
border-color:#222222;
display:table-cell;
vertical-align:middle;
text-align:center;
display: flex;
justify-content: center;
}
[/code]
MERCI ! Ca c’est super !.. mais je ne dois pas avoir fait les choses comme il faut car si la fenêtre gris-clair c’est bien élargie, je n’ai pas les images sur la 4eme colonne.
Voici mon css original puis en dessous celui ou j’ai inséré ton code
[code]a:link { font-weight:bold; font-style:normal; color:white; text-decoration:none; }
a:visited { font-weight:bold; font-style:normal; color:white; text-decoration:none; }
a:focus { font-weight:bold; font-style:normal; color:white; text-decoration:underline; }
a:hover { font-weight:bold; font-style:normal; color:#6a6868; text-decoration:none; }
body{
background-color:#5a5858;
font-family:trebuchet ms,bitstream vera sans,verdana,helvetica,arial,sans-serif; font-size: 8pt;
margin: 0;
padding: 0;
border: 0;
}
body.navbody{
font-family:trebuchet ms,bitstream vera sans,verdana,helvetica,arial,sans-serif; font-size: 8pt;
background-color:#d2d0d0;
margin: 0;
padding: 0;
border: 0;
}
.title{
margin-left: auto;
margin-right: auto;
margin-top: 50pt;
margin-bottom: -5pt;
background-color:#5a5858;
color:#d2d0d0;
padding: 0pt;
font-weight:bold;
font-size:20pt;
width: 746px; /* width of page + padding. */
}
.page{
background-color:#d2d0d0;
padding: 20pt;
padding-bottom: 40pt;
margin-left: auto;
margin-right: auto;
margin-top: 0pt;
margin-bottom: 0pt;
width: 692px;
counter-reset: section;
border-style:solid;
border-width:1px;
border-color:#222222;
}
.footer{
background-image:none;
background-color:#5a5858;
padding: 0pt;
text-align:right;
margin-left: auto;
margin-right: auto;
margin-top: 5pt;
margin-bottom: 20pt;
width: 692px;
}
.dia img {
align-self: center;
}
.page div {
height:250px;
float:left;
max-width:200px;
margin:0px;
margin-right:30px;
margin-bottom:30px;
}
.page .dia{
background-color:#5a5858;
margin-right:10pt;
margin-bottom:10pt;
margin-top:4px;
width:200px;
height:200px;
border-style:solid;
border-width:1px;
border-color:#222222;
display:table-cell;
vertical-align:middle;
text-align:center;
display: flex;
justify-content: center;
}
/* IE/Mac *//*/
.page .dia *{
max-width:200px;
max-height:200px;
border-style:none;
vertical-align:middle;
}
.headline{
position:relative;
margin-bottom:10pt;
margin-left:2em;
color:#6a6868;
vertical-align:text-top;
}
h1, h2{
/position:relative;/
margin-bottom:5pt;
color:#6a6868;
margin-top:4pt;
font-size:12pt;
text-align:left;
}
br{
margin-bottom:1em;
}
.text{
line-height:12pt;
margin-bottom:20pt;
}[/code]
et celui ou j’ai inséré ton code. Tu vois où cela coince ?
[code]a:link { font-weight:bold; font-style:normal; color:white; text-decoration:none; }
a:visited { font-weight:bold; font-style:normal; color:white; text-decoration:none; }
a:focus { font-weight:bold; font-style:normal; color:white; text-decoration:underline; }
a:hover { font-weight:bold; font-style:normal; color:#6a6868; text-decoration:none; }
body{
background-color:#5a5858;
font-family:trebuchet ms,bitstream vera sans,verdana,helvetica,arial,sans-serif; font-size: 8pt;
margin: 0;
padding: 0;
border: 0;
}
body.navbody{
font-family:trebuchet ms,bitstream vera sans,verdana,helvetica,arial,sans-serif; font-size: 8pt;
background-color:#d2d0d0;
margin: 0;
padding: 0;
border: 0;
}
.title{
margin-left: auto;
margin-right: auto;
margin-top: 50pt;
margin-bottom: -5pt;
background-color:#5a5858;
color:#d2d0d0;
padding: 0pt;
font-weight:bold;
font-size:20pt;
width: 900px; /* width of page (below) + padding (below 20px). /
}
.page{
background-color:#d2d0d0;
padding: 20px;
padding-right: 0px;
padding-bottom: 40pt;
margin-left: auto;
margin-right: auto;
margin-top: 0pt;
margin-bottom: 0pt;
/ width 220 for each thumbs, 3 on line => 660, 4 => 880 */
width: 880px;
counter-reset: section;
border-style:solid;
border-width:1px;
border-color:#222222;
}
.footer{
background-image:none;
background-color:#5a5858;
padding: 0pt;
text-align:right;
margin-left: auto;
margin-right: auto;
margin-top: 5pt;
margin-bottom: 20pt;
width: 692px;
}
.dia img {
align-self: center;
}
.page div {
height:250px;
float:left;
max-width:200px;
margin:0px;
margin-right:20px;
margin-bottom:30px;
}
.page .dia{
background-color:#5a5858;
margin-right:0pt;
margin-bottom:10pt;
margin-top:4px;
width:200px;
height:200px;
border-style:solid;
border-width:1px;
border-color:#222222;
display:table-cell;
vertical-align:middle;
text-align:center;
display: flex;
justify-content: center;
}
;
font-size:20pt;
width: 746px; /* width of page + padding. */
}
.page{
background-color:#d2d0d0;
padding: 20pt;
padding-bottom: 40pt;
margin-left: auto;
margin-right: auto;
margin-top: 0pt;
margin-bottom: 0pt;
width: 692px;
counter-reset: section;
border-style:solid;
border-width:1px;
border-color:#222222;
}
.footer{
background-image:none;
background-color:#5a5858;
padding: 0pt;
text-align:right;
margin-left: auto;
margin-right: auto;
margin-top: 5pt;
margin-bottom: 20pt;
width: 692px;
}
.dia img {
align-self: center;
}
.page div {
height:250px;
float:left;
max-width:200px;
margin:0px;
margin-right:30px;
margin-bottom:30px;
}
.page .dia{
background-color:#5a5858;
margin-right:10pt;
margin-bottom:10pt;
margin-top:4px;
width:200px;
height:200px;
border-style:solid;
border-width:1px;
border-color:#222222;
display:table-cell;
vertical-align:middle;
text-align:center;
display: flex;
justify-content: center;
}
/* IE/Mac *//*/
.page .dia *{
max-width:200px;
max-height:200px;
border-style:none;
vertical-align:middle;
}
.headline{
position:relative;
margin-bottom:10pt;
margin-left:2em;
color:#6a6868;
vertical-align:text-top;
}
h1, h2{
/position:relative;/
margin-bottom:5pt;
color:#6a6868;
margin-top:4pt;
font-size:12pt;
text-align:left;
}
br{
margin-bottom:1em;
}
.text{
line-height:12pt;
margin-bottom:20pt;
}[/code]
Le problème que ’ dans le nom des fichiers d’une galerie Web est corrigé dans la version 2.4.1.
Merci @Pascal pour ta réactivité !