Blog Articles Widget

In this Content Widgets section of the User-Guide, you'll learn how Content Widgets connect to Channels within a digital workplace.

Blog Articles Widget

What is it?

Use the Blog Articles Widget to aggregate and display Articles from multiple Blog Channels on a Page or Space. Articles displayed in the Blog Articles Widget will appear in chronological order.

SS_Solution_Newsroom-blogcards%20fmt.png

Use Cases

Corporate newsfeed

Blogs are the best tool for sharing news, leadership updates, and employee stories so everyone’s in the know. And, with the ability to add images, video, and social sharing, corporate newsfeeds have never been more engaging.

Include a Blog Articles widget on the homepage of your digital workplace and set it to draw from your most important corporate newsfeed Channel.

Features and functionality

Configure the Blog Articles Widget

Editing the Blog Articles Widget allows you to configure the sources and layout of displayed Articles.

Blog Articles

Use the Options tab to configure the following features:

  • Title: Enter a name that describes what content the Widget displays. This name will appear above the Widget.
  • Title Hyperlink: Enter a URL. Clicking the Title will navigate a User to this URL.
  • Description: Enter text that gives additional context to the Widget.
  • Sources: Select what Blog Channels the Widget will display Articles from. Clicking add sources will provide a list of Blog Channels, Pages, and Spaces. Selecting a Page or Space will cause the Widget to display all articles from Blog Channels in that location.
  • Number of results: Enter how many Articles to display. Exceeding this number of articles will place a Load More button at the bottom of the Widget. Clicking Load More will display additional articles from the source Blog Channels. Save valuable real estate on your Page or Space by reducing the number of results shown in the Widget.
  • Add article: Select the Show add link option to include an Add Article button at the bottom of the Widget. Clicking this button gives the ability to quickly begin creating content on one of the source Blog Channels. Users without Write Level Access or higher will not see this button.
  • Show Follow Icon: Display a follow bell button in the Widget that allows users to subscribe to all Channels displayed in the Widget that they have at least Read level Access to.

Blog Articles Widget layouts

Change how Blog Articles appear in the Widget using the Layout tab. Use Full view when the Blog Widget is placed in the center or wide columns, and Compact view when the Blog Widget is placed in a narrow side column. Only the first image of a Blog Article will be displayed when it is featured in the Blog Article Widget.

Full View provides the ability to show pinned articles, and select what elements of a Blog Article are displayed in the Widget with its Advanced Options. Advanced Options allow you to toggle the whether the following elements are visible:

  • Actions Button
  • Author
  • Body
  • Channel
  • Comments
  • Date
  • Likes
  • Rating
  • Summary
  • User Photo
  • Views
Handling of articles that have no image

The Blog Article Widget can display the first image that appears in a Blog article. Since some Blog Articles may not contain an image, administrators can select how the Widget will behave. When the Beside or Above Image Position options of Full View are selected you can decide how to handle articles that contain no images. “No image available” provides the following options:

  • Show nothing: Displays no image when an article does not have an image.
  • Show workplace logo: Displays your digital workplace’s logo when an article does not have an image. This option uses the logo defined on the digital workplace’s Appearance Page.
  • Show uploaded default image: Displays the uploaded image when an article does not have an image. Selecting this option provides the ability to upload the 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. 
Full View with images Inline of Blog Article content

Blog%20Articles%20Widget%20-%20Full%20view%20with%20image%20inline.PNG

Full View with images alternating Beside Blog Article content. Blog Articles are displayed in a Continuous Feed.

blog%20articles%20widget%20full%20view%20with%20image%20beside.PNG

Full View with images alternating Beside Blog Article content. Blog Articles are displayed in as Cards.

blog%20articles%20widget%20full%20view%20with%20image%20beside%20cards.PNG

Full View with images Above Blog Article content. Blog Articles are displayed in a Continuous Feed

Blog%20Articles%20Widget%20-%20Full%20view%20with%20image%20above%20in%20continuous.PNG

Full View with images Above Blog Article content. Blog Articles are displayed as Cards

Select whether cards are displayed in 1-3 columns, or have outlines. Cards have a minimum width which may cause less columns to be used at lower screen resolutions.

Video’s embedded in Blog Articles will not be displayed in the Blog Article Widget’s Card view.

Blog%20Articles%20Widget%20-%20Full%20view%20with%20image%20above%20in%20cards.PNG

Compact View with no images from Blog articles displayed

Blog%20Articles%20Widget%20-%20Compact%20view%20with%20no%20image.PNG

Compact View with images displayed beside Blog Article content

Blog%20Articles%20Widget%20-%20Compact%20view%20images%20beside.PNG

Compact View with images displayed above Blog Article content

Blog%20Articles%20Widget%20-%20Compact%20view%20images%20above.PNG

Blog Articles Widget layouts

Use the Appearance tab to apply custom CSS classes to the Widget.

Using the Blog Articles Widget

Once configured, the Blog Articles Widget will automatically display Articles from connected sources in chronological order. Click an Article’s Title, Image, Comments or Read More button to navigate directly to the Article. If the Article’s Image Position has been set to Inline, clicking the image will not result in navigation to the Article.

The Blog Articles Widget will follow the Access Rules on the Articles it is displaying. A User will not see an Article in the Widget if they do not have Read Level Access or higher on it.

Sizing of Images within the Blog Articles Widget

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

In addition to these sizes, images will also behave in the following ways:

  • Images are responsive to changes in browser width. Reducing the width of the browser window will reduce the width provided to images within Blog Articles Widget.
  • At narrow browser window widths, images using the Beside layout will appear above the Blog Article.

How to setup the Blog Articles Widget

If you decide to include a Blog Articles Widget on a Page or Space in your digital workplace you will need to first make sure you have a Blog Channel to display content from. Follow the steps below to add a Blog Article Widget to a Page or Space in your digital workplace.

1. Click the Action Button, and select Edit

Click the Action Button on the Page or Space where you want the Widget to be. The Action Button will only appear if you have Edit Level Access or above. Select Edit from the menu.

2. Select the Blog Articles Widget from the Widget Carousel

howto1step3.png

3. Drag the Blog Articles Widget to the Layout Builder

howto1step4.png

4. Edit the widget

Click the Edit option listed at the top of the placed Widget.

howto1step5.png

5. Select your sources

Select add source(s) from the Options tab to view a list of all available Blog Channels, Pages and Spaces. Selecting a Page or Space will cause the Widget to display all articles from Blog Channels in that location. Select Done when finished.

howto1step7.png

6. Configure other display and layout properties

Use the Options and Layout tab to customize how Articles appear in the Widget. Select Compact View if the Blog Widget is in a narrow side column.

7. Click Update

When done, select Update to apply your changes to the Blog Articles Widget. Publish the Page or Space to make these changes live.

howto1step8.png


Viewed 852 times