Blog Articles widget

You can use the Blog Articles widget to aggregate and display articles from multiple blog channels on a page or space in chronological order.

The Blog Articles widget on a page.

Sections in this article:

Considerations

  • Access and visibility: This widget can display content from connected channels. However, users will only see content to which they have at least Read access.

Who can do this?

  • Enterprise administrators
  • Workplace administrators
  • Space administrators
  • Members of the digital workplace with Edit or Full access

Set up

Follow these steps to set up this widget:

  1. Place a Blog Articles widget on a page, space, or dashboard. See Placing and setting up a widget
  2. Select the placed widget's Edit button.
  3. Review and make changes to the settings on the Options, Layout, and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  4. In the widget editor, select Update to apply your changes or Cancel to discard them.  
  5. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.

Settings

Setting Description
Title Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select Translation and enter a title for each supported language.  

This field can contain a maximum of 140 characters.
Title Link Enter the URL of a location in your digital workplace. Users who select the widget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or an absolute URL does not matter; it will convert to an absolute URL the next time you edit the widget.
Description

Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide users with information about the widget.

When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select Translation and enter a description for each supported language.

Source(s)

Select from which blog channel(s) the widget displays content.

Access rules determine what users will see when configuring and viewing the widget: 

  • Users configuring this widget will only see channels to which they have at least Read access. However, they can still select blog channels to which they don't have access by selecting groups of blog channels.
  • Users who view the published widget will only see content from a blog channel if they have at least Read access to that content.

To add sources:

  1. Select add source(s).
  2. Search for a blog channel by its name or a portion of its URL. This search will return up to 100 results and include the pages and spaces that contain a blog channel that matches the search query.
  3. Select a blog channel from the list of search results. In addition to selecting sources individually, you can select groups of blog channels:
    • Select All blogs to select all blog channels in your digital workplace.
    • Select pages or spaces to select all blog channels below that location.
  4. Repeat this process until you have added all your sources, and then select Done.

To remove sources:

  1. Select add source(s).
  2. Choose the Selected tab, and unselect the source(s) you want to remove.
  3. Select Done.
Number of results Enter the maximum number of results to increment by and display initially. The value must be between 1 and 99. If there are additional items to display, users can select the Load More link found at the bottom of the feed to load additional results.
Exclude archived content

This option is only available if the View is Full.

Select to exclude archived blog articles from displaying in the widget's feed.

Show add link Select to add an Add Article button to the widget. Visible to users with at least Write access to any of the connected blog channels. Users can select this button to add content to blog channels to which they have at least Write access.
Show follow icon Select to add a Follow button to the widget. Users can select this button to subscribe to all channels displayed in the widget to which they have at least Read access.
Options tab
Setting Description
View

Select how the widget displays blog articles. Options include:

  • Full: Use when the widget occupies multiple columns on a page. Allows for additional customization options.
  • Compact: Use when the widget occupies a narrow side column.
Image Position

Select how an article's image is displayed in the widget's feed. Display options include:

  • None: Display no image. Compact view only.
  • Inline: Display the first image in an article, which will be displayed in the feed. Full view only. 
  • Beside: Display images next to an article. If an article has a defined feature image, the widget will display it. Otherwise, the first image in an article will be displayed in the feed.
  • Above: Display images above an article. If an article has a defined feature image, the widget will display it. Otherwise, the first image in an article will be displayed in the feed.

For more information on how feature images get displayed in different widget configurations, see Feature image.

Feed style

This option is only available if the View is Full and the Image Position is Beside or Above.

Select how articles are displayed in the widget's feed. Options include:

  • Continuous
  • Cards
No image available

This option is only available if the View is Full and the Image Position is Beside or Above.

Select what to display if an article has no image. Options include:

  • Show nothing: Displays no image. 
  • Show workplace logo: Displays the digital workplace logo. See 
  • Show uploaded default image: Provides the ability to upload a default image to the current widget. The max file size for this image is 1MB, and only the following image types are valid: JPG, PNG, GIF, SVG, and BMP.

To use the default image option when the View is Compact:

  1. Choose the following settings:
    • View: Set to Full.
    • Position: Set to Beside or Above.
    • No image available: Set to Show uploaded default image.
  2. Upload a default image.  
  3. Choose the following settings:
    • View: Set to Compact.
    • Position: Set to Beside or Above.
  4. Select Update
Card style

This option is only available if the Feed style is Card.

Select to display an outline around article cards.

Image alignment

This option is only available if the View is Full and the Image Position is Beside.

Select how an image is displayed relative to its article. Options include:

  • Left
  • Right
  • Alternating
Number of columns

This option is only available if the View is Full, the Image Position is Above, and the Feed Style is Cards.

Select the number of displayed columns. 

The default value is 1. 

Show pinned items

This option is only available if the View is Full.

Select to keep pinned content at the top of the widget's feed.

Advanced Options

These options are only available if the View is Full.

Select which article metadata to display in the widget. Options include:

  • Actions Button
  • Author
  • Body
  • Channel
  • Comments
  • Date
  • Likes
  • Summary
  • User Photo
  • Views
Layout tab
Setting Description
Class Enter CSS class selectors to provide additional styling to the widget. See Applying custom CSS to widgets.
Height

Select the height of the widget. Options include:

  • Auto: The leftmost slider position. The widget's height will increase and decrease to contain what it is displaying.
  • Fixed: Select a fixed height between 50px and 600px in increments of 50px. A vertical scrollbar will appear on the widget if the content exceeds this fixed value.
Appearance tab

Note

Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.

Image sizes

Keep in mind the following when referencing sizing tables:

  • Images are responsive to changes in browser width. Reducing the browser window's width will reduce the width provided to images within the Blog Articles widget.
  • Images using the Beside layout will appear above the blog article at narrow browser widths.
  • The inline configuration has not been included as the product does not affect the image size in this configuration unless an extra-wide image is uploaded, in which case the widget will crop (not scale) the image to the width of the widget.
  • Card style sizes have been determined with the "outline" configuration turned on; if turned off, the absence of the outline adds approximately 4px to the image container width.
  • Any image sizes labeled "variable" refer to configurations in which the widget sets the height of the image displayed depending on the height of the image uploaded.

1100px site width

Position Layout Width (px) Height (px)
Full Page Width Beside > Continuous 180 180
Beside > Card 200 variable
Above > Continuous 1100 140
Above > Cards > 1 Column 1100 260
Above > Cards > 2 Column 534 128
Above > Cards > 3 Column 347 82
Compact > Beside  45 45
Compact > Above 1100 262
Two Column Beside > Continuous 180 180
Beside > Card 200 variable
Above > Continuous 860 204
Above > Cards > 1 Column 856 204
Above > Cards > 2 Column 414 98
Above > Cards > 3 Column 266 64
Compact > Beside  45 45
Compact > Above 860 204
Middle Column Beside > Continuous 180 180
Beside > Card 200 variable
Above > Continuous 620 148
Above > Cards > 1 Column 616 146
Above > Cards > 2 Column 294 70
Above > Cards > 3 Column 186 44
Compact > Beside  45 45
Compact > Above 620 148
Approximate image sizes

1400px site width

Position Layout Width (px) Height (px)
Full Page Width Full > Beside > Continuous 180 180
Full > Beside > Card 200 variable
Full > Above > Continuous 1100 262
Full > Above > Cards > 1 Column 1396 332
Full > Above > Cards > 2 Column 684 162
Full > Above > Cards > 3 Column 447 106
Compact > Beside  45 45
Compact > Above 1400 334
Two Column Full > Beside > Continuous 180 180
Full > Beside > Card 200 variable
Full > Above > Continuous 1160 277
Full > Above > Cards > 1 Column 1156 275
Full > Above > Cards > 2 Column 564 134
Full > Above > Cards > 3 Column 367 87
Compact > Beside  45 45
Compact > Above 1160 277
Middle Column Full > Beside > Continuous 180 180
Full > Beside > Card 200 variable
Full > Above > Continuous 920 219
Full > Above > Cards > 1 Column 916 218
Full > Above > Cards > 2 Column 444 105
Full > Above > Cards > 3 Column 287 68
Compact > Beside  45 45
Compact > Above 920 219
Approximate image sizes

1600px site width

Position Layout Width (px) Height (px)
Full Page Width Full > Beside > Continuous 180 180
Full > Beside > Card 200 variable
Full > Above > Continuous 1521 362
Full > Above > Cards > 1 Column 1517 361
Full > Above > Cards > 2 Column 745 177
Full > Above > Cards > 3 Column 487 116
Compact > Beside  45 45
Compact > Above 1521 362
Two Column Full > Beside > Continuous 180 180
Full > Beside > Card 200 variable
Full > Above > Continuous 1360 324
Full > Above > Cards > 1 Column 1356 323
Full > Above > Cards > 2 Column 624 149
Full > Above > Cards > 3 Column 433 103
Compact > Beside  45 45
Compact > Above 1281 305
Middle Column Full > Beside > Continuous 180 180
Full > Beside > Card 200 variable
Full > Above > Continuous 1040 248
Full > Above > Cards > 1 Column 1037 247
Full > Above > Cards > 2 Column 504 120
Full > Above > Cards > 3 Column 327 78
Compact > Beside  45 45
Compact > Above 1120 267
Approximate image sizes