Nouveau thème cherche beta testeur / debugeur

[RedMorgan]

Bonjour à tous

Après de longues heures de boulot, elles étaient longues mais je ne les ai pas vu passer, je suis heureux de vous présenter mon thème en version BETA 1. Il s'appelle pour le moment "optimize photosize". (désolé il n'y a pas encore de galerie online équipée du thème... A qui le premier ?)


REMERCIEMENT

Tout d'abord, je tiens à remercier la communauté coppermine en général et la communauté francophone en particulier.
Je tiens également à remercier particulièrement, Pascal YAP, François Keller et Elwood J. Blues, pour leurs réponses au centaines de questions que je me suis posé lors de la réalisation de ce thème, et auquel ils m'ont répondu de manière indirect, grâce à leur nombreux posts sur ce forum...
Je tiens à signaler que le post qui m'a permit de venir à bout de la réalisation de ce thème et qui au final aura répondu à toutes mes attentes est celui-ci. http://www.gnurou.org/writing/smartquestionsfr. Merci à François Keller de me l'avoir fait découvrir en version française... Ce fut mon roadbook !


POURQUOI CE THÈME

Intéressé par coppermine depuis longtemps, j'ai fini par le tester il y a quelques semaines. Malheureusement, je n'ai pas trouvé mon bonheur dans les thèmes que j'ai pu tester de ci de là...
Je me suis donc plongé dans la création d'un thème perso pour coppermine.

Le reproche que je fesais aux thèmes que j'avais visionné était le manque de place sur la page pour avoir une photo la plus grande possible sans avoir à scroller pour la visionner ou accéder au film strip. En effet par défaut dans coppermine tous les éléments s'empilent les uns sur les autres et finissent par prendre de la hauteur...
Je navigue en 1280x1024, je souhaitais donc pouvoir visionner des images intermédiaires (bordure comprise) en 1024x682 (format 2/3 donc) sans scroll.

QUELQUES ÉLÉMENTS D'INFORMATIONS À PROPOS DE CE THÈME

Ce thème prend tout son sens avec des images intermédiaires de grandes tailles, supérieures à 600px de hauteur

Il s'inspire de plusieurs thèmes, je ne saurais vous les citer tous, mais des boutons proviennent de meltingfilm_left et du code d'un peu partout.

Les éléments de la page ont donc été réorganisés de la façon suivante, afin d'optimiser la place disponible pour la photo.

- Le bandeau/header a été réduit à 50 pixels. Il contient entre autre le choix des thèmes, le menu admin.

- Le chemin d'accès à la galerie (breadcrumb) a été intégré dans le bandeau. Il faut donc désactiver le breadcrumb dans le token galerie. Ceci se fait dans la configuration de coppermine : "configuration - Affichage de la liste des albums - Le contenu de la page principale" : enlever breadcrumb/ de la liste des éléments à afficher. C'est un peu gênant car on perd le breadcrumb pour les autres thèmes...

- Le menu a été déplacé à gauche.

- le filmstrip (négatif), qui apparait dans la page displayimage.php a été placé sous le menu à gauche. Je vous conseille de le limiter à trois images afin de le voir sans scrool dans un maximum de résolution. C'est paramétrable dans "configuration - vue des images - nombre de vignettes dans le négatif" : 3.

- le choix de la langue est placé en bas de page.

- Pour profiter pleinement du thème, il faut installer cpmfetch. La fonction theme_main_menu() a été modifiée pour afficher une image au hasard (grâce à cmpfetch) en dessous du menu, afin d'agrémenter les pages autre que la page displayimage.php. cpmfetch doit être installé dans le dossier cpmfetch à la racine de coppermine, mais est optionnel, l'image au hasard ne s'affichera pas si vous n'avez pas installé cpmfetch.


RÉSOLUTION DES PHOTOS - ATTENTION UTILISATION DE JAVASCRIPT POUR AFFICHER LES PHOTOS INTERMÉDIAIRES...
Le thème adapte la hauteur de la photo en fonction de la hauteur de la résolution de l'écran du visiteur.

- 1024 C'est la hauteur de résolution écran que j'ai pris comme point de départ, il y a encore peu de personnes qui utilisent des résolutions supérieures, et puis cela me parait un bon compromis entre taille et poids de l'image pour les images intermédiaires.
Pour avoir des images sans scroll, l'idéal est de définir dans les paramètres de coppermine :
"configuration - paramètres des images et vignettes "
* dimension maximale pour les vignettes : 100 (vous pouvez mettre moins, personnellement j'aime les grandes vignette, évitez de mettre plus)
* utiliser la dimension : hauteur
* largeur ou hauteur maximale pour une image/vidéo intermédiaire : 682
Avec ces paramètres, pour des images au format 2/3, et dans une résolution de 1280*1024, vous pouvez les avoir sans scroll en 1024x682 en paysage et en 454x682 en portrait (bordure comprise dans la résolution).

- Pour les résolutions supérieures, les images intermédiaires resteront par défaut à la hauteur maxi que vous avez défini dans coppermine, dans mon cas 682. Mais vous avez la possibilité d'autoriser l'étirement des images en allant modifier les paramètres de la fonction theme_html_picture(). Voir FAQ

- Pour les résolutions inférieures, votre navigateur affichera l'image intermédiaire mais réduite pour s'adapter à la page.

Les réglages par défaut sont dans le tableau ci-dessous. Ils sont différents d'une résolution à l'autre car plus la résolution est petite, et moins en régle générale on affiche de barre dans le navigateur...
L'objectif est de déterminer le nombre de pixel utilisé par ces différentes barres pour savoir combien il nous reste de place maximum pour afficher la photo.
Je parle en résolution verticale.
Ces chiffres sont complètement arbitraires, à vous de les changer si vous n'êtes pas d'accord, donnez moi SVP vos retour car je n'ai pas la possibilité, le temps de tester toutes les résolutions.

comprendre le tableau :
* résolution verticale - nombre de pixels vertical à enlever de la résolution verticale = reste pour l'image : résolution type : éléments de la fenêtre comptabilisé : explication

* 480 - 140 = 340 : (640x480 - 800x480) : en plein écran, sans barre personnelle, sans les onglets : Non ce n'est pas une résolution désuète. C'est le cas du eeepc 701 par exemple qui affiche 800*480. Je pars du principe que les utilisateurs de ce genre de résolution connaissent la touche F11 de leur navigateur qui supprime barre de titre, barre de menu, barres personnelles, on obtient donc environ 140 pixels utilisés en hauteur par les deux barres restantes, barre d'outil du navigateur et barre de tache de l'OS, plus le bandeau du site 50 pixels, et un peu de marge, plus les bordures, la place restant disponible est environ 480-140=340. 340 sera la hauteur d'une photo affichée sur un écran ayant une résolution de 640x480 ou 800x480. Vous pouvez modifier le nombre de pixel à enlever de la résolution, ici 140, dans la fonction theme_html_picture(), augmentez le, et la photo sera plus petite, diminuez le et la photo sera plus grande pour cette résolution d'écran. Notez qu'en 640x480, il nous manquera de la largeur...

* 600 - 280 = 320 : (800x600 - 1024x600) : sans barre personnelle sans les onglets : C'est le cas du eeepc 900 qui affiche 1024x600.

* 768 - 300 = 468 : (1024x768) : sans barre personnelle sans les onglets : Une résolution standard encore beaucoup utilisée pour les écrans 14", 15", voir 17".

* 800 - 300 = 470 : (1280x800) : avec une barre personnelle sans les onglets : C'est la résolution des portables 15.4", à partir de cette résolution on peut raisonnablement afficher en permanence une barre personnelle.

* 864 - 300 = 564 : (1152x864) : avec barre personnelle sans les onglets : une résolution, pour les écrans 15" et 17".

* 900 - 240 = 630 : (1440x900) : avec barre personnelle sans les onglets : C'est la résolution des portables 17".

* 960 - 340 = 620 : (1280x960) : avec une barre personnelle et onglets : à partir de cette résolution on peut raisonnablement afficher en permanence les onglets.

* au delà - 365 = 659 : (1280x1024 - 1600x1200 - ...) : avec une ou plusieurs barres personnelles et onglets : Par défaut l'image ne grandira plus si vous augmentez la résolution écran.

Vous êtes tout à fait libre de choisir une hauteur différente pour vos images intermédiaires (paramètre coppermine), plus grande ou plus petite.
Vous êtes également libre de modifier la taille des images en fonction des résolutions (changer le "nombre de pixel vertical à enlever de la résolution verticale"), voir rajouter d'autres résolutions (connaissance minimum en programmation pour rajouter une condition dans une fonction) voir FAQ.


RESTE À FAIRE
- débugger
- commenter plus largement et plus proprement le code et en anglais
- mettre le film strip au dessus du menu ou réduire la taille des thumbnails du filmstrip, pour les petites résolutions
- mettre une bordure sur l'image de présentation de l'album
- une version sans javascript


BUG CONNU
- Le code javascript permettant l'ouverture de l'image taille réelle à partir de l'image intermédiaire ne fonctionne pas. solution : pas pour le moment
- Problème de taille de la bordure dans l'affichage de l'image, bordure de gauche et de droite plus grande ou plus petite que les bordures du haut et du bas (dépend des navigateurs), c'est du au code javascript inscrit dans la cellule permettant l'affichage de l'image. décalage Léger pour firefox, important pour opéra. solution : Désactiver les bordures voir FAQ
- Lors du lancement d'un slide show, la taille des images est déterminée par la première photo. Si elle est de taille inférieure, à ce que la résolution permet, les autres photos seront aussi afficher en plus petite taille. Solution : pas pour le moment (évitez de mélanger des photos de tailles différentes dans un même album).
- Opéra : problème de bordure lors du défilement d'un slide show avec des images de tailles différentes. Solution : pas pour le moment (évitez de mélanger des photos de tailles différentes dans un même album).
- cliquer sur l'image au hasard provoque une erreur : Not Found
- Safari non testé

Le code a été partiellement débugué par mes soins et doit être "relativement" propre, mais je ne garantis rien.


FAQ
* Comment enlever la bordure blanche ?
Il suffit d'éditer le fichier style.css, et de mettre 0px à l'attribut margin des styles, .image pour les thumbnails, et .image_big pour les images intermédiaires.

* Comment enlever l'ombre des photos ?
- version simple : supprimer les images cadre_X.gif du dossier images du thème.
- version propre : éditer thème.php, et enlever le code qui crée le tableau d'ombrage.
function theme_main_menu : pour image au hasard
$template_film_strip : pour le film strip
$template_thumbnail_view : pour les thumbnails
$template_display_media : pour l'affichage de l'image en taille intermédiaire

* Comment permettre l'agrandissement des images intermédiaires plus petites que la résolution du navigateur le permet ?
dans theme.php dans function theme_html_picture(), dans la section de code sous le commentaire : /*javascript permettant de modifier la taille de l'image en fonction de la résolution, si l'image intermédiaire est l'image la plus grande disponible*/ enlever toutes les conditions commençant par "if(screen.height-".$resXXX.">".$taillemax.")" (n'oubliez pas pas le } de fin de condition)

* comment modifier le nombre de pixel enlevé à la résolution écran pour déterminer la taille de l'image ?
dans le fichier theme.php, dans function theme_html_picture() et dans la function theme_slideshow() sous le commentaire "NOMBRE DE PIXEL À ENLEVER POUR DÉTERMINER LA RÉSOLUTION DE LA PHOTO", vous trouverez les variables à modifier en fonction de la résolution
$res480='140';
$res600='280';
$res768='300';
$res800='330';
$res864='300';
$res900='270';
$res960='370';
$res1024='365';


Toutes les critiques sont les bienvenue, bonnes comme mauvaises.

Je souhaiterai également un retour sur le nom du thème : nul, bof, sympa, ne veut rien dire...

Enjoy...

[François Keller]

eh ben, rien que ça 

on va tester ça de ce pas...
en tout cas, le post de présentation est plus que clair et complet.

P.S merci pour tous les compliments à l'équipe de modération du forum. ça nous va droit au cœur.

[Pascal YAP]

   WoW 

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fexpo.pays-dignois.com%2Fimages%2Fapplaus.gif&hash=1778afe4934cae9a9316b387b34f9d6fac08cc4f)

Et bien autant d'arguments, ça donne envie de tester ce nouveau Thème !
FélicitationS pour votre topo, et merci pour le petit mot d'encouragement 

PYAP

[Pascal YAP]

Il existe dans THEME.PHP un appel à CpmFetch.
Si il s'avère que le dossier contenant CpmFetch ne porte pas le nom /cpmfetch/, le script provoque alors une FATAL ERROR bad path to cpmfetch !

[RedMorgan]

Je suis surpris de l'erreur.
Chez moi si le dossier cpmfetch est inexistant, il se contente de ne pas faire d'appel à la fonction...
Test de la présence du dossier ligne 587
if(is_dir(cpmfetch)){...}
Peux tu me donner la version php que tu utilises, et sais tu s'il y a des restrictions pour certaines fonctions chez ton hébergeur ?

Mes paramètres :
PHP Version 5.2.3
En local

[RedMorgan]

Sinon par hasard aurais tu un dossier qui s'appelle cpmfetch à la racine de coppermine, et si cpmfetch est bien installé, à la ligne 587 dans la fonction if(is_dir(cpmfetch)) remplaces cpmfetch par le nom du dossier qui contient cpmfetch.

[François Keller]

alors, premiers tests de mon côté (en local) avec cpg1.4.18, pas de cpmfeth installé:
avec firefox 3:
* je ne suis pas très fan du curseur en forme de croix, je touve que c'est moins précis (mais les gouts et les couleurs..)
* j'ai un problème avec l'affichage des images intermédiaires qui chez moi sont réglées sur 400 (réglage par défaut de coppermine). Les images sont agrandies et donc pas belles car pixellisées. Ne serait il pas préférable de tester la taille des images existantes et de ne pas les agrandir si elles sont plus petites que le réglage du theme ( je ne sais pas si je suis clair là). De plus l'affichage dépasse la largeur de l'écran (17 pouces résolution 1440 x 900)
*problème d'affichage des textes dans les boutons du menu de gestion des albums (pb de css à priori) le texte semble blanc sur fond blanc.
*problème (ou pas si c'est voulu) avec le hover sur les vignettes des albums ( et sur le vignettes en général) léger changement de taille qui déplace un peu l'affichage général (pas très agréable à mon gout)
*l'obligation de désactiver le breadcrumb dans la config n'est pas obligatoirement la meilleure solution, (peut être voir à forcer ça dans le fichier theme.php si c'est possible(il me semble que ça l'est)).
avec IE
*problème d'affichage de l'ombre des vignettes (en particulier du filmstrip)

voilà un premier tour d'horizon (je n'ai pas du tout regardé le code ) sinon, le graphique est agréable bien qu'il y ait des couleurs pas top au niveau des hover (encore) sur les textes ( l'espèce de rose sur fond gris n'est pas trop lisible à mon gout)

j'éspère que ça peut t'aider à améliorer ton theme. Mais comme dit précédemment, je n'ai pas testé avec d grandes images intermédiaires...

[RedMorgan]

Merci beaucoup pour ce test

Comme dit en présentation, il y a du code qui vient d'un peu partout... Et j'avoue ne pas avoir pris le temps de l'harmoniser, surtout pour le css.
* Pour la croix, ce n'est pas voulu, c'est un reste d'un autre thème. Elle apparait que pour le survol des vignettes et des images intermédiaire théoriquement agrandissable. Je l'enlèverais probablement.
* Bizarre pour l'agrandissement des images, ça ne devrait pas le faire par défaut, et ça ne le fait pas chez moi, j'avoue ne pas trop comprendre, je vais refaire des tests.
* Pour ta résolution, je n'ai pas de portable 17 pouces sous la main, je n'ai pas pu régler précisément la taille maximal que l'on peut avoir, pourrais tu s'il te plait diminuer la variable $res900 dans la fonction theme_html_picture() et me dire qu'elle est la valeur correct pour afficher l'image correctement.
* Effectivement j'avais repérer le problème des boutons, mais oublier de le noter dans mes bugs, ton diagnostique est probablement le bon, CSS.
* Pour le décalage des vignettes en hover je n'avais même pas remarqué, c'est lié au CSS aussi je pense...
* Pour le breadcrumb, je ne pensais pas que ça soit possible de le désactiver à partir du theme, je regarderais ça de plus prêt.
* Je n'ai pas vraiment pris le temps de tester avec IE, personnellement je n'ai pas de machine sous windows, je regarderais de plus prêt...
* Tu dis "bien qu'il y ait des couleurs pas top au niveau des hover (encore) sur les textes ( l'espèce de rose sur fond gris n'est pas trop lisible à mon gout)" Je pense que tu veux dire texte gris sur bouton rouge, est ce exact ? Ce n'est effectivement pas lisible, le texte devrait être blanc...

Merci pour toutes ces informations, a force de travailler sur un thème on fini par ne plus faire attention aux défauts.. Je vais le regarder d'un autre oeil...

[RedMorgan]

Trouvé pour le rose sur fond gris... :-)... effectivement ce n'est pas joli...

[RedMorgan]

* j'ai un problème avec l'affichage des images intermédiaires qui chez moi sont réglées sur 400 (réglage par défaut de coppermine). Les images sont agrandies et donc pas belles car pixellisées. Ne serait il pas préférable de tester la taille des images existantes et de ne pas les agrandir si elles sont plus petites que le réglage du theme

Tes photos font 400 de hauteurs, mais aurais tu modifiés dans
"configuration - paramètres des images et vignettes "
"largeur ou hauteur maximale pour une image/vidéo intermédiaire" et mis une taille supérieur ?
Car effectivement je fais le test sur la hauteur maxi défini dans coppermine, et non la hauteur de la photo...
Je partais du principe qu'une fois la hauteur défini on n'y touchait plus... Mais c'est une erreur de ma part.
Il faudra que je retravaille le code pour tenir compte de la hauteur réelle de la photo.

[RedMorgan]

Bon je vais éviter de débuguer en direct 
Trouvé pour ton problème, par contre effectivement en cas de modification des paramètres coppermine, j'ai également un problème de dimensionnement...

[François Keller]

Tes photos font 400 de hauteurs, mais aurais tu modifiés dans
"configuration - paramètres des images et vignettes "
"largeur ou hauteur maximale pour une image/vidéo intermédiaire" et mis une taille supérieur ?

mes photos font 800  x 600 et je n'ai pas changé le paramétrage de la config coppermine

[RedMorgan]

Effectivement, il y avait un bug, ce n'était pas lié à un changement de paramètres, et c'est corrigé pour la prochaine version.
Par contre, il y aura soucis pour les personnes qui changeront leur paramètres sans redimentionner leur image à l'aide des outils d'administration (redimensionner les images).

[François Keller]

il faudra le préciser dans un fichier README.txt

[RedMorgan]

Après des vacances bien méritées, une reprise chargée, et oui je l'avoue une légère flemme de s'y remettre voici la "BETA 2" du thème "optimize_photosize"

Je précise que je suis toujours à la recherche de beta testeurs, et de retour sur la qualité de mon thème. Merci François Keller et Pascal YAP, mais que ce ne soit pas toujours les mêmes... 

Pas de nouvelles fonctionnalités mais correction des bugs les plus handicapants.

* Ajout d'un fichier READ ME FR.txt reprenant le post principal et mis à jour, notamment concernant un paramètre de configuration de coppermine pour un affichage optimal :
- il faut également dans la configuration de coppermine, "Vue des images" - "Largeur de la table pour l'affichage des fichiers" modifier le paramètre, 600 par défaut, et le passer à 100%


Voici l'état de la correction des bugs :
Bugs résolus par rapport à la version précédente "BETA 1".

* Suppression du curseur de survol des images.

* Suppression de la légère réduction des images lors d'un survol de celle-ci à la souris

* Résolution du problème d'affichage des boutons du menu de gestion des albums

* Correction des couleurs au niveau du survol sur les textes

* Le breadcrumb n'a plus besoin d'être désactivé dans les paramètres de coppermine, il reste donc disponible pour les autres thèmes.

* Résolution du problème d'affichage des bordures sous IE

* Résolution du problème d'agrandissement des images lorsque la résolution d'écran permettait un affichage intermédiaire plus important que la taille de l'image.

* Résolution du problème de bordures plus ou moins large sur certain navigateur.


Bugs ouverts.
* l'affichage dépasse la largeur de l'écran (17 pouces résolution 1440 x 900)
- ouvert
En attente de retour d'un testeur, je n'ai pas accès à cette résolution.
voir : FAQ dans le fichier READ ME FR.txt : comment modifier le nombre de pixel enlevé à la résolution écran pour déterminer la taille de l'image ?

* Si il s'avère que le dossier contenant CpmFetch ne porte pas le nom /cpmfetch/, le script provoque alors une FATAL ERROR bad path to cpmfetch !
- ouvert
Attentes d'un retour d'information plus précises. Le bug ne se produit pas chez moi.

* En cas de changement de paramètres coppermine pour la taille maxi des images, le javascript se basant sur ce paramètre, cela risque de déformer les images anciennes.
- solution "Mettre à jour les vignettes et/ou les photos redimensionnées" dans l'utilitaire de coppermine.

* Le code javascript permettant l'ouverture de l'image taille réelle à partir de l'image intermédiaire ne fonctionne pas.
- solution : pas pour le moment

* Lors du lancement d'un slide show, la taille des images est déterminée par la première photo. Si elle est de taille inférieure, à ce que la résolution permet, les autres photos seront aussi afficher en plus petite taille. Si elle est supérieur, les photos intermédiaires de plus petites tailles seront agrandies
- solution : pas pour le moment (évitez de mélanger des photos de tailles différentes dans un même album).

* Opéra : problème de bordure lors du défilement d'un slide show avec des images de tailles différentes.
- solution : pas pour le moment (évitez de mélanger des photos de tailles différentes dans un même album).

* cliquer sur l'image au hasard provoque une erreur : Not Found
- solution : pas pour le moment

[RedMorgan]

Une erreur touchant les versions différentes de la 1.4.18, empêche l'affichage de l'image intermédiaire.
Correction dans cette nouvelle version beta 2.1