mirror of
https://github.com/YunoHost-Apps/piwigo_ynh.git
synced 2024-09-03 20:06:03 +02:00
74 lines
2.2 KiB
Smarty
74 lines
2.2 KiB
Smarty
|
{html_head}
|
||
|
|
<link rel="stylesheet" type="text/css" href="themes/default/js/plugins/jquery.Jcrop.css" />
|
||
|
|
{/html_head}
|
||
|
|
{combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'}
|
||
|
|
|
||
|
|
<h2>{$TITLE} › {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
|
||
|
|
|
||
|
|
<form method="post">
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>{'Photo sizes with crop'|@translate}</legend>
|
||
|
|
{foreach from=$cropped_derivatives item=deriv}
|
||
|
|
<img src="{$deriv.U_IMG}" alt="{$ALT}" {$deriv.HTM_SIZE}>
|
||
|
|
{/foreach}
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>{'Center of interest'|@translate}</legend>
|
||
|
|
<p style="margin:0 0 10px 0;padding:0;">
|
||
|
|
{'The center of interest is the most meaningful zone in the photo.'|@translate}
|
||
|
|
{'For photo sizes with crop, such as "Square", Piwigo will do its best to include the center of interest.'|@translate}
|
||
|
|
{'By default, the center of interest is placed in the middle of the photo.'|@translate}
|
||
|
|
{'Select a zone with your mouse to define a new center of interest.'|@translate}
|
||
|
|
</p>
|
||
|
|
<input type="hidden" id="l" name="l" value="{if isset($coi)}{$coi.l}{/if}">
|
||
|
|
<input type="hidden" id="t" name="t" value="{if isset($coi)}{$coi.t}{/if}">
|
||
|
|
<input type="hidden" id="r" name="r" value="{if isset($coi)}{$coi.r}{/if}">
|
||
|
|
<input type="hidden" id="b" name="b" value="{if isset($coi)}{$coi.b}{/if}">
|
||
|
|
|
||
|
|
<img id="jcrop" src="{$U_IMG}" alt="{$ALT}">
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<input type="submit" name="submit" value="{'Submit'|@translate}">
|
||
|
|
</p>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{footer_script}
|
||
|
|
{literal}
|
||
|
|
function from_coi(f, total) {
|
||
|
|
return f*total;
|
||
|
|
}
|
||
|
|
|
||
|
|
function to_coi(v, total) {
|
||
|
|
return v/total;
|
||
|
|
}
|
||
|
|
|
||
|
|
function jOnChange(sel) {
|
||
|
|
var $img = jQuery("#jcrop");
|
||
|
|
jQuery("#l").val( to_coi(sel.x, $img.width()) );
|
||
|
|
jQuery("#t").val( to_coi(sel.y, $img.height()) );
|
||
|
|
jQuery("#r").val( to_coi(sel.x2, $img.width()) );
|
||
|
|
jQuery("#b").val( to_coi(sel.y2, $img.height()) );
|
||
|
|
}
|
||
|
|
function jOnRelease() {
|
||
|
|
jQuery("#l,#t,#r,#b").val("");
|
||
|
|
}
|
||
|
|
|
||
|
|
{/literal}
|
||
|
|
jQuery("#jcrop").Jcrop( {ldelim}
|
||
|
|
boxWidth: 500, boxHeight: 400,
|
||
|
|
onChange: jOnChange,
|
||
|
|
onRelease: jOnRelease
|
||
|
|
}
|
||
|
|
{if isset($coi)}
|
||
|
|
,function() {ldelim}
|
||
|
|
var $img = jQuery("#jcrop");
|
||
|
|
this.animateTo( [from_coi({$coi.l}, $img.width()), from_coi({$coi.t}, $img.height()), from_coi({$coi.r}, $img.width()), from_coi({$coi.b}, $img.height()) ] );
|
||
|
|
}
|
||
|
|
{/if}
|
||
|
|
);
|
||
|
|
{/footer_script}
|
||
|
|
|