For some of my og: meta tags, I'm using images that are much taller than they are wide - 1920px tall by 1280px wide. This results in a small thumbnail rather than an image that spans the full card.
Other than cropping the photo to a 1.91 to 1 ratio, is there anything I can do to force Facebook Debugger to "auto-crop" this image so that it utilizes the full card space? Would og:image:width and og:image:height be able to help, or anything else? Or is cropping the only option here?
Would og:image:width and og:image:height be able to help, or anything else? Or is cropping the only option here?
Cropping is the only option.
og:image:width and og:image:height are only used to tell the scraper about the actual dimensions of the image, so that in the context of a first share the preview for the user can be rendered more quickly; they can not be used to resize or crop the image.
Related
I'm trying to use share.php and I already have some thumbnails on the site. Some of these thumbs are wide and when I try to share it on FB by share.php (p[images][0]) the FB popup cut the thumb to display the thumb. There is a way to avoid this behavior?
On my searchs I see that the best wasy is to have square images.
I would like to do something like this image below:
There is any way to do this?
Thanks in advance...
To not have your images resized (or avoid big cuts), you'll need to use images with 1.91:1 aspect ratio and at least 1200x630 pixels.
There is more information here on item 4: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/
As you already have many posts/articles in your website, you can use a script like timthumb (https://code.google.com/p/timthumb/) to generate a resized thumbnail with borders when the image is not in that aspect ratio.
I have a website, with a simple 500x500 image listed appropriately in the <meta property="og:image" content="image.jpg" />
Facebook will sometimes crop and use the top of the image, the middle or in some cases the bottom to get it's required aspect ratio out of it. Is there anything I can do to control this? Or better yet, get it to take the entire square image in like every other social networking site does?
In my findings if your image is not 600x315 1200x630 or other 40:21 ratio facebook has a three step algorithm for determining what to crop as outlined below.
FINDINGS:
First Priortiy: Face detection. Detects center point of faces. If
multiple faces determines the ones that are closest together and bases
the crop on that.
Second Priority: Some sort of contrast detection: Detail > Colors >
Contrast. So if you had a picture of a face on the top of an image and
the rest of the image was blurred out because the picture was taken
with an extremely low aperture. Then, if you have a lot of colors in a
certain part of an image it would favor that and then if there was a
really dark image that had a bright white watermark in the bottom
right hand corner it would favor that.
Third Priority: This is more of a default, if the above two don't
work, it defaults to a center crop.
After researching on facebook I found this article about what image sizes and aspect ratio are recommended by facebook.
I haven't tried this personally, but this StackOverflow question says they have already tried what facebook recommended in the article.
I will try implementing image sizes recommended on facebook and will edit the answer appropriately.
Hope this helps.
What is the difference between width and device-width in CSS?
I know there have already been some questions around this, but I would like to understand these from a media query perspective to sniff browser/device, e.g. desktop/mobile/tablet.
The device-width and device-height features refer to the dimensions of the output device (that is, the screen size).
The width and height features, on the other hand, refer to the dimensions of the rendering surface, which is the viewport (for example, the browser window) for screen media, or the page box for print media.
http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features
I'm using the Fb.ui feed and I'm trying to find the picture size limits/requirements. Not all of my images appear using the feed, and I'd like to know exactly what the image requirements are. This is not well documented.
I'm pretty sure the open graph image rules apply:
An image URL which should represent your object within the graph. The
image must be at least 50px by 50px and have a maximum aspect ratio of
3:1. We support PNG, JPEG and GIF formats. You may include multiple
og:image tags to associate multiple images with your page.
What is the size of the image you are unable to post?
From my testing, the max size is 320x320. It'll keep your aspect ratio within those bounds.
Lets say I have an image that has a DPI of 72 and a width/height of 100px/100px.
However when I add the image and render the PDF, the image that is displayed is bigger than 100px/100px. How can I ensure that the when adding the image to the PDF using iTextSharp that I keep the same pixel dimensions as the original image, in this case 100px/100px?
It sounds like you'll want to check out the ScaleAbsolute method of the iTextSharp.text.Image, which will explicitly set the height/width of an image. There are a couple of related methods you'll want to read up to: ScalePercent and ScaleToFit.
These methods are described in the SourceForge iTextSharp tutorial which includes samples. See tge "Scaling and Rotating the Image" section.