[Résolu] Faire une galerie sous Linux (comme avec lightroom)

[manu]

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).

[pascal]

> 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

[manu]

Yep! Done...

[pascal]

Et c'est corrigé

[aurelienpierre]

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.

[Ngux]

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.

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/)...

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.

[pascal]

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;
}

[Ngux]

Remplace les éléments suivant dans le CSS et tu as 4 vignettes par ligne. J'ai mis quelques commentaires pour aider à changer.

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 \*//*/
* html .page a {
   display: block;
}
* html .page a span {
   display: inline-block;
   height: 100%;
   width: 1px;
}
/**/


.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;
}

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 \*//*/
* html .page a {
   display: block;
}
* html .page a span {
   display: inline-block;
   height: 100%;
   width: 1px;
}
/**/


.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;
}

[pascal]

Le problème que ' dans le nom des fichiers d'une galerie Web est corrigé dans la version 2.4.1.

[manu]

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é !