how to compute Facebook graph api cover offset_y to pixel?

Question

I can retrieve facebook cover source and offset_y from graph api for example -

https://graph.facebook.com/Inna

I get this -

\"cover\": {
           


        

Answer 1

If you only set the negative percentage offset returned by Facebook API, it may work in 80% cases. However the only way to get 100% correct position is to use Claudios solution.

Answer 2

Does that really work for you? I have tested it with many images (landscape and portrait) and if you use %, the position is always slightly different. This here works good for me:

$.fn.positionate_cover = function (offset_y) {
    var cover_w = 850;
    var cover_h = 315;
    var img_w = $(this).width ();
    var img_h = $(this).height ();
    var real_img_h = (cover_w * img_h / img_w) - cover_h;

    $(this).css ({ top: parseInt (real_img_h * offset_y / 100 * -1) + "px" });
};

$(".ed-cover img")
    .attr ("src", data.cover.source)
    .positionate_cover (data.cover.offset_y)
;

Answer 3

MoXplod, are you sure about it?

From my experience the offset is a % of the invisible part of the image (aka the part that doesn't fit in the window).

For example: offset = 51 facebook cover photo size (web) = 851X315 scaled image size = 851X1135 top= -420px.

So top = 51% * (1135-315).

I have tried it with many diffrent cover photos of different sizes.

Answer 4

I found this jquery plugin in the net. The plugin get the picture correctly with the right offset

here is the link http://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

Its look like it’s using the offset as percentage

Answer 5

Yes i actually found the answer myself. The offset that facebook sends is in percentage!

The following worked perfectly -

    FB.api(artist, function (data) {
                            $('.ed-cover img').attr('src', data.cover.source)
.css("top", (-1 * data.cover.offset_y) + '%');
                        });

Answer 6

some solution on php i'm using PhpThumb_Factory:

        private $_cropX = 850;
        private $_cropY = 315;
        private $_origignalHeight;
        private $_origignalWidth;

 $scale = $this->caclScale($cover->cover->source);
        $thumb = \PhpThumb_Factory::create($imagePath);

                            $real_img_y = ($this->_cropX * $this->_origignalHeight / $this->_origignalWidth) - $this->_cropY;

                            $real_img_x = ($this->_cropY * $this->_origignalWidth / $this->_origignalHeight) - $this->_cropX;

                            $offset = $this->_authSession->offset;


                            $offset_x=($real_img_x * $offset['x'] / 100);



                            $offset_y=($real_img_y * $offset['y'] / 100);

                            $thumb->crop($offset_x, $offset_y, $this->_cropX, $this->_cropY);

                            $thumb->save($imagePath);


    private function caclScale($url) {
            $originalFileSizeParams = @exif_read_data($url);
    //            //$originalFileSize = $originalFileSizeParams['FileSize'];
    //            Zend_Debug::dump($originalFileSizeParams);
    //            die();

            $this->_origignalHeight = $originalFileSizeParams['COMPUTED']['Height'];
            $this->_origignalWidth = $originalFileSizeParams['COMPUTED']['Width'];

            if ($this->_origignalWidth < $this->_cropX) {
                $scale = ($this->_cropX * 100) / $this->_origignalWidth;
            } else {
                $scale = 100;
            }
            return $scale;
        }