We think your Hub's Tiles look a lot better, and will entice more clicks, if there are images on them!
Follow the guidelines below to ensure that your Hub's Blog Item tiles are automatically assigned images when they are imported!
The application tries really hard to find images to display for your Blog Item Tiles. Below is the order in which we look for article images and more info about how we try to scrape those images.
Blog Streams first try to acquire the Item's images from the HTML <img> tags present in the RSS version of the article on import
It is important to note that images only qualify for this if the 'width' and 'height' attributes of the <img> tag both have values defined in pixels, and those values are at least 180px by 100px to prevent poor quality small images from being assigned as tile thumbnails.
<img src="http://i.imgur.com/fJu1mJ4.png" width="300px" height="296px" />
Would be acquired when the Stream/Article is imported while these image tags:
<img src="http://i.imgur.com/fJu1mJ4.png" />
<img src="http://i.imgur.com/fJu1mJ4.png" width="50px" height="50px"/>
...would be ignored because it lacks the minimum width and height attributes.
More on Minimum Image Size
Again, any image with dimensions less than 180 pixels width or 100 pixels in height will be ignored for tile thumbnails because smaller images don't look good when blown up to a larger size. This image size restriction can be overridden however though through the Stream Options or an option you can select at the time of initial import. If there are multiple valid <img> tags in the article then the first image is selected.
(NOTE: we do now have an option to bypass the 'width' and 'height' requirements upon first import (checkbox that says 'allow small images to be used for thumbnails') or via a Stream Option you can check to ensure all images are brought in regardless of whether width and height are defined in the <img> tag.)
2. Images From Media Tags in RSS Feed
If no img tag is found within the item/article on the RSS feed, the app will look for <media:content> tags for that article next.
The <media:content> tag is described in detail here: http://www.rssboard.org/media-rss#media-content
In order to be discovered in this method, the tag's 'medium' and 'url' attributes need to be set. If there are multiple <media:content> tags then the first image is selected.
3. Images From Open Graph Image Tags on the Source Article
If the app isn't able to find a valid image using the first two methods, then the app will look at the source URL for each article and checks that page's full HTML (this is often much more than is included in an RSS summary).
Within this page it looks for instances of Open Graph Image tags (<meta property="og:image" content="image source url" /> or similar (<link rel="image_src" href="image source url" />)
The Open Graph format is described here: http://davidwalsh.name/facebook-meta-tags
Image Size Requirements
Images for Blog Streams are all served through our own Uberflip media proxy. Part of this includes a re-sizing of the images to a standard size of 500px wide and 272px high.
This means that ideally your images should be 500x272px or larger. Images which are smaller than this size will be scaled up which could impact the quality.
The image space that occupies each Item tile is going to follow that ratio of 500X272. So if you want your full promo image to display within a Blog Items tile, be sure to keep that ratio (1.83 width by 1 height) so that your images look like they should.