0002388: Thumbnail croop in page element_set_ranks

(0005971)
Gotcha (developer)
2012.01.30 17:28

Bon pour br2.3 + thème clear.
Ne fonctionne pas avec Roma !

Dans .\admin\themes\default\theme.css
Ajouter :
/* Page element_set_ranks.tpl */
UL.thumbnails li.rank-of-image {
    margin: 5px 5px 15px 5px;
}
UL.thumbnails li.rank-of-image span.wrap2:hover {
    background-color: #999999;
}
UL.thumbnails li.rank-of-image span.wrap2 {
  border: none;
  background-color: #DDDDDD;
  cursor: move;
}
UL.thumbnails li.rank-of-image span.wrap1 {
  margin: 0 0 5px;

Contenu du fichier element_ste_ranks.tpl

{footer_script require='jquery.ui.sortable'}{literal}
jQuery(document).ready(function() {
  function checkOrderOptions() {
    jQuery("#image_order_user_define_options").hide();
    if (jQuery("input[name=image_order_choice]:checked").val() == "user_define") {
      jQuery("#image_order_user_define_options").show();
    }
  }

  jQuery('ul.thumbnails').sortable( {
    revert: true, opacity: 0.7,
    handle: jQuery('.rank-of-image').add('.rank-of-image img'),
    update: function() {
      jQuery(this).find('li').each(function(i) {
        jQuery(this).find("input[name^=rank_of_image]").each(function() {
          jQuery(this).attr('value', (i+1)*10)
        });
      });

      jQuery('#image_order_rank').attr('checked', true);
      checkOrderOptions();
    }
  });

  jQuery("input[name=image_order_choice]").click(function () {
    checkOrderOptions();
  });

  checkOrderOptions();
});
jQuery(document).ready(function() {
jQuery('.wrap1').tipTip({
'delay' : 0,
'fadeIn' : 200,
'fadeOut' : 200
});
});

jQuery(window).load(function() {
    var max_dim = 0;
    $(".thumbnails img").each(function () {
        max_dim = Math.max(max_dim, $(this).height(), $(this).width() );
    });
    max_dim += 7;
        $("span.wrap1, ul.thumbnails li, ul.thumbnails label").css('width', max_dim+'px').css('height', max_dim+'px');
      });
{/literal}{/footer_script}

<h2>{'Manage photo ranks'|@translate}</h2>

<h3>{$CATEGORIES_NAV}</h3>

<form action="{$F_ACTION}" method="post">
{if !empty($thumbnails)}

  <fieldset>
    <legend>{'Manual order'|@translate}</legend>
    {if !empty($thumbnails)}

{'Drag to re-order'|@translate}

    <ul class="thumbnails">
      {foreach from=$thumbnails item=thumbnail}
      <li class="rank-of-image">
        <span class="wrap1" title="{$thumbnail.NAME|@replace:'"':' '}">
          <label>
            <span class="wrap2">
            <img src="{$thumbnail.TN_SRC}" class="thumbnail" alt="{$thumbnail.NAME|@replace:'"':' '}">
            </span>
        </span>
          <input type="text" name="rank_of_image[{$thumbnail.ID}]" value="{$thumbnail.RANK}" style="display:none">
          </label>

      {/foreach}

    {/if}
  </fieldset>
{/if}

  <fieldset>
    <legend>{'Sort order'|@translate}</legend>
    <p class="field">
      <input type="radio" name="image_order_choice" id="image_order_default" value="default"{if $image_order_choice=='default'} checked="checked"{/if}>
      <label for="image_order_default">{'Use the default photo sort order (defined in the configuration file)'|@translate}</label>

    <p class="field">
      <input type="radio" name="image_order_choice" id="image_order_rank" value="rank"{if $image_order_choice=='rank'} checked="checked"{/if}>
      <label for="image_order_rank">{'manual order'|@translate}</label>

    <p class="field">
      <input type="radio" name="image_order_choice" id="image_order_user_define" value="user_define"{if $image_order_choice=='user_define'} checked="checked"{/if}>
      <label for="image_order_user_define">{'automatic order'|@translate}</label>
      <div id="image_order_user_define_options">
      {foreach from=$image_orders item=order}
      <p class="field">
        <select name="order_field_{$order.ID}">
          {html_options options=$image_order_field_options selected=$order.FIELD }
        </select>
        <select name="order_direction_{$order.ID}">
          {html_options options=$image_order_direction_options selected=$order.DIRECTION }
        </select>

      {/foreach}
      </div>
  </fieldset>

    <input class="submit" type="submit" value="{'Submit'|@translate}" name="submit">

    <label>
      <input type="checkbox" name="image_order_subcats" id="image_order_subcats">
      {'Apply to sub-albums'|@translate}
    </label>

</form>

(0005972)
rvelices (developer)
2012.01.30 18:49

I think the small size was on purpose so that you can easily drag & drop. Having a 150px thumbnail would make it virtually impossible to move a photo with more than 10-15 positions

(0006113)
plg (manager)
2012.03.14 21:07

what may be smart with Piwigo 2.4 is to use the square size, CSS resized to 100x100px.

(0006215)
flop25 (developer)
2012.04.17 15:12

agree with rvelice. I will just remove the old CSS and add a better one since the square size has been implemented

(0006216)
svn (reporter)
2012.04.17 15:27

[Subversion] r14205 by flop25 on trunk

-----[Subversion commit log]----------------------------------------------------
feature:2388
on element_set_ranks, no more clipping due to the use of the default square size

(0006217)
flop25 (developer)
2012.04.17 15:30

Because of the use of the default square size, the user still can increase the size via the multi-size page.

Issue History
Date Modified	Username	Field	Change
2011.08.05 19:08	Gotcha	New Issue
2011.08.05 19:08	Gotcha	browser	=> any
2011.08.05 19:08	Gotcha	Web server	=> Apache 1.3.x
2012.01.30 17:14	Gotcha	Status	new => assigned
2012.01.30 17:14	Gotcha	Assigned To	=> Gotcha
2012.01.30 17:28	Gotcha	Note Added: 0005971
2012.01.30 17:29	Gotcha	File Added: capture_-_20120130-172847_-_918.png
2012.01.30 17:29	Gotcha	File Added: capture_-_20120130-172905_-_919.png
2012.01.30 18:49	rvelices	Note Added: 0005972
2012.03.14 21:07	plg	Note Added: 0006113
2012.04.17 15:12	flop25	Note Added: 0006215
2012.04.17 15:12	flop25	Assigned To	Gotcha => flop25
2012.04.17 15:27	svn	Checkin
2012.04.17 15:27	svn	Note Added: 0006216
2012.04.17 15:30	flop25	Note Added: 0006217
2012.04.17 15:30	flop25	Status	assigned => resolved
2012.04.17 15:30	flop25	Fixed in Version	=> 2.4.0RC3
2012.04.17 15:30	flop25	Resolution	open => fixed
2012.06.22 11:34	plg	Status	resolved => closed
2012.06.22 11:34	plg	Target Version	=> 2.4.0RC3

Notes
(0005971) Gotcha (developer) 2012.01.30 17:28	Bon pour br2.3 + thème clear. Ne fonctionne pas avec Roma ! Dans .\admin\themes\default\theme.css Ajouter : /* Page element_set_ranks.tpl / UL.thumbnails li.rank-of-image { margin: 5px 5px 15px 5px; } UL.thumbnails li.rank-of-image span.wrap2:hover { background-color: #999999; } UL.thumbnails li.rank-of-image span.wrap2 { border: none; background-color: #DDDDDD; cursor: move; } UL.thumbnails li.rank-of-image span.wrap1 { margin: 0 0 5px; Contenu du fichier element_ste_ranks.tpl {footer_script require='jquery.ui.sortable'}{literal} jQuery(document).ready(function() { function checkOrderOptions() { jQuery("#image_order_user_define_options").hide(); if (jQuery("input[name=image_order_choice]:checked").val() == "user_define") { jQuery("#image_order_user_define_options").show(); } } jQuery('ul.thumbnails').sortable( { revert: true, opacity: 0.7, handle: jQuery('.rank-of-image').add('.rank-of-image img'), update: function() { jQuery(this).find('li').each(function(i) { jQuery(this).find("input[name^=rank_of_image]").each(function() { jQuery(this).attr('value', (i+1)10) }); }); jQuery('#image_order_rank').attr('checked', true); checkOrderOptions(); } }); jQuery("input[name=image_order_choice]").click(function () { checkOrderOptions(); }); checkOrderOptions(); }); jQuery(document).ready(function() { jQuery('.wrap1').tipTip({ 'delay' : 0, 'fadeIn' : 200, 'fadeOut' : 200 }); }); jQuery(window).load(function() { var max_dim = 0; $(".thumbnails img").each(function () { max_dim = Math.max(max_dim, $(this).height(), $(this).width() ); }); max_dim += 7; $("span.wrap1, ul.thumbnails li, ul.thumbnails label").css('width', max_dim+'px').css('height', max_dim+'px'); }); {/literal}{/footer_script} <h2>{'Manage photo ranks'\|@translate}</h2> <h3>{$CATEGORIES_NAV}</h3> <form action="{$F_ACTION}" method="post"> {if !empty($thumbnails)} <input class="submit" type="submit" value="{'Submit'\|@translate}" name="submit"> <fieldset> <legend>{'Manual order'\|@translate}</legend> {if !empty($thumbnails)} {'Drag to re-order'\|@translate} <ul class="thumbnails"> {foreach from=$thumbnails item=thumbnail} <li class="rank-of-image"> <span class="wrap1" title="{$thumbnail.NAME\|@replace:'"':' '}"> <label> <span class="wrap2"> <img src="{$thumbnail.TN_SRC}" class="thumbnail" alt="{$thumbnail.NAME\|@replace:'"':' '}"> </span> </span> <input type="text" name="rank_of_image[{$thumbnail.ID}]" value="{$thumbnail.RANK}" style="display:none"> </label> {/foreach} {/if} </fieldset> {/if} <fieldset> <legend>{'Sort order'\|@translate}</legend> <p class="field"> <input type="radio" name="image_order_choice" id="image_order_default" value="default"{if $image_order_choice=='default'} checked="checked"{/if}> <label for="image_order_default">{'Use the default photo sort order (defined in the configuration file)'\|@translate}</label> <p class="field"> <input type="radio" name="image_order_choice" id="image_order_rank" value="rank"{if $image_order_choice=='rank'} checked="checked"{/if}> <label for="image_order_rank">{'manual order'\|@translate}</label> <p class="field"> <input type="radio" name="image_order_choice" id="image_order_user_define" value="user_define"{if $image_order_choice=='user_define'} checked="checked"{/if}> <label for="image_order_user_define">{'automatic order'\|@translate}</label> <div id="image_order_user_define_options"> {foreach from=$image_orders item=order} <p class="field"> <select name="order_field_{$order.ID}"> {html_options options=$image_order_field_options selected=$order.FIELD } </select> <select name="order_direction_{$order.ID}"> {html_options options=$image_order_direction_options selected=$order.DIRECTION } </select> {/foreach} </div> </fieldset> <input class="submit" type="submit" value="{'Submit'\|@translate}" name="submit"> <label> <input type="checkbox" name="image_order_subcats" id="image_order_subcats"> {'Apply to sub-albums'\|@translate} </label> </form>

(0005972) rvelices (developer) 2012.01.30 18:49	I think the small size was on purpose so that you can easily drag & drop. Having a 150px thumbnail would make it virtually impossible to move a photo with more than 10-15 positions

(0006113) plg (manager) 2012.03.14 21:07	what may be smart with Piwigo 2.4 is to use the square size, CSS resized to 100x100px.

(0006215) flop25 (developer) 2012.04.17 15:12	agree with rvelice. I will just remove the old CSS and add a better one since the square size has been implemented

(0006216) svn (reporter) 2012.04.17 15:27	[Subversion] r14205 by flop25 on trunk -----[Subversion commit log]---------------------------------------------------- feature:2388 on element_set_ranks, no more clipping due to the use of the default square size

(0006217) flop25 (developer) 2012.04.17 15:30	Because of the use of the default square size, the user still can increase the size via the multi-size page.

Relationships