Use the Blog Articles widget to aggregate and display articles from multiple blog channels on a page or space. The Blog Articles widget displays articles in chronological order.
Sections in this article:
Access and content visibility
This widget can display content from connected channels. However, users will only see content that they have at least Read access to.
Set up
Follow these steps to set up this widget:
- Place a
Blog Articles widget on a page, space, or dashboard. For more information, see Placing and setting up a widget.
- Select the placed widget's Edit button.
- 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.
- In the widget editor, select Update to apply your changes or Cancel to discard them.
- 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 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 information to users 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 |
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:
To add sources:
To remove sources:
|
Number of results | Enter the maximum number of results to increment by, and to display initially. You must enter a value 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. |
Show add link | Select to add an Add Article button to the widget. Only users with at least Write access to any of the connected blog channels can see this button. 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 |
Setting | Description |
---|---|
View |
Select how the widget displays blog articles. Options include:
|
Image Position |
Select how an article's image is displayed in the widget's feed. Display options include:
For more information on how featured images get displayed in different, see Blog Articles (Options: Article 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:
|
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:
|
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:
|
Number column |
This option is only available if the View is Full, the Image Position is Beside, and the Feed Style is Cards. |
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:
|
Setting | Description |
---|---|
Class | Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets. |
Height | Select the height of the widget. Options include:
|
Note
Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.
Layout option examples
Full View with images Inline of Blog Article content:
Full View with images alternating Beside Blog Article content. Blog Articles are displayed in a Continuous Feed:
Full View with images alternating Beside Blog Article content. Blog Articles are displayed in as Cards:
Full View with images Above Blog Article content. Blog Articles are displayed in a Continuous Feed:
Full View with images Above Blog Article content. Blog Articles are displayed as Cards across 3 columns:
Compact View with no images from Blog articles displayed:
Compact View with images displayed beside Blog Article content:
Compact View with images displayed above Blog Article content:
Image sizes
Keep in mind the following when referencing sizing tables:
- Images are responsive to changes in browser width. Reducing the width of the browser window will reduce the width provided to images within the Blog Articles widget.
- At narrow browser window widths, images using the Beside layout will appear above the blog article.
- 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 labelled “variable” refers to configurations where 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 |
140 |
|
Above > Cards > 2 Column |
534 |
140 |
|
Above > Cards > 3 Column |
347 |
140 |
|
Two Column |
Beside > Continuous |
180 |
180 |
Beside > Card |
200 |
variable |
|
Above > Continuous |
860 |
140 |
|
Above > Cards > 1 Column |
856 |
140 |
|
Above > Cards > 2 Column |
414 |
140 |
|
Above > Cards > 3 Column |
235 |
108 |
|
Middle Column |
Beside > Continuous |
180 |
180 |
Beside > Card |
200 |
variable |
|
Above > Continuous |
620 |
140 |
|
Above > Cards > 1 Column |
616 |
140 |
|
Above > Cards > 2 Column |
294 |
140 |
|
Above > Cards > 3 Column |
187 |
140 |
1400px site width
Position |
Layout |
Width (px) |
Height (px) |
---|---|---|---|
Full Page Width |
Beside > Continuous |
180 | 180 |
Beside > Card |
200 | variable | |
Above > Continuous |
1400 | 140 | |
Above > Cards > 1 Column |
1400 | 140 | |
Above > Cards > 2 Column |
684 | 140 | |
Above > Cards > 3 Column |
447 | 140 | |
Two Column |
Beside > Continuous |
180 | 180 |
Beside > Card |
200 | variable | |
Above > Continuous |
1160 | 140 | |
Above > Cards > 1 Column |
1160 | 140 | |
Above > Cards > 2 Column |
564 | 140 | |
Above > Cards > 3 Column |
367 | 140 | |
Middle Column |
Beside > Continuous |
180 | 180 |
Beside > Card |
200 | variable | |
Above > Continuous |
920 | 140 | |
Above > Cards > 1 Column |
916 | 140 | |
Above > Cards > 2 Column |
444 | 140 | |
Above > Cards > 3 Column |
287 | 140 |
1600px site width
Position |
Layout |
Width (px) |
Height (px) |
---|---|---|---|
Full Page Width |
Beside > Continuous |
180 | 180 |
Beside > Card |
200 | variable | |
Above > Continuous |
1600 | 140 | |
Above > Cards > 1 Column |
1596 | 140 | |
Above > Cards > 2 Column |
784 | 140 | |
Above > Cards > 3 Column |
513 | 140 | |
Two Column |
Beside > Continuous |
180 | 180 |
Beside > Card |
200 | variable | |
Above > Continuous |
1360 | 140 | |
Above > Cards > 1 Column |
1356 | 140 | |
Above > Cards > 2 Column |
664 | 140 | |
Above > Cards > 3 Column |
433 | 140 | |
Middle Column |
Beside > Continuous |
180 | 180 |
Beside > Card |
200 | variable | |
Above > Continuous |
1120 | 140 | |
Above > Cards > 1 Column |
1116 | 140 | |
Above > Cards > 2 Column |
544 | 140 | |
Above > Cards > 3 Column |
353 | 140 |