Image cropping suggestions by users etc.

[alekseyn1]

Dear all,

I have searched the forum and have not found anything even close related to what I would like to have on my gallery.

The idea is to have a button under every image of the gallery so that the users can crop the image (and save the suggestion in comments) using something like this (look under the image) _http://www.samara-photo.ru/photo/id.35456.html

EDIT

OK... I have done it. Posting the MOD here (Admins, please move it once confirmed as functional with other users. I have this MOD running on version 1.7.7 with many mods implemented on the same site.

Demo here
http://www.fotodvor.com/details.php?image_id=801

Notes to consider before installation:

1. This MOD uses <div> to show your images... so you should control your images or table width in the template accordingly (I use default_full theme and it works great for me).

2. There probably are many improvements to this MOD, so guys with the better knowledge of PHP please suggest improvements and corrections (espesially to the issue with {template_url} not showing properly in functions.php (you'll see later on...

3. I have looked at the code from the site mentioned above, so part of the Javascript is probably theirs, part is in the open under the GPL licence.

4. I could not get the Black and White filter to work... maybe someone has a solution to this. Or maybe it's just my browser...

So, let's begin...

[MOD] Image crop suggestions by users incerted into comments

Step 1.
In details.php find:

Code: [Select]

"prepend_head_title"        => $image_name . " - "
));
and REPLACE with:

Code: [Select]

"prepend_head_title"        => $image_name . " - ",
            "image_address" => "./".MEDIA_DIR."/".$cat_id."/".$image_row['image_media_file']
));
Step 2.
In header.html find:

Code: [Select]

{if has_rss}
and add BEFORE:

Code: [Select]

<script type="text/javascript" src="{template_url}/js/imageCropper.js"></script>
<script type="text/javascript" src="{template_url}/js/functions.js"></script>

Step 3.
In details.html find:

Code: [Select]

{image}

and REPLACE with:

Code: [Select]


<div class="center" id="ipad" style="margin: 0px; padding: 20px; background-color: #aaaaaa">
<div id="holdr" style="position: absolute; left: 20px; top: 190px;"><a name="image"></a>
<img style="height: {height}px; width: {width}px;" src="{image_address}" id="im" onDblClick="maxArea(event);"></div>
<br/>

<!-- PhotoTools Pad -->
<style type="text/css">
img {
border: 0;
}
table.instruments {
background: #fff;
}
table.instruments td {
padding: 3px 6px; background: #e3e3e3; color: #2d2d2d; font: bold 11px Tahoma;
}
span.gradient {
padding: 3px 1px 3px 4px; cursor: pointer;
}
</style>

<center id="panel">
<table cellpadding="0" cellspacing="1" class="instruments">
<tr>
<td>Background:</td>
<td>
               <span onClick="setBG(this);" class="gradient" style="background-color:#000000;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#111111;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#222222;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#333333;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#444444;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#555555;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#666666;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#777777;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#888888;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#999999;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#AAAAAA;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#BBBBBB;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#CCCCCC;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#DDDDDD;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#EEEEEE;">&nbsp;
</span><span onClick="setBG(this);" class="gradient" style="background-color:#FFFFFF;">&nbsp;
</span>
</td>
<td>Image Brightness:</td>
<td>
               <span onClick="setBrightness(-10);" class="gradient" style="background-color:#000000;">&nbsp;
</span><span onClick="setBrightness( -9);" class="gradient" style="background-color:#080808;">&nbsp;
</span><span onClick="setBrightness( -8);" class="gradient" style="background-color:#111111;">&nbsp;
</span><span onClick="setBrightness( -7);" class="gradient" style="background-color:#181818;">&nbsp;
</span><span onClick="setBrightness( -6);" class="gradient" style="background-color:#222222;">&nbsp;
</span><span onClick="setBrightness( -5);" class="gradient" style="background-color:#333333;">&nbsp;
</span><span onClick="setBrightness( -4);" class="gradient" style="background-color:#444444;">&nbsp;
</span><span onClick="setBrightness( -3);" class="gradient" style="background-color:#555555;">&nbsp;
</span><span onClick="setBrightness( -2);" class="gradient" style="background-color:#666666;">&nbsp;
</span><span onClick="setBrightness( -1);" class="gradient" style="background-color:#777777;">&nbsp;
</span><span onClick="setBrightness(  0);" class="gradient" style="background-color:#888888;">&bull;
</span><span onClick="setBrightness(  1);" class="gradient" style="background-color:#999999;">&nbsp;
</span><span onClick="setBrightness(  2);" class="gradient" style="background-color:#AAAAAA;">&nbsp;
</span><span onClick="setBrightness(  3);" class="gradient" style="background-color:#BBBBBB;">&nbsp;
</span><span onClick="setBrightness(  4);" class="gradient" style="background-color:#CCCCCC;">&nbsp;
</span><span onClick="setBrightness(  5);" class="gradient" style="background-color:#D4D4D4;">&nbsp;
</span><span onClick="setBrightness(  6);" class="gradient" style="background-color:#DDDDDD;">&nbsp;
</span><span onClick="setBrightness(  7);" class="gradient" style="background-color:#E4E4E4;">&nbsp;
</span><span onClick="setBrightness(  8);" class="gradient" style="background-color:#EEEEEE;">&nbsp;
</span><span onClick="setBrightness(  9);" class="gradient" style="background-color:#F4F4F4;">&nbsp;
</span><span onClick="setBrightness( 10);" class="gradient" style="background-color:#FFFFFF;">&nbsp;
</span>
</td>
<td><a href="javascript:switchCropper();"><img id="b_cr" src="{template_url}/js/icon_crop_off.gif" alt="Crop"></a></td>
<td><a href="javascript:switchBW();"><img id="b_bw" src="{template_url}/js/icon_bw_off.gif" alt="Black and White"></a></td>
<td><a href="javascript:switchGoldS();"><img id="b_gs" src="{template_url}/js/icon_gold_off.gif" alt="Gold Sections"></a></td>
<td><a href="javascript:saveState();"><img id="b_ss" src="{template_url}/js/icon_paste.gif" alt="Incert into comments"></a></td>
</tr>
</table>
</center>
</div>

<form id="fo" name="fo"></form>
<script type="text/javascript" language="javascript">
imageCropper.useForm("fo");
imageCropper.addCroper('im','1','1',null,'fff', 'holdr');
imageCropper.hideMe();
var showCropper = false;
imageCropper.maximizeArea();
imas = dom.gI('im');
var isBW = false;
imas.style.filter = "Gray";
var showGoldS = false;
imageCropper.hideGoldS();
if (imas.filters)
{
imas.filters["Gray"].enabled = isBW;
}
var vOff = 0;
if (imas.width == 0)
{
vOff = 40;
}
if (navigator.userAgent.indexOf('Opera') != -1)
{
vOff = -8;
}
dom.gI('panel').style.marginTop = parseInt(imas.style.height) + 3 + vOff + 'px';
centerImage();
</script>

Step 4.
In file functions.php find function format_text and within it find:

Code: [Select]

$text = str_replace("\\'", "'", $text);

and ADD after:

Code: [Select]

//crop suggestion mod - template plug {template_url} does not function here for some reason
$crop_code_ = array("/\[CROP\:(.*?)\]/is" => "<a href=\"javascript:loadState($1)\"><img src=\"templates/default_full/js/icon_load.gif\"></a>");
$text = preg_replace(array_keys($crop_code_), array_values($crop_code_), $text);
//crop suggestion mod

in this case I could not find the solution to use {template_url} so I settled with the code above. Make sure you change the name of the path to your template.

Step 5.
Upload the attached file and unzip it into your active template folder

I hope I did not forget anything and I hope that you will like this MOD )))

[alekseyn1]

one problem fixed....

the solution is here

http://www.4homepages.de/forum/index.php?topic=6646.msg114267#msg114267

so the modification required to above is:

in step 4

instead of code given, you should add:

Code: [Select]

if ($bbcode == 1) {

//crop suggestion mod - template plug {template_url} does not function here for some reason
$crop_code_ = array("/\[CROP\:(.*?)\]/is" => "<a href=\"javascript:loadState($1)\"><img src=\"".TEMPLATE_PATH."/js/icon_load.gif\"></a>");
$text = preg_replace(array_keys($crop_code_), array_values($crop_code_), $text);
//crop suggestion mod
}

this will prevent the comment from being formatted in you miss the comment headline for example or if you try to edit the comment with crop suggestion from the ACP...

[fermachado]

Hi thanks for this nice Mod.

Works, but it have a problem in the buttons by clicking to choose a function  it shows a red cross instead of a blue button.  

You casn see here in my test site http://globalfoto.net/globalfototeste/details.php?image_id=238



Thanks
Fernando

[alekseyn1]

Hi thanks for this nice Mod.

Works, but it have a problem in the buttons by clicking to choose a function  it shows a red cross instead of a blue button.  

You casn see here in my test site http://globalfoto.net/globalfototeste/details.php?image_id=238

open the .js files and edit path to the image files there...

[fermachado]

Hi,

Thanks for fast reply.

Make this changes and works I have only one problem.

Dont show the arrows to make the crop see the image in attach

And another question the crop insert a code in the comment like this [CROP:0,0,600,466] how interpret the code.

Thanks a lot

[alekseyn1]

Dont show the arrows to make the crop see the image in attach

there are 2 .js files in the attachment that you should have placed in your templates folder. ImageCropper.js has links to arrows that you should edit (appr line 292). And looks like you have already fixed the icons issue in functions.js ))

And another question the crop insert a code in the comment like this [CROP:0,0,600,466] how interpret the code.

if you did the step 4 properly it should be working by now. Please check if you did step 4 (and also review the second post in this threat)


and by the way... I found why with this code, Internet explorer was adding a 3 pixel line under pictures.... this was due to the spaces between DIV tags believe it or not.... so.... in step 3:

instead of :

Code: [Select]

<div class="center" id="ipad" style="margin: 0px; padding: 20px; background-color: #aaaaaa">
<div id="holdr" style="position: absolute; left: 20px; top: 190px;"><a name="image"></a>
<img style="height: {height}px; width: {width}px;" src="{image_address}" id="im" onDblClick="maxArea(event);">

</div>
<br/>

<!-- PhotoTools Pad -->
you should have:

Code: [Select]

<div class="center" id="ipad" style="margin: 0px; padding: 20px; background-color: #aaaaaa">
<div id="holdr" style="position: absolute; left: 20px; top: 190px;"><a name="image"></a>
<img style="height: {height}px; width: {width}px;" src="{image_address}" id="im" onDblClick="maxArea(event);"></div><br/>

<!-- PhotoTools Pad -->

[fermachado]

Thanks,

I have a error in the path and now show the arrows  

About the includes/functions.php this $text = str_replace("\\'", "'", $text);
apear two times around line 1281 and 1355 in my fiunctions.php we need past your code two times?

I attach my functions.php maybe I make some error with the path to.
I think the other people dont konw very well this, because this is a great tool for all photographic communities

sorry the poor english
Thanks for your great help
 Fernando

[alekseyn1]

Yep... you did make a mistake in your path.. you forgot the "\" where it should not have been.

you have two instances of that line because of the PM mod (somebody must have installed this one for you if you did not know that  )

anyways, i have attached to corrected file. please check (backup your current version just in case)

[fermachado]

Thanks a lot my friend.