How to get thumbnails from any URL in iOS?

Question

In both chat apps, social apps have a feature, when we paste a link on text view it's giving us a thumbnail from that url,

Is this possible to do in an iOS app. If it is how may I do this?

What have you tried already? Have you made any attempt at looking for this yourself before asking the question? — Popeye, Mar 23 '16 at 08:42
Possible duplicate of [Create a thumbnail or image of an AVPlayer at current time](http://stackoverflow.com/questions/15360721/create-a-thumbnail-or-image-of-an-avplayer-at-current-time) — Popeye, Mar 23 '16 at 08:43
you can create a thumbnail anytime if you have the original image; YouTube basically provides the small thumbnails via its API, so if you use their API you must have seen that. — holex, Mar 23 '16 at 09:31

Mobile Developer · Answer 1 · 2016-03-23T09:09:07.920

8

I would parse html content and try to find links to .png, jpg etc files. Then check the resolution to exclude very small images or those specified as a background in css. As a result a user would get a list of filtered images like on the screenshot you attached.

As a parser you could use https://github.com/nolanw/HTMLReader

edited Mar 23 '16 at 09:09

answered Mar 23 '16 at 08:44

Mobile Developer

5,730
1
39
45

score 4 · Answer 2 · answered Aug 29 '17 at 15:11

Pages like Facebook use OpenGraph information from web pages to generate thumbnails for links. OpenGraph attributes describe the object presented on a web page. OpenGraph data is stored in meta tags, as shown in A.Krasniqi's answer:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

These meta tags have a prefix of og.

Basic OpenGraph attributes include:

og:title (The title of the object)
og:type (The type of the object, e.g. video.movie)
og:url (A permanent, canonical URL to this object)
og:image (An image representing the page)

Other tags include:

og:description (A description of the object)
og:video
og:audio

All OpenGraph parameters are documented here

To parse these, you can use NSXMLParser but others have implemented OpenGraph parsers. (Just google "iOS OpenGraph parser")

A.Krasniqi · Answer 3 · 2021-07-03T10:40:19.760

3

Updated: For new iOS devs, you could use: https://github.com/itsmeichigo/URLPreview

Use opengraph from facebook, then parse it

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

edited Jul 03 '21 at 10:40

answered Aug 29 '17 at 14:44

A.Krasniqi

165
12

score 3 · Accepted Answer · answered Sep 04 '17 at 08:55

I finally did it with MTDURLPreview on github

Usage

#import "MTDURLPreview.h"

[MTDURLPreview loadPreviewWithURL:@"url here" completion:^(MTDURLPreview *preview, NSError *error) {
    NSLog(@"Image URL : %d", [preview.imageURL isEqual:[NSNull null]]);
    NSLog(@"Content : %@", preview.content);
    NSLog(@"Title : %@", preview.title);
}];

Hope your problem solved.

score 0 · Answer 5 · answered Aug 25 '18 at 20:48

Here is the best solution I used and I get the good results.

Source code: https://github.com/keshiim/WBGLinkPreview

Cocoapod Name: pod "WBGLinkPreview"

I used code inside my class like:

#import <WBGLinkPreview/WBGLinkPreview.h>

@interface ViewController ()
 {
     WBGLinkPreview *urlPreview;
 }
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
urlPreview = [[WBGLinkPreview alloc] init];
[urlPreview previewWithText:@"https://www.youtube.com/watch?v=HHq_ChsWtb0"
                  onSuccess:^(NSDictionary *result) {
                      NSLog(@"Final Output:: %@", result);
                  } onError:^(WBGPreviewError *error) {
                     NSLog(@"%@", error.description);
                  }];
}

How to get thumbnails from any URL in iOS?

5 Answers5