Écrire une réponse

Pages: 1 2 3 … 5

#1 2006-08-30 17:32:36

phgiraud
Membre
2006-08-23
37

Présentation des images

Pour que les images soient visibles entièrement même sur un petit écran, sans avoir à scroller, j'ai du modifier la présentation de celles-ci, pour obtenir ceci (cliquez pour agrandir):
http://img237.imageshack.us/img237/6632/exempleimagecq5.th.jpg
Donc rien au dessus de l'image, et le maximum de fonctions dans la partie droite. Concernant les champs visibles, nous avons:
- Place de la mairie = name
- Aix = comment
- Auteur = author
- Prise le = date_creation
- Categories, Visites, Note moyenne = standard
Vient ensuite le tableau des EXIF (caché par défaut)
Les boutons en dessous sont ici en mode administrateur.
Cela permet par ailleurs de naviguer rapidement entre les images: le bouton "next" est toujours au même endroit quelle que soit l'image. Le scrolling est seulement nécessaire quand on veut laisser un commentaire (ce qui pourrait être amélioré aussi)

Voici en vrac mes modifications:

Pas de bannière:
picture.php, ligne 35 (après check status)

Code:

$page['page_banner']="";

On parle toujours de "Note", pas de "Vote":
language\fr_FR.iso-8859-1\common.lang.php

Code:

$lang['new_rate'] = 'Notez cette photo';
$lang['update_rate'] = 'Changez votre note';

Et pour finir, mes modifications du template et de la feuille de style
template/yoga/picture.tpl (contient mes modifs indiqués dans mes précédents posts)

Code:

<!-- BEGIN information -->
<div class="pleaseNote">{information.INFORMATION}</div>
<!-- END information -->
<a href="{U_HOME}" rel="home"></a>

<script type="text/javascript">
  var id_exifs = 'show_exifs';

  function getCookieVal(offset)
  {
    var endstr=document.cookie.indexOf (";", offset);
    if (endstr==-1) endstr=document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
  }
  function LireCookie(nom)
  {
    var arg=nom+"=";
    var alen=arg.length;
    var clen=document.cookie.length;
    var i=0;
    while (i<clen)
    {
      var j=i+alen;
      if (document.cookie.substring(i, j)==arg) return getCookieVal(j);
      i=document.cookie.indexOf(" ",i)+1;
      if (i==0) break;    
    }
    return null;
  }  
  function EcrireCookie(nom, valeur)
  {
    var argv=EcrireCookie.arguments;
    var argc=EcrireCookie.arguments.length;    
    var expires=(argc > 2) ? argv[2] : null;
    var path=(argc > 3) ? argv[3] : null;
    var domain=(argc > 4) ? argv[4] : null;
    var secure=(argc > 5) ? argv[5] : false;
    var coo = nom+"="+escape(valeur)+
      ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
      ((path==null) ? "" : ("; path="+path))+
      ((domain==null) ? "" : ("; domain="+domain))+
      ((secure==true) ? "; secure" : "");
    document.cookie = coo ;
  }

  // show/hide the element 'id' and store the visibility in a cooky
  function show_hide(id) {
    var element = document.getElementById(id);
    element.style.visibility = element.style.visibility ==  'hidden' ? 'visible' : 'hidden';
    date=new Date;
    date.setFullYear(date.getFullYear()+10);
    EcrireCookie(id, element.style.visibility, date);
  }
</script>  


<div style="position: relative; width: 100%">  
    <div id="phRight" style="position: relative; float: right; right: 0; top: 0; width: 22em; font-size: 82%; height: 546px;">  
      <div class="browsePath" style="width: 100%; text-align: center">
        <a href="{U_HOME}" rel="home">{L_HOME}</a>
        {LEVEL_SEPARATOR}{SECTION_TITLE}            
      </div>  
      
      <br>
    
      <div class="navButtons" style="width: 100%; text-align: center">
      <!-- BEGIN previous -->
        <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}" rel="prev"><img src="{pwg_root}{themeconf:icon_dir}/left.png" class="button" alt="{lang:previous_page}" style="border: none; margin: 0 10px 0 10px"></a>
      <!-- END previous -->
        <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}" rel="up"><img src="{pwg_root}{themeconf:icon_dir}/up.png" class="button" alt="{L_UP_ALT}" style="border: none; margin: 0 10px 0 10px" ></a>
      <!-- BEGIN next -->
        <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}" rel="next"><img src="{pwg_root}{themeconf:icon_dir}/right.png" class="button" alt="{lang:next_page}" style="border: none; margin: 0 10px 0 10px"></a>
      <!-- END next -->
      </div>
      <div class="imageNumber" style="text-align: center; width: 100%">{PHOTO}</div>
    
      <br>
      <br>
      <span style="font-size: 150%">
      <!-- BEGIN title -->
      <span style="color: #fff48e;">
      <b>{TITLE}</b>
      </span>
      <!-- END title -->
      <!-- BEGIN legend -->
      <br>
      {legend.COMMENT_IMG}
      <!-- END legend -->
      </span>
      <br>
      <br>
    
      <table class="infoTable" summary="Some info about this picture">
        <tr>
          <td class="label">{lang:Author}</td>
          <td class="value">{INFO_AUTHOR}</td>
        </tr>
        <tr>
          <td class="label">Prise le</td>
          <td class="value">{INFO_CREATION_DATE}</td>
        </tr>
        <tr>
          <td class="label">{lang:Posted on}</td>
          <td class="value">{INFO_POSTED_DATE}</td>
        </tr>
        <tr>
          <td class="label">{lang:Categories}</td>
          <td class="value">
            <ul>
              <!-- BEGIN category -->
              <li>{category.LINE}</li>
              <!-- END category -->
            </ul>
          </td>
        </tr>
        <tr>
          <td class="label">{lang:Visits}</td>
          <td class="value">{INFO_VISITS}</td>
        </tr>
        <!-- BEGIN info_rate -->
        <tr>
          <td class="label">{lang:Average rate}</td>
          <td class="value">{info_rate.CONTENT}</td>
        </tr>
        <!-- END info_rate -->
      </table>
      <br>
      <br>
      <!-- BEGIN rate -->
      <form action="{rate.F_ACTION}" method="post">
        <div>{rate.SENTENCE}
          <!-- BEGIN rate_option -->
          {rate.rate_option.SEPARATOR}
          <!-- BEGIN my_rate -->
          <input type="button" name="rate" value="{rate.rate_option.OPTION}" class="rateButtonSelected" />
          <!-- END my_rate -->
          <!-- BEGIN not_my_rate -->
          <input type="submit" name="rate" value="{rate.rate_option.OPTION}" class="rateButton" />
          <!-- END not_my_rate -->
          <!-- END rate_option -->
        </div>
      </form>
      <!-- END rate -->
      <br>
      <br>
      <!-- BEGIN metadata -->
      <span id="show_exifs">
        <table class="infoTable" style="font-size: 82%;""  summary="Some more (technical) info about this picture">
          <!-- BEGIN line -->
          <tr>
            <td class="label">{metadata.line.KEY}</td>
            <td class="value">{metadata.line.VALUE}</td>
          </tr>
          <!-- END line -->
        </table>
      </span>
      <!-- END metadata -->
      

      <div style="position: absolute; bottom: 0; left: 0; width: 100%; text-align: center">      
        <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/slideshow.png" class="button" alt="{L_SLIDESHOW}"></a>
        <a href="javascript:show_hide(id_exifs)" title="{L_PICTURE_METADATA}"><img src="{pwg_root}{themeconf:icon_dir}/metadata.png" class="button" alt="{L_PICTURE_METADATA}"></a>
      <!-- BEGIN representative -->
        <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>
      <!-- END representative -->
      <!-- BEGIN favorite -->
        <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" class="button" alt="{favorite.FAVORITE_ALT}"></a>
      <!-- END favorite -->
      <!-- BEGIN download -->
        <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="{pwg_root}{themeconf:icon_dir}/save.png" class="button" alt="{L_DOWNLOAD}"></a>
      <!-- END download -->
      <!-- BEGIN admin -->
        <a href="{U_ADMIN}" title="{L_ADMIN}"><img src="{pwg_root}{themeconf:icon_dir}/preferences.png" class="button" alt="{L_ADMIN}"></a>
      <!-- END admin -->
      <!-- BEGIN caddie -->
        <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>
      <!-- END caddie -->
      </div>
    </div>

    <!-- BEGIN high -->
    <a href="javascript:phpWGOpenWindow('{high.U_HIGH}','{high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')">
    <!-- END high -->
      <img src="{SRC_IMG}" id="thePhoto" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}">
    <!-- BEGIN high -->
    </a>
      <p>{L_PICTURE_HIGH}</p>
    <!-- END high -->
    
    <!-- BEGIN stop_slideshow -->
    <p>
      [ <a href="{stop_slideshow.U_SLIDESHOW}">{L_STOP_SLIDESHOW}</a> ]
    </p>
    <!-- END stop_slideshow -->


</div>

<hr class="separation">

<!-- BEGIN comments -->
<div id="comments">
<h2>[{comments.NB_COMMENT}] {L_COMMENT_TITLE}</h2>

<div class="navigationBar">{comments.NAV_BAR}</div>

<!-- BEGIN comment -->
<div class="comment">
  <!-- BEGIN delete -->
  <p class="userCommentDelete">
  <a href="{comments.comment.delete.U_COMMENT_DELETE}" title="{L_DELETE_COMMENT}">
    <img src="{pwg_root}{themeconf:icon_dir}/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/>
  </a>
  </p>
  <!-- END delete -->
  <p class="commentInfo"><span class="author">{comments.comment.COMMENT_AUTHOR}</span> - {comments.comment.COMMENT_DATE}</p>
  <blockquote>{comments.comment.COMMENT}</blockquote>
</div>
<!-- END comment -->

<!-- BEGIN add_comment -->
<form  method="post" action="{U_ADD_COMMENT}" class="filter" id="addComment">
  <fieldset>
    <legend>{L_ADD_COMMENT}</legend>

    <!-- BEGIN author_field -->
    <label>{L_AUTHOR}<input type="text" name="author"></label>
    <!-- END author_field -->

    <!-- BEGIN author_known -->
    <input type="hidden" name="author"  value="{comments.add_comment.author_known.KNOWN_AUTHOR}">
    <!-- END author_known -->

    <label>{L_COMMENT}<textarea name="content" rows="10" cols="80"></textarea></label>

    <input type="submit" value="{L_SUBMIT}" {TAG_INPUT_ENABLED}>
  </fieldset>
</form>
<!-- END add_comment -->
</div>
<!-- END comments -->

<!-- At page load, use the last value (cookie) of exifs visible/hidden -->
<script>
  var old_visibility = LireCookie(id_exifs);
  var tableau_exif = document.getElementById(id_exifs) ;
  if (old_visibility!=null) tableau_exif.style.visibility = old_visibility ;
  else tableau_exif.style.visibility = 'hidden' ;
</script>

template/yoga/picture.css

Code:

#imageHeaderBar {
    padding: 2px 10px;
    margin: 4px 0;
}
#imageHeaderBar .browsePath { float: left; }
#imageHeaderBar .imageNumber { float: right; }

#imageHeaderBar H2 {
    /*margin: 1ex 0;  override default-layout for less bottom-margin */
    text-align: center;
    padding: 0;
    clear: both;
}

#imageToolBar {
    text-align: center;
    position: relative;
    clear: both;
    margin: 4px 0; padding: 0;
}

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

#theImage {
    clear: left;
}

#theImage>IMG {
    display: block;
    margin: 0 auto;
}

#theImage, #thePhoto {
  border-width: 3px;
  border-style: solid;
}

.navThumb {
    margin-top: 2px;
}
#thumbPrev {
    float: left;
}

#thumbNext {
    float: right;
}

#linkPrev {
    margin-right: 10px;
    margin-left: 5px;
}

#linkNext {
    margin-right: 5px;
    margin-left: 10px;
}

TABLE.infoTable .value {
    text-align: left;
}

TABLE.infoTable .label {
    font-weight: bold;
    text-align: right;
    padding-right: 0.5em;
}

TABLE.infoTable TD.value UL {
  margin: 0;
  padding: 0 0 0 1.5em;
  list-style-type: square;
}

.rateButton, .rateButtonSelected {
  background-color:transparent;
  padding:0;
  border:0;
}

.rateButton {
  cursor: pointer;
}

.rateButtonSelected {
  color:inherit;
  font-weight:bold;
  font-size:120%;
}

#comments {
    text-align: left;
}

#comments .comment {
    margin: 3ex 0;
}

#comments H2 {
    margin: 1ex 0;
}

#comments P {
    margin: 0;
}

#comments .author {
    font-weight: bold;
}

#comments BLOCKQUOTE {
    margin: 1ex 0 1ex 2em;
    padding: 4px 4px 0 /* IE bug */ 4px;
}

#comments BLOCKQUOTE P {
    margin: 0;
    padding-bottom: 4px; /* IE bug follow-up */
}
#comments BLOCKQUOTE P+P {
    margin-top: 1ex;
}

#comments P.userCommentDelete {
    float: right;
    margin: 0;
}

Une dernière modif qui n'a rien a voir avec la présentation des images. Au niveau de l'historique, la limitation au dernier jour ne me satsfaisait pas (c'est une galerie privée et familiale!):
admin/stats.php

Code:

// ligne 241: clause WHERE vide
$where = '' ;
// ligne 252: ajouter jour/mois avant l'heure
SELECT DATE_FORMAT(date,\'%d/%m %H:%i:%s\') AS hour,

Hors ligne

#2 2006-08-30 18:25:48

repie38
Former Piwigo Team
grenoble
2006-05-23
678

Re: Présentation des images

encore une fois bravo !
et je pense que cela pourrait etre tres utile, surtout pour le mode diaporama.
si j'ai un peu de temps (et si j'y arrive), je ferai cette modif pour le mode diapo,
avec possibilité de configurer le mode diapo en normal ou light.

Hors ligne

#3 2006-08-30 18:26:38

plg
Équipe Piwigo
Nantes, France, Europe
2002-04-05
12671

Re: Présentation des images

Excellent.

Les historiens ont établi que Pierrick était le premier utilisateur connu de Piwigo.

Hors ligne

#4 2006-09-14 05:22:49

anta
Membre
2006-07-30
10

Re: Présentation des images

Please excuse the English but I don’t speak French and actually had to use Google to translator this post.

I tried adding this to my pwg site but am having some trouble and hope someone can help.

The problems are when I go to see a picture, it says at the bottom of the page

Done, but with errors on page.

and the metadata icon doesn’t work.

Also, I could not find page_banner status on picture.php.

I’m using version 1.6.1 and running this mod on a backup of PWG at this link:

http://anta.no-ip.com/www2/gallery_backup/1.6.1/

Hors ligne

#5 2006-09-14 07:04:02

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

Re: Présentation des images

I am not certain of this is the complete solution.
In picture.tpl there is an error:

<!-- END rate -->
      <br>
      <br>
      <!-- BEGIN metadata -->
      <span id="show_exifs">
        <table class="infoTable" style="font-size: 82%;""  summary="Some more (technical) info about this picture">
          <!-- BEGIN line -->
          <tr>
            <td class="label">{metadata.line.KEY}</td>
            <td class="value">{metadata.line.VALUE}</td>
          </tr>
          <!-- END line -->
        </table>
      </span>
      <!-- END metadata -->

Correct form is     

<table class="infoTable" style="font-size: 82%;"  summary="Some more (technical) info about this picture">

Please open a related topic on the English side Forum to carry on with this purpose.
Thx.

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

#6 2006-09-14 08:36:54

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

Re: Présentation des images

Outre le fait qu'il y a deux double "quote" à la fin du style de l'infotable...
Nous avons aussi une balise <script> en fin de picture.tpl qui est incorrecte.
Nous devrions avoir à la place bien entendu:

<script type="text/javascript">

Je ne vois pas d'autre erreur, actuellement.
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

#7 2006-09-14 13:33:24

BeTtA SpLeNdEnS
Membre
Rennes
2002-04-15
51

Re: Présentation des images

Houla, mais ça semble intéressant ça (ça me fait penser qu'il faut vraiment que je migre en 1.6.1 !)

Hors ligne

#8 2006-09-14 13:58:34

phgiraud
Membre
2006-08-23
37

Re: Présentation des images

Merci d'avoir signalé ces coquilles

Hors ligne

#9 2006-09-14 15:00:27

plg
Équipe Piwigo
Nantes, France, Europe
2002-04-05
12671

Re: Présentation des images

Un petit MOD en guise de packaging ?

Les historiens ont établi que Pierrick était le premier utilisateur connu de Piwigo.

Hors ligne

#10 2006-09-14 15:43:10

dreamer
Membre
St Cyr/mer (83)
2006-02-26
1091

Re: Présentation des images

Bonjour

Excellent mod , je viens de l'adopter , cela permet une meilleure visibilité .

A +

Photos, Musiques, Camping-car,, Vidéo et le tout nouveau Recettes le tout en 14.2.0

Hors ligne

#11 2006-09-14 16:36:02

vimages
Membre
2004-03-27
2429

Re: Présentation des images

je testerais surement cette présentation ! Cela peut aider à la navigation en évitant en effet le scroll systématique pour voir les infos de l'image.

quels sites l'on déjà adopté ?

merci ,
éric.

http://v-images.com
https://gckmedia.piwigo.com/

Hors ligne

#12 2006-09-14 23:08:11

dreamer
Membre
St Cyr/mer (83)
2006-02-26
1091

Re: Présentation des images

Salut

Je l'ai installé et ça marche  très bien : http://www.album.pashmina-le-site.com/p … ategory/19

A+

Photos, Musiques, Camping-car,, Vidéo et le tout nouveau Recettes le tout en 14.2.0

Hors ligne

#13 2006-09-15 09:07:15

phgiraud
Membre
2006-08-23
37

Re: Présentation des images

impec... sauf que je n'arrive pas à voir les exif de prise de vue.

Un petit truc qui me chagrine sur ma présentation: quand la fenêtre est vraiment trop petite, l'image passe en dessous de la colonne de droite. Je préfèrerais que la colonne de droite vienne se superposer à l'image.
Un roi du CSS saurait-il comment faire ?

Hors ligne

#14 2006-09-15 10:19:15

BeTtA SpLeNdEnS
Membre
Rennes
2002-04-15
51

Re: Présentation des images

phgiraud a écrit:

impec... sauf que je n'arrive pas à voir les exif de prise de vue.

Un petit truc qui me chagrine sur ma présentation: quand la fenêtre est vraiment trop petite, l'image passe en dessous de la colonne de droite. Je préfèrerais que la colonne de droite vienne se superposer à l'image.
Un roi du CSS saurait-il comment faire ?

le plus "joli", c'est d'avoir une taille fixe pour tes images... tu as souvent des toutes petites images ? (c'est vrai que ça pourrait être le cas avec des videos par exemple... :S faut que j'vois ça ce WE !)

Pour les EXIF de prise de vue, au redimensionnement, il faut bien veiller à utiliser un programme qui ne va pas te les supprimer au passage ! (phpMyVignettes fait ça proprement)

Dernière modification par BeTtA SpLeNdEnS (2006-09-15 10:20:24)

Hors ligne

#15 2006-09-15 11:09:16

phgiraud
Membre
2006-08-23
37

Re: Présentation des images

Pour le redimmensionnement j`utilise IrfanView (gratuit) qui fait ça parfaitement, avec un mode batch super puissant.

Hors ligne

Pages: 1 2 3 … 5

Écrire une réponse

Pied de page des forums

Propulsé par FluxBB

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