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...
Author
Topic: Nouveau thème cherche beta testeur / debugeur (Read 9224 times)