50-50 Blog Articles widget enhancement

You can use the 50-50 Blog Articles widget enhancement to change how articles appear in the feed of a Blog Articles widget. When this enhancement is applied, the image and text of article previews will each occupy 50% of the widget's width.

Blog Articles widget with the 50-50 class.

Sections in this article: 

Considerations

  • No image: When no image is available, the content will still occupy 50% of the widget's width. As such, we recommend using a default image or the workplace logo to improve the appearance.
  • Page layout: This enhancement works best when used on a Blog Articles widget that is positioned in the middle column of a page.
  • Required settings: This enhancement only works with the Image Position Beside layout of a Blog Articles widget.   

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add enhancement code to the header

Warning 

Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.

Add the following code to the header of your digital workplace:

<!-- 50-50 Blog Articles widget enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/FiftyPercentBlogImage.css" />
<!-- 50-50 Blog Articles widget enhancement ends -->

Configure the enhancement

The 50-50 Blog Articles widget enhancement can be used with the Blog Articles widget. To configure the widget: 

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Place a Blog Articles widget or select Edit on the widget. 
  4. Configure the widget as needed in the Options tab. 
  5. In the Layout tab, set Image Position to Beside. 
  6. In the Appearance tab, in Class, enter the following: fiftyimage.
  7. Select Update.
  8. Select Publish Page.

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used.  If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and  --> after the middle line and save the changes to the header. 

Turn the enhancement off

To turn the enhancement off, you can remove the code entirely or add <!-- before and  --> after the middle line, as shown below, and save the changes to the header. 

<!-- 50-50 Blog Articles widget enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/FiftyPercentBlogImage.css" />
<!-- 50-50 Blog Articles widget enhancement ends -->

Changes to:

<!-- 50-50 Blog Articles widget enhancement begins -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/FiftyPercentBlogImage.css" /> -->
<!-- 50-50 Blog Articles widget enhancement ends -->

Use the enhancement

Members can perform the following actions when using the enhancement: 

  • Select the article's title or Read More to view the article. 
  • Select Load More to view more articles.