Follow Along as I Stumble on the Path to Learning RoR

Posts tagged “image

Facebook not Showing Open Graph Images

My image tags were right for Open Graph, but my images weren’t showing when when people tried to share on Facebook.

I found my answer on Stack Overflow here.

Apparently, if Facebook doesn’t already know of a page, it will not know about the image until after it is shared once (at which time it becomes aware of the page).

However, there’s a work around.  You have to specify additional attributes about the image – the height and the width (where the content value is the number of pixels for width and height, respectively):

<meta property=”og:image:width” content=”450″/>
<meta property=”og:image:height” content=”298″/>

 


Referencing an Image from CSS File in Asset Pipeline

In order to reference an image from the CSS file, I added .scss at the end of the .css file and referenced the image using this syntax:

background: url(asset-path(“example.png”,image)) no-repeat; 


Rounded Image Corners

I wondered how Twitter made all of the uploaded images have rounded corners. I found a wonderful jQuery script, jQuery corners which does just this:

http://jquery.malsup.com/corner/

apply an id to your picture, like so

:id=>”rounded_corners”

then add this script:

$(‘#rounded_corners’).corner();