How to Compute Facebook Graph API Cover Offset_Y to Pixel

how to compute Facebook graph api cover offset_y to pixel?

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) + '%');
                        });

facebook graph api: offset_y offset_x

The values for offset_x and offset_y are percentages of the size of the original image, not pixel values.

The percentages will range from 0 to 100, and will be a percentage of the overflow offset value of the resized image for the space.

For example, I have an image that is 720x480 px. The cover photo space is 851x315 px, so when the photo is resized to fit that space, it is 851x567.33 px. If I drag that image halfway down when I am positioning it for my cover, the offset_y that is returned will be 50. This translates to 50% of the "leftover" space that doesn't fit into the cover photo slot.

The "leftover" vertical (y) space will be 567.33 - 315 = 252.33 px. 50% of that space is 126.167. My top offset, in this case, will be -126.167 px.

So offset_x and offset_y are percentages of the pixel movement required to position the resized image into the photo space on Facebook.

// These values retreived ahead of time (Graph API, etc.)var offset_x = 0;var offset_y = 50;var fbCoverPhotoWidth = 851; // Known value, in pixelsvar fbCoverPhotoHeight = 315; // Known value, in pixels
// Create an image from the cover photo URL returned by the Graph APIvar img = new Image();img.src = "https://scontent.xx.fbcdn.net/v/t1.0-0/p480x480/your-photo-url-here.jpg";
// Calculate the scaling ratiovar ratio = Math.max(fbCoverPhotoWidth / img.width, fbCoverPhotoHeight / img.height);
// Convert the offset percentages to pixel valuesvar offset_x_pixels = Math.ceil(((img.width * ratio) - fbCoverPhotoWidth) * (offset_x / 100));var offset_y_pixels = Math.ceil(((img.height * ratio) - fbCoverPhotoHeight) * (offset_y / 100));
console.log(offset_x_pixels);console.log(offset_y_pixels);

How to calculate Facebook cover offset

So, in the end, I wasn't able to find an answer to this question anywhere, but I was able to achieve a satisfactory precision using an experimental method, that is, creating my own event and testing several cover pages by moving them a few pixels at a time. The formula to calculate the number of pixels of offset that need to be applied to the FB cover image in order to get the same frame as the one used in Facebook is as follows:

$pixelsFromAbove = (($imageHeight - $frameHeight) / 86 ) * $offset_y;
$pixelsFromLeft = (($imageWidth - $frameWidth) / 86 ) * $offset_y;

Frame height and width are 295 and 784 respectively. The "86" is the experimentally obtained magical number.

This solution works with the 2.1 version of FB API.

facebook graph api: understanding offset_y offset_x API

So I have experimented with this a lot and I am 100% sure the offset_x, offset_y are not properly documented and may not be even sufficient in many cases to even depict the offset

In my case I used two images listed below and did some experiment with different drags

The event was created on

https://www.facebook.com/events/901430313369669/

And data collected was below for the above 2 images

For the 2nd image you can see that whether i kept the image left aligned, right aligned or center aligned the offset were always 0. But the left was still calculated. This means facebook is not share the offset information correctly. It is most probably a bug based on observation from second image.

Also weird thing is the -77, 177 entries from the first image

Accessing full size (851x315) timeline cover photo via graph api with offset crop

I had discussion with Facebook Platform Team;

They are not ready to share the manual calculation to us.

and yes, it is possible to calculate value of c0.XXXX manually using your API offset_y value.

Here is my PHP code.

$fb_page_cover_json  =  json_decode( file_get_contents( 'https://graph.facebook.com/11111111?fields=cover'));

$fb_cover_image_url = $fb_page_cover_json->cover->source;

$image_info = getimagesize($fb_cover_image_url);
$image_width = $image_info[0];
$image_height = $image_info[1];                 

echo getTop($fb_page_cover_json->cover->offset_y,$image_width,$image_height);

function getTop($offset_y,$image_width,$image_height) {
    $cover_w = 851;
    $cover_h = 315;
    $img_w = $image_width;
    $img_h = $image_height;
    $real_img_h = ($cover_w * $img_h / $img_w) - $cover_h;
    $result = ($real_img_h * $offset_y / 100 * -1);

    return floor($result);
}

The method getTop will return the c0.XXX value.

Hope this helps some one.

Facebook API cover images offsets in background-position attributes

There is a problem with the interpretation.

The value 50 from fb api apparently refers to the offset in percentage as when using it in top, which means percentage of the containing block's height (spec here). And that is different to when using it in background-position (spec here). There is also an article here that visually shows the difference.

If you want to use background-position, the solution is to use px.
Alternatively, you can use top, either as % or px.

I have made the following code to compare your code, fb code, and what the fix should be (for all alternatives):

/* Your original code */.event-image { width: 500px; height: 178px; background-size: cover; background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg"); background-position: 0 50%;  /* "50" is from fb api, but not used correctly */}
/* FB actual code */.cover { width: 826px; height: 294px; position: relative; overflow: hidden;}.cover img { position: absolute; width: 100%; left: 0; top: -147px;  /* 294px * 50% = 147px, this is the correct usage of "50" from fb api */}
/* Your code if showing as big as FB image */.bigger-image { width: 826px; height: 294px; background-size: cover; background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg"); background-position: 0 50%; /* "50" is from fb api, but not used correctly */}
/* The correct code using "background-position" */.correct-image { width: 500px; height: 178px; background-size: cover; background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg"); background-position: 0 -89px;   /* 178px * 50% = 89px, this is the correct usage of "50" from fb api */}
/* The correct code using "top" in pct */.correct-cover { width: 500px; height: 178px; position: relative; overflow: hidden;}.correct-cover img.pct { position: absolute; width: 100%; left: 0; top: -50%;    /* the correct usage of "50" from fb api */}
/* The correct code using "top" in px */.correct-cover img.px { position: absolute; width: 100%; left: 0; top: -89px;  /* 178px * 50% = 89px, this is the correct usage of "50" from fb api */}

<h3>Your original code</h3><div class="event-image"></div><br />
<h3>FB actual code</h3><div class="cover"> <img src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" /></div><br />
<h3>Your code if showing as big as FB image</h3><div class="bigger-image"></div><br />
<h3>The correct code using "background-position"</h3><div class="correct-image"></div><br />
<h3>The correct code using "top" in pct</h3><div class="correct-cover"> <img class="pct" src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" /></div><br />
<h3>The correct code using "top" in px</h3><div class="correct-cover"> <img class="px" src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" /></div><br />

How to include Group cover photo in Group Info Endpoint on Facebook Graph API

You just have to add fields=cover to your query:

let groupInfoUrl = `https://graph.facebook.com/${group_id}?fields=cover&access_token=${accessToken}`;

---

Related Topics