Instagram Api Photos White lines - instagram

I am trying to fetch user photos from instagram api.
The url i am querying is:
https://api.instagram.com/v1/users/self/media/recent?access_token={access_token}
Note that i am only using access token and there's no need to register my app. I only want to get user photos. The thing is It returns original images and not the square ones. Why? All I want to do is to get all photos in the same size, but it returns original sizes.I tried standard_resolution and every solution I met but finally, There's more than I thought. Photos even have white lines which is disgusting to be shown on my website.
P.S. I want to get all photos ,all of them in the same sizes and without any white lines. Guys,i know instagram so often changes these kind of things,but maybe you've found the solution to my problem.

The Instagram url in standard resolution is always square:
https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/20759276_1125417337622604_960083034999095296_n.jpg
If you want to get the original image from this then use (changing url pattern):
https://scontent.cdninstagram.com/t51.2885-15/20759276_1125417337622604_960083034999095296_n.jpg
Some image which is not having 640 resolution than the standard resolution introduces white line.
in that case to get the original square image we need to go lower than 640x640
This is the url pattern for 320x320:
https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/20759276_1125417337622604_960083034999095296_n.jpg

Related

URL preview image strategy

I'm trying to implement own URL preview service and I thought the following strategy for figuring out more or less accurate preview image was enough:
look for og:image first
if no og:image was found look for link with rel="image_src" next
if nothing found, look for first image in a body with preferrable aspect ratio, larger than assumed size (eg. > 50x50).
But looks like there are sites which don't fall in any of these rules yet still having a nice preview generated by slack or facebook. 500px is one of them - any hint where following preview images comes from?

iPhone images rotate 90 degrees when using cloudinary

I use Cloudinary for my blog site (built with node js).
My problem is that when I upload an image from an iPhone, it rotates 90 degrees. I have already tried angle: "ignore" but this does not seem to work. I think it has to do with the exif information. How do I get rid of it or am I using the wrong cloudinary parameters?
(also does not work when I include a_ignore in the url)
Here is the upload code:
let result = await cloudinary.uploader.upload(req.file.path, {resource_type: type, angle:"ignore"});
I'll start by recommending to remove angle: "ignore" from the upload call parameters, try to upload again, and then you probably experience one of the following cases:
The original may not have any embedded rotation metadata and therefore there's no way to know what's the correct rotation.
The original may have the rotation metadata, and the delivery URL was of the original, which by default sends the original image, as is, without any Cloudinary processes. So far so good, however, at that point, it's up to the client/device to be responsible to parse the metadata and render it correctly by the rotation metadata, and unfortunately, there are indeed cases of clients "ignoring" the rotation metadata when rendering images.
The image was both rotated manually AND the metadata wasn't stripped, which may result in an extra (unnecessary) rotation.
After you check which case you think you might be on, here are some possible ways to fix:
For case #1 - In case you have access to the original unrotated and un-metadata-stripped version of the image, try to upload that one again instead.
For case #2 - On delivery, instead of using the original image's delivery URL, try to use a derived version of it (e.g., add q_auto to the URL as a transformation). Using any of Cloudinary's transformations will automatically optimize the image before delivery, but importantly for this case, it'll also rotate the image by the rotation metadata info (assuming it has one), and last but not least, will strip the metadata, so it'll always show the image by the intended rotation.
For case #3 - Usually a possible fix for this is to indeed add angle: "ignore", which is, as mentioned previously, recommended as a delivery transformation (a_ignore in the URL) rather than as part of the upload parameters.
If you could share the original image here, I'll be happy to take a closer look and offer solutions. If privacy is an issue, share it with Cloudinary's support team who will be happy to assist.

How to get Instagram custom square size image other than thumbnail

I've been using the below code to get the square size images of 320x320 square size images using the instagram API returned images.
$image = $vm['images']['thumbnail']['url'];
$image = str_replace('s150x150/', 's320x320/', $image);
And looks like instagram is now not returining those square size images. Have any one encounter such problems while fetching the instgram images using instagram API? or is there any way to get the thumbnail size images other than 150x150?
It's not that simple as substituting the dimensions in the URL. This technique seemed to work in the past and still works for some images, but doesn't seem to work for every image now.
If you look at the API response listing all the available image sizes, you'll notice that they all have different hashes in them.
Just use the actual URLs returned by the API for each size of the photo.

Given a URL retrieve the largest image on that page with Node

I'm looking to build a feature into an Angular.js web app that allows a user to paste a url to an eCommerce site like Amazon or Zappos and retrieve the main product image from that page. My plan is to post the url to my express API and handle the image retrieval on the server.
My initial plan was to download the raw html, parse it out with htmlparser, select all the html image elements with soupselect and retrieve their src attributes. Ideally I would like to implement a solution that would work across any site, and not just hardcode values for a particular retailer's site (using specific known css class names). One of the assumptions I made was that the largest image on the page would likely be the main product image, with this logic I decided I would try to sort the images by file size. My idea was to make a http head request with the src url for each of the images to determine their size with the content-length header property. So far this approach has worked well but I would really like to avoid making so many http requests even if they are only head requests.
I feel there is a better way of doing this, would it be easier to use something like PhantomJS to load the entire page and parse it that way? I was trying to make this work as quick as possible and thus avoiding downloading all of the images. Does anyone have any suggestions?
I would think the best image to use isn't the one with the largest file size, but the image that is displayed largest on the page. PhantomJS might be able to help you determine that. Load the page, but instruct PhantomJS not to load images. Then pick the image element whose calculated dimensions are biggest. This will only work if the page uses CSS or width and height attributes on the img to give it dimension.
Alternatively, you could send the image URLs back to the client, and have the client fetch the images and figure out which is biggest. That limits the number of requests your server has to make, and it allows the user to quickly pick a different image if the largest isn't the best.

flickr api photos.search by tags or by text results show broken image

I have a question:
for some reason when I do search on flickr either by tags or by text and I receive the results , I try to show them as a small image on my html , although I receive 500 results about 1-3 of them are shown as a broken image the rest are fine.but when I click on the "broken image" it does send me over to the correct Image at the flickr site
(every image is also a link to the original location in flickr.com and the link works well).
what can be the reason? is it a well known bug ?
Thanks
Mary
This is a bit of a kludge, but if the images are not broken, you can attach an onError event to them and re-load them at that time. It might provoke the broken ones to "fix" themselves.

Resources