Facebook Cover Resize

This Ruby Gem let you display and resize both Facebook events and accounts cover images according to offset_x / offset_y provided by Facebook Graph API. Using this Gem, you can display cover images exactly as they are on Facebook.

To use this Gem, you have to grab 3 parameters from Facebook API:

• offset_x (positive integer)
• offset_y (positive integer)
• cover source (the URL of the image)

Aside from these data provided by Facebook, you'll also need the size of the original image. Personally I use the Fastimage Gem for this and it's working perfectly fine.

Add this line to your Gemfile:

gem 'facebook_cover_resize'

And then execute:

$ bundle

Or install it yourself as:

$ gem install facebook_cover_resize

This Gem contains an algorithm for image size computations, and some Rails view helpers. Using the view helpers to display and resize an event cover is as simple as:

- @event = Event.find(123)
# @event.cover: String (raw URL)
# @event.original: Array, containing 2 positive integers
# @event.offsets: Array, containing 2 integers

= event_cover_tag source: @event.cover, original: @event.cover_size, offsets: @event.offsets, width: 500

If you want to display an account cover:

- @account = Account.find(123)

= account_cover_tag source: @account.cover, original: @account.cover_size, offsets: @account.offsets, width: 500

Note: although this Gem handles resizing, you MUST respect the original Facebook width/height ratios, which is 1.91 (500px/262px) for events, and 2.66 (829px/312px) for an account cover. That's why you only have to set the new width for your thumbnails, height being automatically computed.

If you don't want to use Rails, you can however simply use the plain Algorithm:

FacebookCoverResize.compute(
  original: [original_width, original_height],
  offsets: [offset_x, offset_y],
  width: width_you_want_for_final_display_in_pixels,
  ratio: 1.91
)

This outputs an array containing 4 values :

[
  offset_y,
  offset_x,
  image_width,
  image_height
]

You can then build a container, surrounding an img tag, using these values like this :

<div
  style="
    width: 500px !important;       # Container width
    height: 262px !important;      # Container width / 1.91
    overflow: hidden !important;   
    position: relative !important;
    padding:0 !important
  ">
  <img
    style="
      position: absolute !important;
      top: 0px !important;        # offset_y
      left: 0px !important;       # offset_x
      width: 500px !important;    # image_width
      height:824px !important;    # image_height
      margin: 0 !important"
    src="FACEBOOK_URL/event_cover.jpg" # The cover source URL
  />
</div>

Bug reports and pull requests are welcome on GitHub at https://github.com/gbarillot/facebook_cover_resize.

The gem is available as open source under the terms of the MIT License.