Facebook Style Cover Image Reposition using jQuery & PHP

My tutorials on Facebook Style Scripts was very well appreciated. When I was in facebook site, I found one cool feature that is called “Cover Image Reposition“.

In this post, I’m very glad to explain you how to Reposition cover image using jQuery UI & PHP

I have used jQuery, jQuery UI & simple PHP image resize, crop library to crop an image at given co-ordinates

 jQuery UI Draggable – Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

We need to move the image on Y axis, So I kept Axis option  as Y

Axis – Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: “x”, “y”.

We need to disable auto scrolling while re-positioning(dragging) the image. So I set the scroll option as false

Event : drag( event, ui ) – Triggered while the mouse is moved during the dragging.

Syntax:

$( ".selector" ).draggable({

drag: function( event, ui ) {}

});

Event : stop( event, ui ) –  Triggered when dragging stops.

by using this stop event we need to get the Y co-ordinates & pass it to php file to crop the original image

Syntax:

$( ".selector" ).draggable({

stop: function( event, ui ) {}

});

jQuery function to Reposition the Cover Image

function repositionCover() {

$('.cover-wrapper').hide();

$('.cover-resize-wrapper').show();

$('.cover-resize-buttons').show();

$('.default-buttons').hide();

$('.screen-width').val($('.cover-resize-wrapper').width());

$('.cover-resize-wrapper img')

.css('cursor', 's-resize')

.draggable({

scroll: false,

axis: "y",
cursor: "s-resize",
drag: function (event, ui) {

y1 = $('.timeline-header-wrapper').height();

y2 = $('.cover-resize-wrapper').find('img').height();
if (ui.position.top >= 0) {

ui.position.top = 0;

}

else

if (ui.position.top <= (y1-y2)) {

ui.position.top = y1-y2;

}

},
stop: function(event, ui) {

$('input.cover-position').val(ui.position.top);

}

});

}

We need to call the above repositionCover() function while clicking on Reposition cover button

PHP code to crop the cover image

if(isset($_POST['pos']))

{

$crop_from_top = abs($_POST['pos']);

$default_cover_width = 918;

$default_cover_height = 276;

require_once("thumbncrop.inc.php"); //php class for image resizing & cropping
$tb = new ThumbAndCrop();
$tb->openImg("original.jpg"); //original cover image
$newHeight = $tb->getRightHeight($default_cover_width);
$tb->creaThumb($default_cover_width, $newHeight);
$tb->setThumbAsOriginal();
$tb->cropThumb($default_cover_width, $default_cover_height, 0, $crop_from_top);
  
 

$tb->saveThumb("cover.jpg"); //save cropped cover image
$tb->resetOriginal();
$tb->closeImg();
$data['status'] = 200;

$data['url'] = 'cover.jpg';

echo json_encode($data);

}

Click Save Reposition button & reload the page to make sure the changes

I hope you will be interested in downloading the script. Please download this script & use it in your projects.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!