Types of Images in Feed Widgets

Different types of Feed Widgets in Happeo have some variations in how images are displayed. Here, we explain the best practices.

Images in Feed widgets

There is some variation in how images are displayed in different types of Feed widgets.

In some widgets, the first image of the post will appear as a background image. In others, it will appear at the top of the card. However, we don't recommend choosing or cropping the image based on the Feed widget usage since it’s only a smaller or shorter appearance of the original: the post itself.

Many Feed widgets have default image settings that display a default image if the post/page does not have one (see size recommendations individually for list types below). 

News Feed

Choose a News feed when you want to quickly display multiple posts or pages in a small and short space and the text content is more important than the image. It has been made to replace the list type Tiny.

Images are displayed in a small thumbnail size; from 86x86px to 140x140px depending on the width of the column.

If the column is narrower than 300px, the thumbnail image won’t be displayed at all. We encourage using the Newsfeed type in the sections divided into two or three columns, not as a full section width.

The recommended size of the default image: 280 x 280px (140 x 140px @2x).

Blog feed

A Blog feed displays a horizontal list of cards that is familiar from many blogs. It may include a headline, the main hero image, and the start of the body text. These are great for introducing an article that is a bit more in-depth.

The height of the image is always 142px but the width (from 224px to 338px) is dependent on the width of the column. This adaptability causes some cropping for images (cropping rules mentioned above).

A Blog Feed is recommended to be used on full-width sections since it arranges the posts horizontally. 

The recommended size of the default image: 676 x 284px (338px x 142px @2x).

Discussion

The Discussion feed is visually exactly like the Discussion feed in the Channels and in My Stream. For the section layout, we recommend using this on the medium-width columns only, about half of the section width. Size recommendations are the same as for any post.

News

We recommend using Banner instead of News which looks quite similar but is a newer and more flexible version of News.

News is visually exactly the same as News in My Stream. Posts have a background image and the text is layered with white on top. For the section layout, we recommend using this on the medium to small width columns which are max half of the section width. Size recommendations are the same as for any post.

Carousel

The Carousel is a good option when you want to give high emphasis on a single post at a time. The post changes automatically every 7 seconds. An image is displayed in the background and the headline (or first words of the post) are displayed on top of the image.

The maximum height of the image is 360px but the width is again defined by the column width. For that reason, we recommend using this Feed Widget in the medium-width columns.

Full section wide column may bring challenges to the images since the aspect ratio will be very wide and panoramic.

The recommended size of the default image: Size recommendations are totally dependent on your column width and can be anything from 720 x 720px (360 x 360 px@2x) to 1920 x 720px (960 x 360px @2x).

Tiny

We recommend using News Feed instead of Tiny which is a similar but newer and improved version of Tiny.

Banner

The Banner is our most flexible Feed Widget and it is a really good option when you want to grab attention and give high emphasis to the feed.

We recommend using it in full-width sections or wide columns with odd amounts like 3 or 5 in the Max posts setting. It also works well in narrow columns since posts are then automatically flipped into vertical lists.

The recommended size of the default image: Size recommendations are totally dependent on your column width and amount of posts and can be anything from 720 x 720px (360 x 360 px@2x) to 1920 x 720px (960 x 360px @2x).

Mix

The Mix is a combination of Banner and Newsfeed. The first post is displayed very big like in a Banner and the rest of the posts are on a Newsfeed.

We don’t really recommend using Mix anymore since users might not always understand that the posts are coming from one and the same feed and they might miss some important posts because of that.

We recommend using Banner or Carousel on the left side and News Feed on the right, including different sources for the streams. Size recommendations are the same as for the Banner.