Piwigo.org

Eric · 2011-09-07 18:46:06

Re-moi ^^

Un petit truc un peu plus gênant que mon dernier post ([Forum, topic 20870] [2.3.0RC1] Manque une traduction) : Les thèmes par défaut ont été quelque peu revus et la personnalisation des CSS ne semble pas fonctionner.

Par exemple, sur ma galerie de test, j'ai choisi de générer des miniatures en 150 x 150 px au lieu des 128 x 128 par défaut. Du coup, les miniatures débordent.
Le config_default.inc.php ne présente plus les options $conf['tn_width'] et $conf['tn_height'] qui, je suppose, sont inscrites en BDD. Pour le thème Sylvia par défaut et via Local Files Editor, j'ai ajouté ceci comme modification de CSS :

Code:

/* thumbnail wrap size */
.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}
#comments .thumbnailCategory div.illustration { 
  width:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

Je m'étonne d'ailleurs de ne voir que la clause "width" et pas "height" (normal ?). Et cela ne résout pas le pb de débordement des miniatures. En jetant un oeil dans le "theme.css" de Sylvia, je n'ai pas trouvé d'autres réglages possibles. Idem pour les deux autres thèmes standards...

flop25 · 2011-09-07 21:29:09

je pense que les thèmes par défaut devraient avoir des max-width et height, vu qu'ils ne supportent pas audelà de 150 environ

plg · 2011-09-07 21:31:41

Ce sujet m'inquiète un peu... je ne comprends pas grand chose à vos explications, il faut que je fasse un test.

Eric · 2011-09-09 17:48:25

C'est bon, j'ai trouvé la clause CSS à ajouter dans les fichiers locaux pour adapter en fonction de la taille des miniatures (ici 150px) :

Code:

.thumbnailCategory {
        height: 155px !important; /* Optimal : Thumbnail width + 5px */
}

Bien entendu, les clauses pour le wrap restent valables et doivent aussi être adaptées en conséquence :

Code:

.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}
#comments .thumbnailCategory div.illustration { 
  width:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

Eric · 2011-09-09 17:57:44

Par contre, il reste encore un problème pour adapter le <span class="wrap2">. Si j'attribue une clause width=155px, rien ne se passe. Le cadre ne se redimensionne pas...

Le CSS n'étant pas ma tasse de thé, je continue mes recherches. ;-)

Eric · 2011-09-09 18:45:14

Cette fois c'est la bonne ! Je reprends depuis le début :

Pour adapter l'affichage des miniatures en fonction de leur taille, il faut :

- Pour Sylvia

Code:

/* thumbnail wrap size */
.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}
#comments .thumbnailCategory div.illustration { 
  height:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

.thumbnailCategory {
        height: 185px !important; /* Optimal : Thumbnail height + 35px */
}

.thumbnails .wrap1 {
        width: 155px; /* Optimal : Thumbnail width + 35px */
}

.thumbnails .wrap2 {
        width: 150px; /* Optimal : Thumbnail width */
}

- Pour Clear et Dark

Code:

/* thumbnail wrap size */
.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}

#comments .thumbnailCategory div.illustration { 
  width:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

.thumbnailCategory {
        height: 155px !important; /* Optimal : Thumbnail height + 5px */
}

.thumbnails .wrap1 {
        width: 155px; /* Optimal : Thumbnail width + 5px */
}

.thumbnails .wrap2 {
        width: 150px; /* Optimal : Thumbnail width */
}

Gotcha · 2011-09-10 10:23:24

Merci Eric. Ce sera ajouté dans le wiki de la v2.3 ;-)

Eric · 2011-09-12 22:16:54

Petites améliorations des CSS donnés précédemment (correction d'un problème de centrage des miniatures et des légendes) :

Pour Sylvia

Code:

/* thumbnail wrap size */
.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}
#comments .thumbnailCategory div.illustration { 
  height:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

.thumbnailCategory {
        height: 185px !important; /* Optimal : Thumbnail width + 35px */
}

.thumbnails SPAN, .thumbnails .wrap2 A, .thumbnails LABEL, .thumbnailCategory DIV.illustration {
    width: 150px; /* Optimal : Thumbnail width */
}

.thumbnails .wrap1 {
        width: 155px; /* Optimal : Thumbnail width + 5px */
}

.thumbnails .wrap2 {
        width: 150px; /* Optimal : Thumbnail width */
        height: 155px; /* Optimal : Thumbnail height + 5px */
}

Pour Dark et Clear

Code:

/* thumbnail wrap size */
.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}

#comments .thumbnailCategory div.illustration { 
  width:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

.thumbnailCategory {
        height: 155px !important; /* Optimal : Thumbnail width + 5px */
}

.thumbnails SPAN, .thumbnails .wrap2 A, .thumbnails LABEL, .thumbnailCategory DIV.illustration {
    width: 150px; /* Optimal : Thumbnail width */
}

.thumbnails .wrap1 {
        width: 155px; /* Optimal : Thumbnail height + 5px */
}

.thumbnails .wrap2 {
        width: 150px; /* Optimal : Thumbnail width */
        height: 155px; /* Optimal : Thumbnail height + 5px */
}

Gotcha · 2011-09-13 10:52:18

Pierrick m'a fait tilter hier.
La v2.3 va donc "casser" le CSS et surtout la personnalisation pour certains points... :-(

Je trouve ça vraiment dommageable. Si seulement on avait un système d'adaptation automatique de la taille des miniature à proposer en contre partie...
[Bugtracker] ticket 1560

Eric · 2011-09-13 21:25:49

Gotcha a écrit:
Pierrick m'a fait tilter hier.
La v2.3 va donc "casser" le CSS et surtout la personnalisation pour certains points... :-(

??

Tu peux développer, stp ? Dans quelle discussion a-t-il été question de çà ?

Sinon, je plussoie pour un système "auto-géré" pour l'affichage des miniatures selon la taille que le webmaster aura définie.

Gotcha · 2011-09-13 23:26:52

Eric a écrit:
Tu peux développer, stp ? Dans quelle discussion a-t-il été question de çà ?

C'était par messagerie.

Je n'ai pas encore testé la RC.
Ce que je voulais dire Eric, c'est que si les règles CSS actuelles pour gérer les dimensions (affichage) des miniatures ne sont plus reconnues en v2.3 il va y en avoir un certain nombre de webmasters mécontents.

flop25 · 2011-09-13 23:47:05

hum faudrait éplucher les changelog : à part les nettoyages pour codes surchargés/inutiles je n'ai pas vu d'autres perturbations
Par contre je ne comprends pas : avant les miniatures trop grosses débordaient : en quoi ça change ? Tu peux expliquer éric l'avant/après ?

Sinon pour la taille de miniatures, c'est assez complexe comme sujet car cela peut être croisé avec la génération de différente taille pour une photo -donc géré par piwigo, mais avec les options cotés thèmes-, ou alors chaque thème gère la taille voulue -donc coté thème uniquement, via css ou js-.
Parce que le redimensionnement des miniatures n'est pas un problème actuellement : il faut juste que les thèmes produisent un code css adapté aux miniatures. Sur mes thèmes, les miniatures sont soit à taille fixe (1-2 thème je crois), soit les miniatures trop petites sont générées (stripped columns), soit la taille s'adapte automatiquement via jquery (le reste).
Du coup quelle solution préféreriez vous pour les thèmes du core ?
-gestion multi taille par piwigo : piwigo génère une ou plusieurs taille et le thème demande quelle(s) taille(s) afficher
-gestion par le thème :
-- taille fixe affichage quelque soit la taille réelle des miniatures : la taille est en option dans le thème, l'utilisateur génère lui même les miniatures à la bonne taille ou pas
-- taille gérée dynamiquement via juqery : la plus grosse décidant de la taille des block miniatures sur mes thèmes
-- régénération auto des miniatures (à la façon du batch manager) à la bonne taille lorsque l'option de la taille des miniatures est changée dans la config de thème

->j'ai créé un nouveau fil de discussion : [Forum, post 176659 by flop25 in topic 20913] Taille des miniatures : comment gérer ? Donner votre avis

Dernière modification par flop25 (2011-09-14 19:47:36)

Eric · 2011-09-14 18:44:57

flop25 a écrit:
Par contre je ne comprends pas : avant les miniatures trop grosses débordaient : en quoi ça change ? Tu peux expliquer éric l'avant/après ?

Oui, les miniatures plus grandes que celles prévues en standard ont toujours débordé et c'est normal. Le problème c'est l'adaptation des CSS selon le thème (ici je ne parle que des thèmes livrés en standard) qui a évolué.
Je teste la RC2 (actuellement) en affectant les paramètres que j'utilise sur mes galeries 2.2.5. Soit des miniatures en 150x150 px et une adaptation des CSS en conséquence. Mais cette adaptation en 2.2.5 n'est plus complètement valable en 2.3.0RC. D'où ce topic où je donne les nouvelles règles d'adaptation à prendre ne compte dans l'avenir.

Avant (ou maintenant) en 2.2.5, pour Sylvia par exemple, il suffisait de mettre ceci via Local Files Editor :

Code:

#the_page .content div.thumbnailCategory div.description {
  height:165px;
}

#the_page .content div.thumbnailCategory div.description .text {
  height:122px !important;
}

Demain, en 2.3.0, il faudra mettre ceci pour le même résultat :

Code:

/* thumbnail wrap size */
.content .thumbnailCategory div.illustration { 
  width:190px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
}
#comments .thumbnailCategory div.illustration { 
  height:245px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
}

.thumbnailCategory {
        height: 185px !important; /* Optimal : Thumbnail width + 35px */
}

.thumbnails SPAN, .thumbnails .wrap2 A, .thumbnails LABEL, .thumbnailCategory DIV.illustration {
    width: 150px; /* Optimal : Thumbnail width */
}

.thumbnails .wrap1 {
        width: 155px; /* Optimal : Thumbnail width + 5px */
}

.thumbnails .wrap2 {
        width: 150px; /* Optimal : Thumbnail width */
        height: 155px; /* Optimal : Thumbnail height + 5px */
}

@Gotcha : Le "mécontentement" est tout relatif puisque la solution est donnée ici. Une petite adaptation rapide selon la configuration de TN choisie et le tour est joué ;-)

flop25 · 2011-09-14 18:59:48

Merci bien éric :)
là c’est clair

"C'est normal que ça déborde" ... hum pas trop d'accord Sinon pas d'avis de réponse pour ma question ?

Je pense que c'est fait exprès mais les vignettes des albums sont paramétrées plus grandes que les miniatures avec ton code. Je le précise juste pour quiconque lira ça

Eric · 2011-09-14 19:26:03

flop25 a écrit:
"C'est normal que ça déborde" ... hum pas trop d'accord Sinon pas d'avis de réponse pour ma question ?

J'y venais (le temps de bien lire et comprendre ^^):

flop25 a écrit:
Du coup quelle solution préféreriez vous pour les thèmes du core ?
-gestion multi taille par piwigo : piwigo génère une ou plusieurs taille et le thème demande quelle(s) taille(s) afficher

Cette approche permettrait de globaliser l'affichage quelque soit le thème. Donc une standardisation des fonctions des thèmes -> Moins de tracas pour les développeurs et les utilisateurs ?

Perso, je vote pour.

flop25 a écrit:
-gestion par le thème :
-- taille fixe affichage quelque soit la taille réelle des miniatures : la taille est en option dans le thème, l'utilisateur génère lui même les miniatures à la bonne taille ou pas
-- taille gérée dynamiquement via juqery : la plus grosse décidant de la taille des block miniatures sur mes thèmes
-- régénération auto des miniatures (à la façon du batch manager) à la bonne taille lorsque l'option de la taille des miniatures est changée dans la config de thème

Me parait un peu lourd. Les développeurs/"personnaliseurs" de thèmes pourraient galérer, non ? Je préfère la première solution.

flop25 a écrit:
Je pense que c'est fait exprès mais les vignettes des albums sont paramétrées plus grandes que les miniatures avec ton code. Je le précise juste pour quiconque lira ça

Oui car il faut tenir compte aussi des cadres. Si on utilise la taille exacte des miniatures, c'est assez moche. J'ai donc indiqué ce qui me semble les cotes les plus optimum esthétiquement. Après, ce n'est pas une règle indélébile ! On peut adapter selon ses gouts et envies ;-)

Piwigo.org

Annonce

#1 2011-09-07 18:46:06

[Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

Code:

#2 2011-09-07 21:29:09

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#3 2011-09-07 21:31:41

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#4 2011-09-09 17:48:25

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

Code:

Code:

#5 2011-09-09 17:57:44

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#6 2011-09-09 18:45:14

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

Code:

Code:

#7 2011-09-10 10:23:24

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#8 2011-09-12 22:16:54

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

Code:

Code:

#9 2011-09-13 10:52:18

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#10 2011-09-13 21:25:49

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

Gotcha a écrit:

#11 2011-09-13 23:26:52

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

Eric a écrit:

#12 2011-09-13 23:47:05

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#13 2011-09-14 18:44:57

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

flop25 a écrit:

Code:

Code:

#14 2011-09-14 18:59:48

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

#15 2011-09-14 19:26:03

Re: [Résolu] [2.3.0RC1] Adaptation des css pour les miniatures

flop25 a écrit:

flop25 a écrit:

flop25 a écrit:

flop25 a écrit:

Pied de page des forums