Announcement

  •  » Themes
  •  » [elegant] changing picture.tpl to have more thumbnails

#1 2013-08-04 14:20:35

kyp_
Member
2013-06-17
84

[elegant] changing picture.tpl to have more thumbnails

Hi!

Sooo, I tried to do some simple editing in order to get more thumbnails in my elegant theme, but it's resisting my changes :)

Since a pictures say's more than...... ->

http://i.imgur.com/YYWtJoSl.jpg



What I did so far:
changed functions.inc and picture.tpl (from default theme)


Code:

/include/ functions.inc :

from 

    $previous = $start - $nb_element_page;
    $next = $start + $nb_element_page;


to
    $previous = $start - $nb_element_page;
    $previous2 = $start - ($nb_element_page - 1);
    $previous3 = $start - ($nb_element_page - 2);
    
    $next = $start + $nb_element_page;
    $next2 = $start + ($nb_element_page + 1);
    $next3 = $start + ($nb_element_page + 2);
    
    

/template-extension/default/picture.tpl :

from 


 <div id="infoSwitcher"></div>{*<!-- no significant white space for elegant-->
*}<div id="imageInfos">
{if $DISPLAY_NAV_THUMB}
  <div class="navThumbs">
    {if isset($previous)}
      <a class="navThumb" id="linkPrev" href="{$previous+1.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE|@escape}" rel="prev">
        <span class="thumbHover prevThumbHover"></span>
        <img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE|@escape}">
      </a>
    {/if}
    {if isset($next)}
      <a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE|@escape}" rel="next">
        <span class="thumbHover nextThumbHover"></span>
        <img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE|@escape}">
      </a>
    {/if}
  </div>
{/if}


to


<div id="infoSwitcher"></div> {*<!-- no significant white space for elegant-->
*}<div id="imageInfos">
{if $DISPLAY_NAV_THUMB}

  <div class="navThumbs">

    
    {if isset($previous)}
      <a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE|@escape}" rel="prev">
        <span class="thumbHover prevThumbHover"></span>
        <img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE|@escape}">
      </a>
    {/if}
        {if isset($previous2)}
                echo "previous2";
      <a class="navThumb" id="linkPrev2" href="{$previous2.U_IMG}" title="{'Previous2'|@translate} : {$previous2.TITLE|@escape}" rel="prev2">
        <span class="thumbHover prevThumbHover"></span>
        <img src="{$previous2.derivatives.square->get_url()}" alt="{$previous2.TITLE|@escape}">
      </a>
    {/if}
        {if isset($previous3)}
            echo "previous3";
      <a class="navThumb" id="linkPrev3" href="{$previous3.U_IMG}" title="{'Previous3'|@translate} : {$previous3.TITLE|@escape}" rel="prev3">
        <span class="thumbHover prevThumbHover"></span>
        <img src="{$previous3.derivatives.square->get_url()}" alt="{$previous3.TITLE|@escape}">
      </a>
    {/if}
        
    {if isset($next)}
      <a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE|@escape}" rel="next">
        <span class="thumbHover nextThumbHover"></span>
        <img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE|@escape}">
      </a>
    {/if}
        {if isset($next2)}
      <a class="navThumb" id="linkNext2" href="{$next2.U_IMG}" title="{'Next2'|@translate} : {$next2.TITLE|@escape}" rel="next2">
        <span class="thumbHover nextThumbHover"></span>
        <img src="{$next2.derivatives.square->get_url()}" alt="{$next2.TITLE|@escape}">
      </a>
    {/if}
        {if isset($next3)}
      <a class="navThumb" id="linkNext3" href="{$next3.U_IMG}" title="{'Next3'|@translate} : {$next3.TITLE|@escape}" rel="next3">
        <span class="thumbHover nextThumbHover"></span>
        <img src="{$next3.derivatives.square->get_url()}" alt="{$next3.TITLE|@escape}">
      </a>
    {/if}
  </div>
{/if}

Output

<div id="imageInfos" style=""><div class="navThumbs"><a id="linkPrev" class="navThumb" rel="prev" title="Previous : test2" href="picture.php?/5/category/2"> … </a><a id="linkNext" class="navThumb" rel="next" title="Next : test1" href="picture.php?/8/category/2"> … </a></div>

I also changed the theme.css from elegant so that all 6 thumbs would float from the left and order themselves according to the window size

Code:

#imageInfos #linkPrev         { float: left;}
#imageInfos #linkPrev2         { float: left;}
#imageInfos #linkPrev3         { float: left;}
#imageInfos #linkNext            { float: left;} 
#imageInfos #linkNext2        { float: left;} 
#imageInfos #linkNext3        { float: left;}

And since for some mysterious reasons, that are beyond me, the changes are not showing up in the output html. So where is my thinking flawed here :) ?

Thx in advance for any help !
Greets
Kyp


Cheers

Offline

 

#2 2013-08-05 12:23:17

flop25
Piwigo Team
2006-07-06
6932

Re: [elegant] changing picture.tpl to have more thumbnails

Hello and lol

first rule Never ever change the core files

Then you just created php variables, but you never told to Smarty to use those variables and where to render them

I recommend you to read http://piwigo.org/doc/doku.php?id=dev:e … e_creation and the Smarty doc


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#3 2013-08-05 15:12:20

kyp_
Member
2013-06-17
84

Re: [elegant] changing picture.tpl to have more thumbnails

Hi,

thanks for the reply, that will help :)

(I've read the plugin creation and smarty crashcourse, before posting this
thread, but that didn't help me much before.)


cheers
kyp


Cheers

Offline

 

#4 2013-08-05 15:25:19

flop25
Piwigo Team
2006-07-06
6932

Re: [elegant] changing picture.tpl to have more thumbnails

Check the Skeleton plugin yo assign values yo smarty variables.


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 
  •  » Themes
  •  » [elegant] changing picture.tpl to have more thumbnails

Board footer

Powered by FluxBB

github twitter facebook google+ newsletter Donate Piwigo.org © 2002-2019 · Contact