OK... Got it to work nicely as follows:
- Copied the Jcrop css file and image associated with it (only one) to the Xataface css folder
- Copied the Jcrop js file to the Xataface js folder
- Copied two templates from the Dataface templates to the user based templates folder (the one in the same place as the templates_c folder you need to create upon a new site)
*They are: Dataface_Main_Template.html and Dataface_Form_Section_Template.html
- In Dataface_Main_Template.html, I added the following just above the terminating HEAD tag (around line # 77):
- Code: Select all
<script type="text/javascript" src="{$ENV.DATAFACE_URL}/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" type="text/css" href="{$ENV.DATAFACE_URL}/css/jquery.Jcrop.css"/>
{literal}
<script>
$(document).ready(function(){
$('.jcrop_target').Jcrop({
aspectRatio: 260/197,
onChange: updateCoords,
onSelect: updateCoords
});
function updateCoords(c)
{
$('input[name$="x_axis"]').val(c.x);
$('input[name$="y_axis"]').val(c.y);
$('input[name$="x2_axis"]').val(c.x2);
$('input[name$="y2_axis"]').val(c.y2);
$('input[name$="theWidth"]').val(c.w);
$('input[name$="theHeight"]').val(c.h);
};
});
</script>
{/literal}
In the table view in question, add the following fields to the fields.ini file:
- Code: Select all
[NL_photo]
Type = container
widget:type = file
allowed_extensions = jpg,png,gif,jpeg
widget:label = "Leading Photo of Article"
widget:description = "(Upload a photo at 260 x 197 pixels or crop it after uploading the photo. Cropping an image you previously cropped is not advisable.)"
savepath = ../images/article/
url = ../images/article
imageSize2Scale = 600x600
order = 50
[x_axis]
transient = 1
widget:type=hidden
[y_axis]
transient = 1
widget:type=hidden
[x2_axis]
transient = 1
widget:type=hidden
[y2_axis]
transient = 1
widget:type=hidden
[theWidth]
transient = 1
widget:type=hidden
[theHeight]
transient = 1
widget:type=hidden
[croptheimage]
transient = 1
widget:label = "Crop the image?"
widget:description = "(Only takes effect if you have selected the area to crop)"
widget:type=checkbox
All the variables above (except for NL_photo) are hidden and transient because they are for the JCrop javscript and the Delegate function. Not for the database.
-Edit the template copied over called Dataface_Form_Section_Template.html, Line # 61
- Code: Select all
Change this:
<img src="{$element.properties.image_preview}" style="display: block; max-height: 600px" alt="{$element.field.name} preview image"/>
To this:
<img class="jcrop_target" src="{$element.properties.image_preview}?time={$smarty.now}" style="display: block; max-height: 600px" alt="{$element.field.name} preview image"/>
In the delegate class for this particular table ("thetablename".php) add or edit this BeforeSave function:
- Code: Select all
function beforeSave(&$record) {
// (...Some code you wish to use here, followed by this condition below)
// If the Crop Image checkmark is on and there is a selection area set...Let's crop!
if ( (($record->val('theWidth') != 0) || ($record->val('theHeight') != 0)) && ($record->val('croptheimage') == 1) ) {
$imageFieldVars =& $record->_table->getField('NL_photo'); // gets the field definition of the image field for the current table.
$savepath = $imageFieldVars['savepath']; // path to the directory where images are saved for this field.
//die;
$picture = new Imagick($savepath.$record->val('NL_photo'));
$picture->cropImage( $record->val('theWidth'), $record->val('theHeight'), $record->val('x_axis'), $record->val('y_axis'));
$picture->resizeImage(260, 197, Imagick::FILTER_LANCZOS,1, true);
$picture->writeImage($cropped);
$picture->clear();
$picture->destroy();
}
}
Also in the same delegate class I added these to functions to render the IMG tag with a t=time parameter. This will force the image to update on the browser without referring to stored cache:
- Code: Select all
//Note: I used absolute paths to my image... I got lazy but could have used the variable of the path for the fields.ini and stripped the "..". Not your concern if you will change to your needs
function NL_photo__renderCell( &$record ) {
return "<img src=\"http://".$_SERVER['SERVER_NAME']."/images/article/".$record->strval('NL_photo')."?t=".time()."\" width=130>";
}
function NL_photo__htmlValue(&$record){
//return '<img src="'.$record->display('image_url').'" width="400"></img>';
return "<img id=\"croppable_photo\" src=\"http://".$_SERVER['SERVER_NAME']."/images/article/".$record->strval('NL_photo')."?t=".time()."\" width=130>";
}
That's it!
Important notes:
Change the field name
NL_photo (in all references here) to the name of the image field you are using) and change the savepath variable value to where ever your images are, or have been, stored.
Change the Aspect Ratio, (or remove it even), from the Script section of the new Dataface_Main_Template.html file should you not need it locked nor to this aspect ratio.
If changing the ratio or looking to change the image resize scale, edit the $picture->resizeImage call used in the delegate class, shown in the example above, to your preference.
Hopefully I didn't forget something.
Also note: Variables x2_axis and y2_axis were not needed but I left it in for those who might want it.
With this, no Xataface core is modified and all works beautifully.
