Annonce

  •  » Styles
  •  » [Résolu] [DARK] Comment cadrer la page des photos ?

#1 2010-09-03 13:26:46

laraider
Membre
Perpignan - France
2010-09-01
263

[Résolu] [DARK] Comment cadrer la page des photos ?

Bonjour, j'aimerai que les photos soit aussi affichées dans un cadre, comme pour les catégories.

Pour ce faire, je vous ai fait un montage de ce que je souhaiterai, pour que vous me compreniez mieux :
- Photo 1, la page originale (moche, pas de cadrage et l'emplacement des boutons en haut ne me convient pas).
- Photo 2, voilà comment j'aimerai que ca s'affiche.

Car en fait, je vais me servir de PIWIGO pour recréer le site de ma mère dedans (via les pages additionnelles) et donc du coup, tout doit être assorti au mieux :)

Étant spécialiste dans le plantage de templates sur mon forum phpbb3 (bon depuis7 ans, j'ai bien progressé) et vu que le codage est différent que dans Piwigo (il y a des IF et je ne sais même pas ce que c'est, pour l'exemple) alors je demande votre aide car comme ca, je me servirai de vos modifs pour mieux comprendre ces codages (pas la peine de m'envoyer sur des docs car je n' y arrive pas comme ça).

Merci d'avance pour votre aide.


Croftement, Laraider.

Hors ligne

#2 2010-09-03 14:52:33

LucMorizur
Membre
Vienne (Isère, 38)
2009-03-01
1969

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

laraider a écrit:

Bonjour, j'aimerai que les photos soit aussi affichées dans un cadre, comme pour les catégories.

(...) (pas la peine de m'envoyer sur des docs car je n' y arrive pas comme ça).

Donc il faut trouver quelqu'un qui réalise ton template-extension... (je ne t'ai pas remis le lien, car il semble que ce soit inutile, et de plus je te l'avais déjà donné hier dans un autre post ;-) ...)

Piwigo est basé sur du PHP, qui génère des pages HTML. Pour générer ces pages plus simplement, le code PHP passe par des modèles de page "écrits en Smarty" (je mets des guillemets car je raccourcis un peu). Ce sont les {if} ou autres balises avec des accolades ({}) que tu rencontres dans les fichiers *.tpl .

Ce n'est pas si compliqué que ça :-p ... il faut considérer les fichiers .tpl comme du HTML, avec des vrais morceaux de code dedans. Piwigo a prévu la possibilité d'effectuer facilement des modifications dans ces fichiers, justement grâce aux template-extension (après tout je remets le lien, au cas où j'aie suffisamment bien vendu ma salade ;-) !)

Dans le cas que tu soumets dans la présente discussion, il faut modifier un peu index.tpl (donc créer un template-extension, un nouveau fichier index.tpl (par exemple "my_index.tpl") basé sur index.tpl (celui d'origine)) pour y mettre les modifications que tu désires.

Ensuite dans Admin > Configuration > Templates (modèles), tu viens préciser que tu veux substituer index.tpl (celui d'origine) par ta réalisation (my_index.tpl par exemple).

Essaye un peu, et si tu n'y arrives pas on te guidera... disons, encore plus ;-) !

Hors ligne

#3 2010-09-03 15:00:44

laraider
Membre
Perpignan - France
2010-09-01
263

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

Euh...uh...h....

La direction s'il vous plait, je voudrai quelqu'un qui parle Français ici, merci.

Lol, ouais ben c'est pas gagné si je dois mettre le site en ligne lundi !!!


Croftement, Laraider.

Hors ligne

#4 2010-09-03 16:56:34

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16208

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

A vrai dire, je ne voie pas la différence entre les 2 photos :-(

  Le principe du support c'est d'aider pour guider au maximum. Il faut cependant que tu mettes les mains dans la machine si tu veux des personnalisations qui n'existe pas.

  Je dirais également que ce que tu appels "moche" c'est ce que l'on a fait et livré avec Piwigo. Nous sommes tout à fait prêt a faire évoluer Piwigo. Mais commencer par dire que la présentation que l'on offre est moche pour que l'on t'aide à faire autre chose n'est pas forcement la meilleur porte d'entré.

   Nous sommes bien sur prêt à aider :-)

   Pour le délais par contre c'est suivant le temps que chacun peux y consacrer.

N'hésite pas à préciser ton besoin
Si ce n'est qu'une histoire de bordure et de couleur, ce n'est pas le html qu'il faut modifier mais le CSS

Si tu as vraiment besoins de quelque chose pour dans 5 mn, nous pouvons t'orienter vers des professionnel qui ce fond rémunérer pour cela et qui pourrons peut être répondre plus rapidement que le support bénévole ;-)


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#5 2010-09-03 17:50:33

laraider
Membre
Perpignan - France
2010-09-01
263

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

Bonjour ddtddt.

Loin de moi de dire que votre travail est "moche"... je parle de comparaison... du design Dark PAR RAPPORT à mon design de base (celui que j'ai conçu pour ma mère) et vu que ca ne colle pas (vu que moi je suis très "cadre")... ÇA FAIT MOCHE.

Au contraire, je crois avoir bien dit dans un autre topic, que je trouve vraiment Piwigo excellent !

Pas de problème pour mettre la main à la patte... je fais ça depuis 3 jours déjà, entre faire des modifs de css, des modifs dans les plugins... je bidouille toute la journée.

Seulement, le codage des pages en .tpl... ben j'y arrive pas ! C'est comme pour mon forum en phpbbb3 ; j'ai dû choisir le style Subsilver2 pour pouvoir le réadapter à mon gout, car impossible de capter le codage du style Prosilver.

C'est pour ça que je demande de l'aide :) Ensuite, c'est comme un modèle ; quand j'ai la "vieille version" et la "bonne version" de la page, je compare, je bidouille et je fini par comprendre à quoi sert tel code, etc.

Oui, après plusieurs bidouillages, je fini par constater que c'est + le css qui prédomine sur la mise en forme, que les page .tpl par elles mêmes.

Je ne suis pas encore bien familiarisée avec les titres dans vos .css ("qui" correspond à "quoi") ... mais je finirai par y arriver... avec vos aides biensûr.

J'espère que vous aurez mieux compris ma "remarque" et ma demande.

Dernière modification par laraider (2010-09-03 17:52:30)


Croftement, Laraider.

Hors ligne

#6 2010-09-05 18:53:31

gbo
Membre
Martigues
2006-11-01
1176

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

laraider,
je ne sais pas si c'est le jeu des 7 erreurs, mais je ne comprends pas ce que tu souhaites faire.
STP, complètes tes images avec des flèches pour marquer les différences et un peu de texte pour que l'on puisse essayer de t'aider.

En ligne

#7 2010-09-05 19:02:17

laraider
Membre
Perpignan - France
2010-09-01
263

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

Désolé :) Merci


Croftement, Laraider.

Hors ligne

#8 2010-10-05 10:19:35

laraider
Membre
Perpignan - France
2010-09-01
263

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

Bonjour, j'ai toujours besoin d'aide pour ce problème, merci.


Croftement, Laraider.

Hors ligne

#9 2010-10-05 15:44:20

laraider
Membre
Perpignan - France
2010-09-01
263

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

Bon, j'ai fais une template-extension du fichier picture.tpl et j'ai réussi à faire ce que je voulais... à un détail près :
- je n'arrive pas à obliger mon tableau à être à la même largeur que le reste (soit à 918 ou 920px).

Je vous colle le code de mon T-E pour que vous voyez ce qui peux clocher.

Merci d'avance.

Code:

{* Example of resizeable *}
{*
{include file='include/autosize.inc.tpl'}
*}

{if isset($errors)}
<div class="errors">
  <ul>
    {foreach from=$errors item=error}
    <li>{$error}</li>
    {/foreach}
  </ul>
</div>
{/if}

{if isset($infos)}
<div class="infos">
  <ul>
    {foreach from=$infos item=info}
    <li>{$info}</li>
    {/foreach}
  </ul>
</div>
{/if}

{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if}

<div id="imageHeaderBar">
  <div class="browsePath">
    {$SECTION_TITLE}
    {$LEVEL_SEPARATOR}{$current.TITLE}
  </div>
  <div class="imageNumber">{$PHOTO}</div>
  {if $SHOW_PICTURE_NAME_ON_TITLE }
  <h2>{$current.TITLE}</h2>
  {/if}
</div>

<div id="imageToolBar">
  <div class="randomButtons">
    {if isset($U_SLIDESHOW_START) }
      <a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_slideshow.png" class="button" alt="{'slideshow'|@translate}"></a>
    {/if}
    {if isset($U_METADATA) }
      <a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/metadata.png" class="button" alt="metadata"></a>
    {/if}
    {if isset($current.U_DOWNLOAD) }
      <a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/save.png" class="button" alt="{'download'|@translate}"></a>
    {/if}
    {if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
    {if isset($favorite) }
      <a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/{if $favorite.IS_FAVORITE}del_favorite{else}favorite{/if}.png" class="button" alt="favorite" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}"></a>
    {/if}
    {if !empty($U_SET_AS_REPRESENTATIVE) }
      <a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as category representative'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/representative.png" class="button" alt="{'representative'|@translate}"></a>
    {/if}
    {if isset($U_ADMIN) }
      <a href="{$U_ADMIN}" title="{'Modify information'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/preferences.png" class="button" alt="{'edit'|@translate}"></a>
    {/if}
    {if isset($U_CADDIE) }{*caddie management BEGIN*}
<script type="text/javascript">
{literal}function addToCadie(aElement, rootUrl, id)
{
if (aElement.disabled) return;
aElement.disabled=true; 
var y = new PwgWS(rootUrl);

y.callService(
  "pwg.caddie.add", {image_id: id} ,
  {
    onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
    onSuccess: function(result) { aElement.disabled = false; }
  }
  );
}{/literal}
</script>
      <a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}); return false;" title="{'add to caddie'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/caddie_add.png" class="button" alt="{'caddie'|@translate}"></a>
    {/if}{*caddie management END*}
  </div>
  {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
  </div> 
  
  <div align="center">
  <table border="0" cellpadding="0" style="border-collapse: collapse">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

<div align="center">
  <table border="3" cellpadding="0" cellspacing="0" width="90%" style="border-collapse:collapse" bordercolor="#BF7EA5" bordercolorlight="#BF7EA5" bordercolordark="#BF7EA5" bgcolor="#FFC1E8">
    <tr>
      <td>

<!-- imageToolBar -->

<div id="theImage">
{$ELEMENT_CONTENT}

{if isset($COMMENT_IMG)}
<p>{$COMMENT_IMG}</p>
{/if}

{if isset($U_SLIDESHOW_STOP) }
<p>
  [ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|@translate}</a> ]
</p>
{/if}

</div>

{if $DISPLAY_NAV_THUMB}
{if isset($previous) }
<a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev">
  <img src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}">
</a>
{/if}
{if isset($next) }
<a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next">
  <img src="{$next.THUMB_SRC}" alt="{$next.TITLE}">
</a>
{/if}
{/if}

<table id="standard" class="infoTable" summary="{'Some info about this picture'|@translate}">
  {if $display_info.author}
  <tr id="Author">
    <td class="label">{'Author'|@translate}</td>
    <td class="value">{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</td>
  </tr>
  {/if}
  {if $display_info.created_on}
  <tr id="datecreate">
    <td class="label">{'Created on'|@translate}</td>
    <td class="value">{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}</td>
  </tr>
  {/if}
  {if $display_info.posted_on}
  <tr id="datepost">
    <td class="label">{'Posted on'|@translate}</td>
    <td class="value">{$INFO_POSTED_DATE}</td>
  </tr>
  {/if}
  {if $display_info.dimensions}
  <tr id="Dimensions">
    <td class="label">{'Dimensions'|@translate}</td>
    <td class="value">{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</td>
  </tr>
  {/if}
  {if $display_info.file}
  <tr id="File">
    <td class="label">{'File'|@translate}</td>
    <td class="value">{$INFO_FILE}</td>
  </tr>
  {/if}
  {if $display_info.filesize}
  <tr id="Filesize">
    <td class="label">{'Filesize'|@translate}</td>
    <td class="value">{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</td>
  </tr>
  {/if}
  {if $display_info.tags}
  <tr id="Tags">
    <td class="label">{'Tags'|@translate}</td>
    <td class="value">
      {if isset($related_tags)}
        {foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}
        <a href="{$tag.URL}">{$tag.name}</a>{/foreach}
      {/if}
    </td>
  </tr>
  {/if}
  {if $display_info.categories}
  <tr id="Categories">
    <td class="label">{'Categories'|@translate}</td>
    <td class="value">
      {if isset($related_categories)}
      <ul>
        {foreach from=$related_categories item=cat}
        <li>{$cat}</li>
        {/foreach}
      </ul>
      {/if}
    </td>
  </tr>
  {/if}
  {if $display_info.visits}
  <tr id="Visits">
    <td class="label">{'Visits'|@translate}</td>
    <td class="value">{$INFO_VISITS}</td>
  </tr>
  {/if}

{if $display_info.average_rate and isset($rate_summary) }
  <tr id="Average">
    <td class="label">{'Average rate'|@translate}</td>
    <td class="value" id="ratingSummary">
    {if $rate_summary.count}
      {assign var='rate_text' value='%.2f (rated %d times)'|@translate }
      {$pwg->sprintf($rate_text, $rate_summary.average, $rate_summary.count) }
    {else}
      {'no rate'|@translate}
    {/if}
    </td>
  </tr>
{/if}
  
{if isset($rating)}
  <tr id="rating">
    <td class="label">
      <span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this picture'|@translate}{/if}</span>
    </td>
    <td class="value">
      <form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;">
      <div>&nbsp;
      {foreach from=$rating.marks item=mark name=rate_loop}
      {if !$smarty.foreach.rate_loop.first} | {/if}
      {if isset($rating.USER_RATE) && $mark==$rating.USER_RATE}
        <input type="button" name="rate" value="{$mark}" class="rateButtonSelected" title="{$mark}">
      {else}
        <input type="submit" name="rate" value="{$mark}" class="rateButton" title="{$mark}">
      {/if}
      {/foreach}
      <script type="text/javascript" src="{$ROOT_URL}themes/default/js/rating.js"></script>
      <script type="text/javascript">
      makeNiceRatingForm( {ldelim}rootUrl: '{$ROOT_URL|@escape:"javascript"}', image_id: {$current.id},
      updateRateText: "{'Update your rating'|@translate|@escape:'javascript'}", updateRateElement: document.getElementById("updateRate"),
      ratingSummaryText: "{'%.2f (rated %d times)'|@translate|@escape:'javascript'}", ratingSummaryElement: document.getElementById("ratingSummary") {rdelim} );
      </script>
      </div>
      </form>
    </td>
  </tr>
{/if}

{if $display_info.privacy_level and isset($available_permission_levels) }
  <tr id="Privacy">
    <td class="label">{'Who can see this photo?'|@translate}</td>
    <td class="value"> 
<script type="text/javascript">
{literal}function setPrivacyLevel(selectElement, rootUrl, id, level)
{
selectElement.disabled = true;
var y = new PwgWS(rootUrl);
y.callService(
  "pwg.images.setPrivacyLevel", {image_id: id, level:level} ,
  {
    method: "POST",
    onFailure: function(num, text) { selectElement.disabled = false; alert(num + " " + text); },
    onSuccess: function(result) { selectElement.disabled = false; }
  }
  );
}{/literal}
</script>
  <select onchange="setPrivacyLevel(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}, this.options[selectedIndex].value)">
    {foreach from=$available_permission_levels item=label key=level}
    <option label="{$label}" value="{$level}"{if $level == $current.level} selected="selected"{/if}>{$label}</option>
    {/foreach}
  </select>
  </td></tr>
{/if}

</table>

{if isset($metadata)}
<table id="Metadata" class="infoTable2" summary="{'Some more (technical) info about this picture'|@translate}">
{foreach from=$metadata item=meta}
  <tr>
    <th colspan="2">{$meta.TITLE}</th>
  </tr>
  {foreach from=$meta.lines item=value key=label}
  <tr>
    <td class="label">{$label}</td>
    <td class="value">{$value}</td>
  </tr>
  {/foreach}
{/foreach}
</table>
{/if}


<hr class="separation">

{if isset($COMMENT_COUNT)}
<div id="comments">
  {if $COMMENT_COUNT > 0}
    <h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
  {/if}
  {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}

  {if isset($comments)}
    {include file='comment_list.tpl'}
  {/if}

  {if isset($comment_add)}
  <form  method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment">
  <fieldset>
    <legend>{'Add a comment'|@translate}</legend>
    {if $comment_add.SHOW_AUTHOR}
    <label>{'Author'|@translate}<input type="text" name="author"></label>
    {/if}
    <label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label>
    <input type="hidden" name="key" value="{$comment_add.KEY}">
    <input class="submit" type="submit" value="{'Submit'|@translate}">
  </fieldset>
  </form>
  {/if}
</div>
{/if} {*comments*}

{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if}


      </td>
    </tr>
  </table>
</div>

<div align="center">
  <table border="0" cellpadding="0" style="border-collapse: collapse">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

Dernière modification par laraider (2010-10-05 15:44:43)


Croftement, Laraider.

Hors ligne

#10 2010-10-05 18:19:11

laraider
Membre
Perpignan - France
2010-09-01
263

Re: [Résolu] [DARK] Comment cadrer la page des photos ?

J'ai fini par trouver :)

Mon TE est très bien... c'est les marges du bloc "commentaires" qui étiraient mon tableau.

Donc problème résolu pour moi.

Bien-sur, si vous aussi vous voulez utiliser mon code (thème DARK) pour mettre vos photos dans un tableau, vous pouvez le prendre mais pensez à adapter vos couleurs et tailles à vos propres besoins.


Croftement, Laraider.

Hors ligne

  •  » Styles
  •  » [Résolu] [DARK] Comment cadrer la page des photos ?

Pied de page des forums

Propulsé par FluxBB

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