Follow these guidelines to ensure that thumbnails are displayed on Item tiles for Blog Streams imported via RSS.
Important
The guidelines in this article apply to Item tiles in Hubs using default Uberflip technology. If you're using custom code that affects Item tiles, this may alter the experience in your Hub.
About Blog Stream Thumbnails
When you create a Blog Stream that imports posts from an external blog, Uberflip will try to automatically add a thumbnail image to each Item in the Stream. Your Streams will look a lot more attractive with thumbnails, so you should always try to ensure that a suitable thumbnail can be assigned to each Item by following the guidelines in this article.
Here's how it works: to find a suitable image, Uberflip checks in three locations in a particular order. The locations and the order they are checked is as follows:
- Image tags in the RSS feed
- Media tags in the RSS feed
- Facebook Open Graph tags in source page HTML
If no suitable image is found in one location, Uberflip moves onto the next location. Uberflip looks for just the first match in each location (e.g. the first image tag, the first media tag, etc.) and then checks if it meets the minimum requirements (see below). If the requirements aren't met, then Uberflip does not check for additional matches in the same location (e.g. any other image tags), but instead moves on to the next location.
To make sure that your preferred image is used as an Item's thumbnail, it should:
- Appear in the RSS version of the blog post wrapped in image tags
- Be the first image
- Meet the requirements to be selected, as well as the size requirements (see below)
You can find more details on the size requirements for images, and how Uberflip looks for images in each location, below.
General Thumbnail Image Size Requirements
Regardless of the location a thumbnail image is found in, it must meet minimum width and length requirements to be used. These are:
- Minimum width: 180 pixels
- Minimum height: 100 pixels
By default, images below the minimum size on one or both of these dimensions will not be used as thumbnails.
If you want, you can override the minimum image size requirement for thumbnails. You can do this when you initially create the Blog Stream by checking the box next to Allow small images to be used for thumbnails:
You can also override the requirement on already created Blog Streams by opening the Stream and going to the Options tab. Here, turn the setting for Prevent using small images as thumbnails to the off (grey) position:
Caution
We don't recommend using these overrides, as the minimum image size requirement is in place to ensure that your Blog Stream Item thumbnails look acceptable on most displays. In general, images smaller than the minimum size requirement will look pixelated and unclear. You can find more information about our recommended image sizes in this article.
HTML Image Tags
The first place our system will always look for thumbnail images is in the RSS feed itself. Specifically, it will look for HTML <img> tags in the RSS version of each article. These tags must:
- Define the width and height of the image in pixels, and
- Those dimensions must meet the minimum size requirements (W:180px x H:100px)
Images that do not have dimensions specified in the tag, or where either width or height are under the minimum, will be ignored by the system. For example:
Image that will be used as a thumbnail
<img src="http://www.mycompany.com/blog/image.png" width="300px" height="296px" />
Images that will not be used as a thumbnail
<img src="http://www.mycompany.com/blog/image.png" />
Image dimensions not specified
<img src="http://www.mycompany.com/blog/image.png" width="50px" height="100px" />
Width is below minimum
If there are multiple valid <img> tags in the article, only the first-appearing image will be evaluated and (if it meets the requirements) selected.
Note: WordPress Featured Images
If the blog you are importing is hosted on WordPress, and you use Featured Images on that blog, note that WordPress does not include Featured Images in the RSS Feed. As a result, these images won't be pulled in to your Hub via RSS by default.
In WordPress, you can include Featured Images in the RSS feed by using a plugin. While we can't recommend any particular plugin, you can use this sample search as a starting point. In general, any plugin that includes Features Images in your RSS feed should work for bringing those images into your Uberflip Hub.
RSS Media Tags
If our system is unable to find a valid thumbnail image within the <img> tags in the RSS version of an article, it will look in the <media:content> tags next. This is an RSS tag that is used to specify the attributes of media objects in RSS items (see this page for more information).
RSS <media:content> tags have numerous attributes, most of which are optional. In order for Uberflip to select a thumbnail image from a <media:content> tag, the following attributes must be set:
- url
- medium (value must be image)
- width (minimum value 180)
- height (minimum value 100)
If there are multiple valid <media:content> tags in the article, only the first-appearing image will be evaluated and (if it meets the requirements) selected.
Open Graph Tags
If our system can't find a thumbnail in the <img> tags or <media:content> tags in the RSS version of the article, it will look for Facebook Open Graph Meta Tags as a fallback.
To do this, we go to the source URL for the article and parse the page's full HTML for instances of Open Graph image tags, which look like this:
<meta property="og:image" content="image source url" />
or
<link rel="image_src" href="image source url" />
If an image is found in these tags, and it meets the minimum size requirements, then it will be used as the Item's thumbnail. This is intended as a last resort only: for best results, you should try to make sure that one of the other two locations (ideally the image tags) contain a suitable image to be used as a thumbnail.