Follow these guidelines to ensure that images are automatically included on blog posts that are pulled into your Hub with RSS.
About Blog Stream Images
When you create a Blog Stream that pulls in posts from an external blog via RSS, Uberflip will attempt to automatically import any associated images as well. It does this by looking in three different places, in the following order:
- HTML image tags in the RSS feed
- RSS media tags in the feed
- Facebook Open Graph tags in source page HTML
In this article, we'll explain what each of these things mean, and how Uberflip looks for images in each one.
General Image Size Requirements
Regardless of the source of the image in a Blog Stream Item, images must meet minimum width and length requirements to be imported. 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 imported.
Keep in mind as well that images for Blog Streams are resized to a standard size of 500 pixels wide by 272 pixels high. Smaller images will be upscaled to this size, which can negatively impact image quality. As a result, your images should ideally be at least 500px width x 272px height (or larger in the same ratio of 1.83:1).
If you want, you can override the minimum image size requirement. You can do this when you initially add 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:
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 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:
Tag that will be imported
<img src="http://www.mycompany.com/blog/image.png" width="300px" height="296px" />
Tags that will not be imported
<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 imported.
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 valid <img> tags in the RSS version of an article, it will look for <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 pull in images specified with a <media:content> tag, the following attributes must be set:
- 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 imported.
Open Graph Tags
If our system can't find valid <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 look in the source URL for the article search through the page's full HTML for instances of Open Graph image tags, which look like this:
<meta property="og:image" content="image source url" />
<link rel="image_src" href="image source url" />
You can find more information about Facebook Open Graph tags here.