Annonce

Écrire une réponse

Pages: 1

  •  » Utilisation
  •  » Déplacer le titre des images dans la ligne de navigation

#1 2007-08-23 22:50:12

Pompon
Membre
Paris (FR)
2005-11-19
49

Déplacer le titre des images dans la ligne de navigation

Bonjour,

Comme de nombreuses personnes, j'ai encore des visiteurs sur ma galerie qui surfent avec des petites résolutions (et des écrans 17 pouces widescreen). Pour éviter d'avoir à utiliser l'ascenseur, je souhaite gagner de l'espace dans le haut de la page.
J'ai bien vu des solutions pour supprimer le header (ici par exemple) ou encore des méthodes pour réorganiser la page (ici et là). Mais cela ne me convient pas.

J'ai remarqué que tous les templates par défaut (sur la version 1.5 que j'utilise et la 1.7 que je regarde pour migrer un jour) possèdent à chaque fois un saut de ligne entre le "browsePath", le "title" et "imageToolBar".
Pour être plus clair voici une capture d'écran : avant et après.

Etant novice, j'ai pris mon courage à deux mains et j'ai longuement cherché pour arriver à une solution un peu complexe... Si vous pouvez jeter un coup d'oeil et me dire si c'est correct ou pas ? Merci d'être indulgent car je n'y connais vraiment pas grand chose en css & cie !

Ma galerie est en version 1.5.2 et j'utilise le template white. Mais la manip fonctionne avec la version 1.7 et les template par défaut. Les deux fichiers à modifier sont picture.tpl et image.css (pour la version 1.5 et à répéter pour chaque template installé) et picture.tpl et picture.css (pour la 1.7 pas besoin de le répéter ce sont des fichiers communs aux templates).


METHODE 1 (je déplace juste le "title" pour le mettre dans la div "imageToolBar") : le problème c'est que je n'arrive pas à centrer le titre et que les flêches de navigation ne sont pas alignés. Comme il n'existe pas de float : center je suis coincé. Si quelqu'un a une astuce, je suis preneur !
- dans le fichier picture.tpl supprimer :

Code:

<!-- BEGIN title -->
<h2>{TITLE}</h2>
<!-- END title -->
<hr class="separation">

et copier après :

Code:

<!-- END caddie --></div>

ceci :

Code:

<div class="thetitle">
<h2>{TITLE}</h2>
</div>

- dans image.css, remplacer :

Code:

#imageToolBar {
    height: 28px;
}
#imageToolBar A, #imageToolBar IMG {
    display: block;
    border: none;
    margin: 0; padding: 0;
}
#imageToolBar A { width: 48px; }
#imageToolBar IMG { margin: 2px auto; }
#imageToolBar .randomButtons A { float: left; }
#imageToolBar .navButtons    A { float: right; }

par :

Code:

#imageToolBar {
    height: 30px;
}
#imageToolBar A, #imageToolBar IMG {
    display: inline;
    border: none;
    margin: 0; padding: 0;
}
#imageToolBar A { width: 48px; }
#imageToolBar IMG { margin: 2px auto; }
#imageToolBar .randomButtons A { float: left; }
#imageToolBar .navButtons    A { float: none; }
#imageToolBar .thetitle { float: right; }

Le hic c'est que je n'arrive pas à mettre le titre au centre et garder alignés randomButtons, title et navButtons. En mettant le titre à droite, les flêches de navigation sont au centre mais alignés :-(


METHODE 2 (je passe par la création d'un tableau de 2 lignes contenant 3 colonnes):
EDIT : pour les utilisateurs de la version 1.7 aller directement à ce post. Pour les utilisateurs de la version 1.5.2 on continue ici ;-)
- dans le fichier picture.tpl supprimer :

Code:

<div id="imageHeaderBar">
<div class="browsePath">

[...]

</div> <!-- imageToolBar -->

et copier après :

Code:

</div><!-- END information -->

ceci:

Code:

<table class="imageToolBar">
<tr>
  <td class="browsePath"><a href="{U_HOME}">{L_HOME}</a>{LEVEL_SEPARATOR}{CATEGORY}</td>
  <td></td>
  <td class="imageNumber">{PHOTO}</td>
  </tr>
  <tr>
    <td class="randomButtons">
  <span style="margin:0px 0px 0px 10px;"><a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}"><img src="template/white/theme/slideshow.png" class="button" alt="{L_SLIDESHOW}"></a></span>
  <span style="margin:0px 0px 0px 20px;"><a href="{U_METADATA}" title="{L_PICTURE_METADATA}"><img src="template/white/theme/metadata.png" class="button" alt="{L_PICTURE_METADATA}"></a></span>
<!-- BEGIN representative -->
  <span style="margin:0px 0px 0px 20px;"><a href="{representative.URL}" title="{lang:set as category representative}"><img src="template/white/theme/representative.png" class="button" alt="{lang:representative}" /></a></span>
<!-- END representative -->
<!-- BEGIN favorite -->
  <span style="margin:0px 0px 0px 20px;"><a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" class="button" alt="{favorite.FAVORITE_ALT}"></a></span>
<!-- END favorite -->
<!-- BEGIN download -->
  <span style="margin:0px 0px 0px 20px;"><a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="template/white/theme/save.png" class="button" alt="{L_DOWNLOAD}"></a></span>
<!-- END download -->
<!-- BEGIN admin -->
  <span style="margin:0px 0px 0px 20px;"><a href="{U_ADMIN}" title="{L_ADMIN}"><img src="template/white/theme/preferences.png" class="button" alt="{L_ADMIN}"></a></span>
<!-- END admin -->
<!-- BEGIN caddie -->
  <span style="margin:0px 0px 0px 20px;"><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/white/theme/caddie_add.png" class="button" alt="{lang:caddie}"/></a></span>
<!-- END caddie -->
</td>
    <td class="thetitle">{TITLE}</td>
    <td class="navButtons">
    <!-- BEGIN previous -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}"><img src="template/white/theme/left.png" class="button" alt="previous"></a></span>
<!-- END previous -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton up" href="{U_UP}" title="{L_UP_HINT}"><img src="template/white/theme/up.png" class="button" alt="{L_UP_ALT}"></a></span>
<!-- BEGIN next -->
  <span style="margin:0px 10px 0px 0px;"><a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}"><img src="template/white/theme/right.png" class="button" alt="next"></a></span>
<!-- END next -->
</td>
  </tr>
</table>

<!-- imageToolBar -->

- dans image.css, supprimer:

Code:

#imageHeaderBar {

[...]

#imageToolBar .randomButtons A { float: left; }
#imageToolBar .navButtons    A { float: right; }

et remplacer par (attention j'ai mis des couleurs et des cadres en pointillés pour coller au thème white!) :

Code:

TABLE.imageToolBar {
    height: 58px;
    width: 100%;
}

TABLE.imageToolBar .browsePath {
    text-align: left;
    width: 40%;
    padding:0 10px;
}

TABLE.imageToolBar .imageNumber {
    text-align: right;
    width: 40%;
    padding:0 10px;
}

TABLE.imageToolBar .randomButtons {
    text-align: left;
    width: 40%;
    border-top: 1px dashed #d3d3d3;
    border-left: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;
        background-color: f8f8f8;
}

TABLE.imageToolBar .thetitle {
    text-align: center;
    font-weight:bold;
    font-size:12px;
    width: 20%;
    border-top: 1px dashed #d3d3d3;
    border-top: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;
        background-color: f8f8f8;
}

TABLE.imageToolBar .navButtons {
    text-align: right;
    width: 40%;
    border-top: 1px dashed #d3d3d3;
    border-right: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;
        background-color: f8f8f8;
}

Voilà je sais que tout n'est pas parfait mais c'est le résultat que je voulais. Merci de me dire comment améliorer (ou faire) ce que je veux !
@+

Dernière modification par Pompon (2007-08-24 13:26:46)

Environnement mac et hébergement chez free.

Hors ligne

#2 2007-08-23 23:10:15

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: Déplacer le titre des images dans la ligne de navigation

Message parfaitement clair pour moi.

Je me suis déjà confronté à ce pb, et je n'ai pas de solution immédiate. On va essayer de trouver une solution dès que possible, pour quelqu'un qui a fait des efforts de recherche et de clarté.

8-)

Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#3 2007-08-23 23:44:39

rio
Équipe Piwigo
Paris
2006-07-24
1589

Re: Déplacer le titre des images dans la ligne de navigation

Enorme!
On ne s'attend sûrement pas à ce que toutes les personnes qui fréquentent ce forum en fassent autant, c’est assez exceptionnel pour que ça soit relevé !
Bravo !

-> /<Ä®¿M <-
http://riohome.free.fr
Il forum è anche in ITALIANO

Hors ligne

#4 2007-08-24 00:17:07

Pompon
Membre
Paris (FR)
2005-11-19
49

Re: Déplacer le titre des images dans la ligne de navigation

Merci pour vos compliments !

Mais il faut remercier aussi le moteur de recherche du forum, google... ;-)

Après c'est surtout agréable de réussir à obtenir (et mieux comprendre au passage) ce que l'on souhaite par soi-même. Même si cela m'a demandé beaucoup, beaucoup de temps!

Maintenant même si la méthode 2 fonctionne parfaitement, elle est loin d'être très propre je pense.

A suivre...

Environnement mac et hébergement chez free.

Hors ligne

#5 2007-08-24 11:55:09

Nicco
Membre
Paris - Val de Marne
2006-05-12
1794

Re: Déplacer le titre des images dans la ligne de navigation

merci pour ces infos j essayerai en rentrant

a+

Nicco Starrrr ..... voici ma galerie http://gallery-nicco.no-ip.org & ma passion http://bd-nicco.no-ip.org
version PWG 1.7.1 + de nombreux plugins actifs (trop pour les énumérer)

Hors ligne

#6 2007-08-24 13:20:02

Pompon
Membre
Paris (FR)
2005-11-19
49

Re: Déplacer le titre des images dans la ligne de navigation

Hello,

Pour permettre aux utilisateurs de la version 1.7 de mieux tester cette modification, voilà une méthode plus propre qui conserve toutes les flêches de navigation et qui corrige quelques "bugs". Il s'agit toujours de la méthode 2 avec création de tableau. La structure étant différente par rapport à la version 1.5.2 que j'utilise, j'espère ne pas faire trop d'erreur. Je pense qu'il faut copier les deux fichiers (picture.tpl et picture.css) dans le dossier template-extension pour ne pas avoir de soucis lors de migration, mais c'est à confirmer!

- dans le fichier picture.tpl, supprimer:

Code:

<div id="imageHeaderBar">
<div class="browsePath">

[...]

</div> <!-- imageToolBar -->

et copier après :

Code:

</div><!-- END information -->

ceci :

Code:

<table class="imageToolBar">
<tr>
  <td class="browsePath"><a href="{U_HOME}" rel="home">{lang:home}</a>
    {LEVEL_SEPARATOR}{SECTION_TITLE}
    {LEVEL_SEPARATOR}{PICTURE_TITLE}</td>
   <td></td>
  <td class="imageNumber">{PHOTO}</td>
  </tr>
  <tr>
    <td class="randomButtons">
  <span style="margin:0px 0px 0px 10px;"><a href="{U_SLIDESHOW}" title="{lang:slideshow}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/slideshow.png" class="button" alt="{lang:slideshow}"></a></span>
  <span style="margin:0px 0px 0px 20px;"><a href="{U_METADATA}" title="{lang:picture_show_metadata}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/metadata.png" class="button" alt="{lang:picture_show_metadata}"></a></span>
<!-- BEGIN download -->
  <span style="margin:0px 0px 0px 20px;"><a href="{download.U_DOWNLOAD}" title="{lang:download_hint}"><img src="{pwg_root}{themeconf:icon_dir}/save.png" class="button" alt="{lang:download}"></a></span>
<!-- END download -->
  {PLUGIN_PICTURE_ACTIONS}
<!-- BEGIN favorite -->
  <span style="margin:0px 0px 0px 20px;"><a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" class="button" alt="{favorite.FAVORITE_ALT}"></a></span>
<!-- END favorite -->
<!-- BEGIN representative -->
  <span style="margin:0px 0px 0px 20px;"><a href="{representative.URL}" title="{lang:set as category representative}"><img src="{pwg_root}{themeconf:icon_dir}/representative.png" class="button" alt="{lang:representative}"></a></span>
<!-- END representative -->
<!-- BEGIN admin -->
  <span style="margin:0px 0px 0px 20px;"><a href="{U_ADMIN}" title="{lang:link_info_image}"><img src="{pwg_root}{themeconf:icon_dir}/preferences.png" class="button" alt="{lang:link_info_image}"></a></span>
<!-- END admin -->
<!-- BEGIN caddie -->
  <span style="margin:0px 0px 0px 20px;"><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="{pwg_root}{themeconf:icon_dir}/caddie_add.png" class="button" alt="{lang:caddie}"></a></span>
<!-- END caddie -->
</td>
    <td class="thetitle">{TITLE}</td>
    <td class="navButtons">
    <!-- BEGIN first -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev" href="{first.U_IMG}" title="{lang:first_page} : {first.TITLE_IMG}" rel="first"><img src="{pwg_root}{themeconf:icon_dir}/first.png" class="button" alt="{lang:first_page}"></a></span>
<!-- END first -->
<!-- BEGIN first_unactive -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/first_unactive.png" class="button" alt=""></a></span>
<!-- END first_unactive -->
<!-- BEGIN previous -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev" href="{previous.U_IMG}" title="{lang:previous_page} : {previous.TITLE_IMG}" rel="prev"><img src="{pwg_root}{themeconf:icon_dir}/left.png" class="button" alt="{lang:previous_page}"></a></span>
<!-- END previous -->
<!-- BEGIN previous_unactive -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/left_unactive.png" class="button" alt=""></a></span>
<!-- END previous_unactive -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton up" href="{U_UP}" title="{lang:thumbnails}" rel="up"><img src="{pwg_root}{themeconf:icon_dir}/up.png" class="button" alt="{lang:thumbnails}"></a></span>
<!-- BEGIN next -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton next" href="{next.U_IMG}" title="{lang:next_page} : {next.TITLE_IMG}" rel="next"><img src="{pwg_root}{themeconf:icon_dir}/right.png" class="button" alt="{lang:next_page}"></a></span>
<!-- END next -->
<!-- BEGIN next_unactive -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton next"><img src="{pwg_root}{themeconf:icon_dir}/right_unactive.png" class="button" alt=""></a></span>
<!-- END next_unactive -->
<!-- BEGIN last -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev" href="{last.U_IMG}" title="{lang:last_page} : {last.TITLE_IMG}" rel="last"><img src="{pwg_root}{themeconf:icon_dir}/last.png" class="button" alt="{lang:last_page}"></a></span>
<!-- END last -->
<!-- BEGIN last_unactive -->
  <span style="margin:0px 20px 0px 0px;"><a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/last_unactive.png" class="button" alt=""></a></span>
<!-- END last_unactive -->
</td>
  </tr>
</table>

<!-- imageToolBar -->

- dans le fichier picture.css, supprimer :

Code:

#imageHeaderBar {

[...]

#imageToolBar .randomButtons A { float: left; }
#imageToolBar .navButtons    A { float: right; }

et remplacer par :

Code:

TABLE.imageToolBar {
    height: 58px;
    width: 100%;
}

TABLE.imageToolBar .browsePath {
    text-align: left;
    width: 40%;
    padding:0 10px;
}

TABLE.imageToolBar .imageNumber {
    text-align: right;
    width: 40%;
    padding:0 10px;
}

TABLE.imageToolBar .randomButtons {
    text-align: left;
    width: 40%;
    border-top: 1px dashed #d3d3d3;
    border-left: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;

}

TABLE.imageToolBar .thetitle {
    text-align: center;
    font-weight:bold;
    font-size:12px;
    width: 20%;
    border-top: 1px dashed #d3d3d3;
    border-top: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;

}

TABLE.imageToolBar .navButtons {
    text-align: right;
    width: 40%;
    border-top: 1px dashed #d3d3d3;
    border-right: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;

}

J'ai gardé le cadre en pointillé mais il n'y a plus de background-color. Il y a encore les pointillés sous les images de imageToolBar lorsqu'on les survole avec la souris mais c'est un détail (je pense qu'il faut modifier default-colors.css, je regarderais plus tard).
J'ai testé l'affichage sur firefox et safari sur mac. Normalement le résultat est propre.
Désolé pour le désagrement et je vais éditer mon premier post.

Voilà bon test ;-)
@+

Environnement mac et hébergement chez free.

Hors ligne

#7 2007-08-25 09:02:40

marcophilie56
Membre
2007-01-22
175

Re: Déplacer le titre des images dans la ligne de navigation

Bonjour,
Votre mise en page me convient à l'exception de 3 éléments
1 - dans le thème montblancxl, le chemin de l'image s'affiche sur 2 lignes car il est assez long
2 - Pour le chemin de l'image, je ne voudrais afficher que le chemin sans inclure le nom de l'image
3 - A la place du nom de l'image, je voudrais afficher la description de l'image
Avez vous quelques idées à me donner pour adapter votre mise en page car je suis novice en css et php ?
Je suis en version 1.7 en local pour le moment.
Merci d'avance
Cordialement

Hors ligne

#8 2007-08-25 10:19:05

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: Déplacer le titre des images dans la ligne de navigation

marcophilie56 a écrit:

Bonjour,
Votre mise en page me convient à l'exception de 3 éléments
1 - dans le thème montblancxl, le chemin de l'image s'affiche sur 2 lignes car il est assez long
2 - Pour le chemin de l'image, je ne voudrais afficher que le chemin sans inclure le nom de l'image
3 - A la place du nom de l'image, je voudrais afficher la description de l'image
Avez vous quelques idées à me donner pour adapter votre mise en page car je suis novice en css et php ?
Je suis en version 1.7 en local pour le moment.
Merci d'avance
Cordialement

Tu es hors-sujet, ici on aide Pompon à résoudre son pb.
Merci d'ouvrir un autre topic pour ton cas de figure.
8-)

Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#9 2007-08-26 12:50:15

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: Déplacer le titre des images dans la ligne de navigation

Pompon,

J'explique comment je ferai, on essaiera ensuite:

1 - Il faut prendre le block title et le déplacer dans imageToolBar.
2 - imageToolBar contient deux div et notre titre est un h2 => au revoir l'h2 et bonjour un nouveau div... (css à définir)
3 - dans imageToolBar nos deux div actuelles sont float: left et float: right sauf que float n'a pas de middle, d'où le pb.
4 - La seule solution va donc passer par du positioning.

Testons-cela sur picture.tpl à la sauvage :

...
<div class="randomButtons" style="float: none; position: absolute; left: 0px;">
.../...
</div>

<!-- BEGIN title -->
  <div style="position: absolute; left: 50%;">{TITLE}</div>
<!-- END title -->

<div class="navButtons" style="float: none; position: absolute; right: 0px;">
...

Bon, il ne faut pas laisser ça ainsi. Il va falloir transférer dans les css.
Il faudra donner un id à la balise div du titre (pour au moins changer la police).

A part cela, je laisserai comme c'est actuellement car il faut laisser de la place aux créateurs de plugins d'ajouter encore de nouveaux icones.
A toi de voir, mais je tenais à te répondre.
(Pas de tableau.)

8-)

Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#10 2007-08-26 19:41:49

marcophilie56
Membre
2007-01-22
175

Re: Déplacer le titre des images dans la ligne de navigation

Bonjour,
Merci beaucoup pour ta réponse qui permet d'afficher le titre de l'image mais je souhaite afficher la première ligne de la description de l'image.
S'il existe une solution merci d'avance
Cordialement

Hors ligne

#11 2007-08-27 01:39:55

Pompon
Membre
Paris (FR)
2005-11-19
49

Re: Déplacer le titre des images dans la ligne de navigation

Merci pour ta réponse VDigital.

J'étais coincé à la fin de l'étape 3, d'où l'idée du tableau !

Je viens de tester ta méthode à la sauvage et c'est presque parfait...
Sous safari l'affichage est ok. Mais avec firefox si je met le "div style" pour navbuttons, on ne voit plus la "div randombuttons" ni le titre. Etrange... Par contre si je laisse "<div class="navButtons">" tout seul l'affichage est bon pour les deux navigateurs (je ne sais pas pour internet explorer) !?

Je vais essayer également de centrer verticalement le titre.

Sinon mes titres sont en général assez court (un ou deux mots avec un chiffre), cela ne devrait pas gêner l'affichage des icônes des plugins. Mais je comprends ton point de vue.

Je regarderai de plus près en début de semaine de prochaine. Je vous tiens au courant et encore merci de ton aide !
@+

ps : marcophilie56 je ne peux pas t'aider tant que mon problème n'est pas résolu. Je débute moi aussi en php & css. Courage et suit les conseils de VDigital.

EDIT : je n'ai pas oublié mon post et le travail qu'il reste à faire, mais j'ai quelques "dossiers" urgents à traiter avant de revenir sur cette modification. Je ne vous oublie pas et je vous tiens au courant !

Dernière modification par Pompon (2007-09-25 22:38:34)

Environnement mac et hébergement chez free.

Hors ligne

Pages: 1

  •  » Utilisation
  •  » Déplacer le titre des images dans la ligne de navigation

Écrire une réponse

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact