Visually Rich Links Tutorial for iOS: Image Thumbnails
Generate visually rich links from the URL of a webpage. In this tutorial, you’ll transform Open Graph metadata into image thumbnail previews for an iOS app. By Lea Marolt Sonnenschein.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Visually Rich Links Tutorial for iOS: Image Thumbnails
35 mins
- Getting Started
- Understanding Rich Links
- Understanding Rich Links: Web Page Metadata
- Understanding Rich Links: Open Graph Protocol
- Building the Preview
- Building the Preview: The URL
- Building the Preview: The Title
- Building the Preview: The Icon
- Building the Preview: The Image
- Building the Preview: The Video
- Retrieving the Metadata
- Presenting Your Links
- Adding an Activity Indicator
- Handling Errors
- Handling Errors: Error Messages
- Handling Errors: Cancel Fetch
- Storing the Metadata
- Storing the Metadata: Cache and Retrieve
- Storing the Metadata: Refactor
- Sharing Links
- Sharing Links: UIActivityItemSource
- Sharing Links: View Update
- Saving Favorites
- Using UIStackView Versus UITableView
- Where to Go From Here?
Using UIStackView Versus UITableView
You're using UIStackView
to show these link previews instead of UITableView
. Table views seem like the obvious choice to display data in a list but they're not the way to go with link presentations. There are two big reasons for this:
-
Sizing: If you follow Apple's advice and call
sizeToFit()
on the link preview intableView(_:cellForRowAt:)
, you'll find the previews don't appear. You could get them to appear with Auto Layout constraints on your custom cell or by giving them a specificCGSize
, but read on before you try this. -
Memory: Even if you can get your previews to appear, you have another issue:
LPLinkViews
in table views cause huge memory leaks. They can get as high as 10GB when scrolling! Take a look at the memory load below:
With a memory leak like that, your app will crash and the one-star reviews will start flying. Best to stay away from table views for link presentations!
Time to test your app one more time. Build and run and tap one of the links in the Saved tab. Safari will open and you'll see your chosen tutorial displayed as a web page. Good job!
Where to Go From Here?
Congrats! You've just learned most of what there is to know about link presentations!
Download the final project using the Download Materials button at the top or bottom of this page.
To learn more about what Apple has to say on the topic, watch the WWDC 2019 videos on Embedding and Sharing Visually Rich Links and Ensuring Beautiful Rich Links.
If you want to take a closer look at the framework, read the documentation on the LinkPresentation framework.
And if you're curious how to make links even more powerful and useful, check out our Universal Linking tutorial!
If you have any questions or comments, please join the forum discussion below.