Facebook Style Cover Image Reposition using jQuery & PHP

Last modified on by Karthikeyan K

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

Facebook Style Cover Page Reposition

 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 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.

View Live Demo  Download

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

You May Also Like

9 Responses

  1. Selvam says:

    I have one more question,actually, when i share any facebook page on my facebook timeline, then it get changed with smooth cover photo and thumb photo. how to achieve this in jquery. refer attachment image

  2. manoj says:

    this is an awasom article . thanx . .

  3. Simone says:

    Hello,Excellent article , a question I’d like to resize the image width to 1170px height that I have to put ?
    Right now I have 270px but when I save the image is not as is cropped .

    thanks

  4. Sebastian says:

    Hello, I see a error every save after the first time.

    Uncaught Error: cannot call methods on draggable prior to initialization; attempted to call method ‘destroy’

    Can be fixed?

  5. Sarika Sharma says:

    Hello I am tried this article in my localhost and getting error ‘Deprecated: Function eregi() is deprecated in ‘thumbncrop.inc.php’ on line 185 ‘ , could you please help me to resolve this.

    On line 185, i am finding this line of code( eregi(“[|]”, $percorso)

    Thanks in advance.

  6. Luke says:

    Is there anyway in which this can be made dynamic as when the HTML div changes size when viewing on a mobile device the $default_cover_width and height don’t match up with the Jquery offset… I have been trying so hard to get this to work on mobiles but I am having no luck at all. Thanks!

  7. Mahmudul Hasan says:

    Hello It’s not downloading.

Leave a Reply

Your email address will not be published. Required fields are marked *