I can retrieve facebook cover source and offset_y from graph api for example -
I get this -
"cover": {
"cover_id": "10151356812150381",
"source": ".jpg",
"offset_y": 54
}
But when i look at the actual facebook page for this, i see the top offset is -135px. How is that calculated from 54?
I want to display someones cover photo on my website, with the same offset as facebook. So I am basically doing -
<div class="ed-cover">
<img src=""/>
</div>
CSS -
.ed .ed-cover
{
height:315px;
overflow:hidden;
position:relative;
}
.ed .ed-cover img
{
width:100%;
position:absolute;
}
JS -
FB.api(artist, function (data) {
$('.ed-cover img').attr('src', data.cover.source).css("top", -1 * data.cover.offset_y);
});
But the CSS offset here for the "top" property is incorrect as i get back 54 and the real offset is -135px;
I can retrieve facebook cover source and offset_y from graph api for example -
https://graph.facebook./Inna
I get this -
"cover": {
"cover_id": "10151356812150381",
"source": "http://sphotos.xx.fbcdn/hphotos-snc7/s720x720/419277_10151356812150381_302056140380_23114100_97822830_n.jpg",
"offset_y": 54
}
But when i look at the actual facebook page for this, i see the top offset is -135px. How is that calculated from 54?
I want to display someones cover photo on my website, with the same offset as facebook. So I am basically doing -
<div class="ed-cover">
<img src=""/>
</div>
CSS -
.ed .ed-cover
{
height:315px;
overflow:hidden;
position:relative;
}
.ed .ed-cover img
{
width:100%;
position:absolute;
}
JS -
FB.api(artist, function (data) {
$('.ed-cover img').attr('src', data.cover.source).css("top", -1 * data.cover.offset_y);
});
But the CSS offset here for the "top" property is incorrect as i get back 54 and the real offset is -135px;
Share Improve this question asked May 1, 2012 at 5:00 MoXplodMoXplod 3,8526 gold badges39 silver badges47 bronze badges6 Answers
Reset to default 8Does 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)
;
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) + '%');
});
I found this jquery plugin in the net. The plugin get the picture correctly with the right offset
here is the link http://restyr./getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/
Its look like it’s using the offset as percentage
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.
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.
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;
}