Our app shares a custom open graph story that included a 1200x630px preview image. The preview image however always displays as a small square when posted to the Facebook timeline.
As mentioned here, the header of the website I'm linking to already contains og:image and og:image:width and og:image:height. Still the image is cropped and only a square on the left is visible.
Is there any trick to make the image use the full width? User generated images are not the solution to go for because it removes the link from the open graph object and also stores the image in the user's photo albums.
I know that this has to be possible somehow because it works for apps such as Runtastic Results.
Related
this isn't a developer question. I am just a user and I am looking at historical archives online. I would like to download some documents and the site allows that. However, I can't open the image in another tab. I can save the image but when it's saved you can only see the part that was visualized inside the container, and not the whole image. I then have to zoom it in order to make it fit in the container before saving it, but it's small.
My question is: how can I find the original source of the image in order to download it and see it in its original size?
Here is the page I am talking about:
https://antenati.cultura.gov.it/ark:/12657/an_ua16656837/Lo4OQNV/
My site have 2 pages and the 2 pages contain a similar picture. If a user comes to the first page, he downloads the picture and then come to the second page, if I make the website so that the picture is shared between the 2 pages then the user no need to download the picture again?
If I want to put the same picture but different in size on the webpage, is it better to make 2 pictures by using image software editor or using CSS to change the width and the height of the picture?
you have answered your question.
if the image is from the same source, and if you have configured the caching on webserver correctly (and if the client has enabled cache), then there are no re-requests sent to view the same resource.
you dont need to create multiple images for different sizes, use html image attributes to show it in the grid dimensions you wish to.
Exception: if the original image is quite large, and you are not sure if the user will want to view the image, then create smaller image for faster loading. Thumbnails on a photo album is a good example for that. There is a program called re-sizer which accepts a folder and create a new set of images with the required dimensions
Resources below
Image Resizer
HTTP Compression
We are having problems with Facebook not showing images, which we noticed from 17 May.
We have images tagged in og:image, and this is showing up as a blank white space in the object debugger. Clicking on this blank white image/space shows the actual image expected in a new browser window, there are no issues with viewing the image within or outside the network (we tested using different devices and proxies to simulate access from outside Singapore, which is our main audience). The image is 300x225, but the debugger also show the "image not big enough" warning.
Sample scenario (HTTP removed from some links):
URL in question: www.hungrygowhere.com/dining-guide/what-to-eat/5-family-friendly-restaurants-to-book-online-*aid-53763f00/
og:image meta on the page: <meta property="og:image" content="http://staticc04.insing.com/images/f3/e0/10/00/pc_300x225.jpg" />
Warning on the debugger page: "Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'staticc04.insing.com/images/f3/e0/10/00/pc_300x225.jpg' will be used instead."
Noticeably the src attribute on the debugger is similar to this: fbexternal-a.akamaihd.net/safe_image.php?d=AQAfsdJpTPWk1IqW&url=http%3A%2F%2Fstaticc05.insing.com%2Fimages%2Fe2%2Fdb%2F10%2F00%2Fpc_300x225.jpg and going directly to this image via the browser shows a blank 1x1 gif. We tested using a 600x600 image (after seeing a post about maintaining aspect ratio) but it's the same: external.ak.fbcdn.net/safe_image.php?d=AQDZBb-0AZjyOp_B&url=http%3A%2F%2Fstaticc03.insing.com%2Fimages%2F57%2Fde%2F10%2F00%2Fstb_600x600.jpg
Our hypothesis is that safe_image.php is not accepting the image it retrieves, but we have no idea what or why this is happening.
We have a ticket open on the Facebook bugs support forum for this (developers.facebook.com/bugs/647132798635052) but no response after the initial round of clarifications, but we are hard pressed to find a solution.
There were no changes to our image storage solution over this timeframe. No rewrites or redirects, the image URLs are files by their own right.
Edited to add:
It is strictly safe_image.php that is choking on our image. See a screenshot from the object debugger: http://i.imgur.com/kl336l9.png
The image on the right is the same og:image, but since it's accessed directly by FB (not going through safe_image.php), it shows up.
We have been checking logs and we are returning HTTP status 206 to Facebook (we have been doing this for a while now) but this was changed to return 200 at all times. No change, we are still not getting any images.
Here's what I'm trying to do : I have about 20 og:image in meta tags on one page, and on this page I have both a like button AND a share button (the deprecated one). I need all the 20 og:image for the share feature, and I want Facebook to pick a particular image when building the popup window (or "flyout"), which will also be the image displayed on a facebook wall after publishing.
Currently, the picture in the popup window is the first og:image, but when I publish and go on my facebook wall, facebook picked another picture to display (the 7th of the og:image list, to be more precise).
I got nearly the same problem on the share feature, I can't obtain the first og:image to be the first thumbnail of the available thumbnails list. The 7th image in og:image list is always the first thumbnail proposed.
Anyone knows the picking algorithm of Facebook or something? I've been searching everywhere and I can't find a single clue on this.
I tried to swap images but I have to avoid putting the same image twice (1st and 7th). I really need some help.
Thank you
I think it's supposed to be random - regardless, if you only want one image, just use one og:url tag
I am trying to download a number of images, of differnet sizes, then after some cropping stitch them into one single image.
I am intending to do this in code on a WP7 device
My current approach uses n Image controls and waits for their ImageOpened events to fire. Once they have all been successfully opened I create a new Image for each and stick them into a StackPanel.
In then use WriteableBitmap to create a single image from the stacked images.
This code works 40/50% of the time. The rest of the time the layout engine decides to not bother laying them out in a horizontal stack. All the images get rendered on top of each other.
Is there a way of forcing the StackPanel to do a full layout pass? I have tried combinations of Arrange and Measure on both the Images and the StackPanel.
I found the article WP7: Generate Live Tile Images Locally (Without The Visual Tree). I am now using Henry Chong’s approach (which includes UpdateLayout) and my photo stitching is working great.
I cannot help but be amused by the fact that the answer to my question “how the hell do I force the layout to be updated” was answered with a method called “UpdateLayout” [dev exits stage left kicking himself]