Blog Presenter gadget

Note:

Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.

The Blog Presenter gadget displays blog articles from selected blog channels in a dynamic, interactive banner. Articles are pulled automatically from blog channels that you pick, with the newest content being shown first(descending date order). Articles in the gadget show their title and summary sections and use an image from the article, channel, or fallback location as a background.

The blog presenter gadget.

Sections in this article:  

Considerations and caveats

  • Image priority: The blog presenter selects images automatically, using the following priority:
    1. Blog post: If the post has an image in its content, the gadget will use it for the background. If there are multiple images, the gadget uses the first one. The gadget does not support blog posts' featured images. 
    2. Blog channel: If the post does not have any images in its content, the gadget will check at the channel level and use any images in the content of the channel page.
    3. Fallback image: If there is no image in the post or the channel content, the gadget will use the fallback image you set in the Blog Presenter Options.
    4. Blank: If there are no images in these locations, the gadget will show the content on a blank background. 
  • Placement: While you can place the gadget in any page column, it is recommended to place it to span the width of a page. When placed in a narrow side column, the following elements of the gadget will be hidden:
    • Article summary
    • Next up... section
    • Navigation dots (if enabled)
  • Image size: If the image in your blog post is too small, it will appear distorted in the gadget since it's automatically resized to fit the width of the page section. For best results, when the gadget occupies the recommended full width of a page, consider using a 1300x 200px banner-style image on blog posts or on the blog channel itself.
  • Language support: Articles in the gadget will be displayed in the user's currently selected language. However, the Next Up Label will only display what's entered into its field.

Set up

Follow these steps to set up this gadget:

  1. Place an  Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget.
  2. Select the placed widget's Edit button.
  3. Under Integration Library, select Igloo Gadget Depot.
  4. Select the  Blog Presenter gadget from the library.
  5. Review and make changes to the settings on the Options and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  6. In the widget editor, select Update to apply your changes or Cancel to discard them.  
  7. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.

Settings

Options tab

General options
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 click 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.

This field can contain a maximum of 2,083 characters.

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  Translation and enter a description for each supported language.

Content options
Setting Description
Blog Channels Enter a comma-separated list of URLs to identify which blog channels the gadget will display articles from. This should be the whole path after the site's domain. For example, for a blog located at example.igloodigitalworkplace.com/blogs/featured_news, the path would need to be blogs/featured_news. To display content from multiple blogs, list the paths separated by commas. For example: blogs/featured_news, blogs/hr_news.

Number of posts to load from each blog channel Enter how many posts to load from each blog channel. For example, if there are 3 blog channels in the channel list, and this field is set to 2, the gadget will load the 2 newest posts from each channel, and show 6 posts total.

Inspect the content of blog images Select to have the gadget check the content of each blog post for an image and use it as the background for that post. If a post contains no image, it will use the next available option based on image priority (described above in Considerations and caveats).

Use first link as destination Select to change where users go when they select the title of the active slide. 
  • When not selected, users will go to the source content being displayed.
  • When selected, users will go to the destination of the first link found in the source content. If no link is found, users will go to the source content being displayed. Selecting this option also enables the functionality of Inspect the content of blog images regardless of whether it is selected or not. 

The first link corresponds to the href  attribute of the first <img> or <a> element in the source content. No validation is done on this link. If you need to change it, you must edit the source content.

This setting is not selected by default.

Style options
Setting Description
Fallback Image Enter the URL of an image to display when there is no image in the blog post or channel. This can be an image stored in your digital workplace or an external image. If you're using an image from your digital workplace, this link will need to be the download link from the file. To get this link, go to the file in your digital workplace, right-click on Download, and select Copy link.

Next Up Label Enter the message that appears above the upcoming content. If left blank, the label will default to Next Up.... You can also include Font Awesome icons in this field (Font Awesome 4.7.0 icons) using the HTML snippets that Font Awesome provides. For example: <i class="fa fa-chevron-right" aria-hidden="true"></i>. To have no label, enter a space.

Font Enter what font the widget will use to display content. Use either the generic-family or family-name of a web-safe font-family.

Autoplay Slides Select to cycle slides automatically. The amount of time on each slide is set using the Transition Duration option. If this option is not selected, the user will need to progress the slides manually, using either the navigation dots or forward and back arrows.

Display slideshow navigation Select to display slideshow navigations dots at the bottom of the slideshow. Users can select these to jump to a slide.

Navigation Color Enter the color used for navigation dots, progress bar, and slide controls (navigation arrows).Use any of the following formats:
  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: GreenYellow
  • Transparent
Navigation Current Color Enter the color used for the currently active navigation dot. Use any of the formats listed under Navigation Color.

Display a progress bar at the bottom of the slideshow Select to show a blue progress bar at the bottom of the slideshow. This bar fills in as users progress further through the slideshow.

Transition Duration Enter the number of seconds each slide will be displayed before moving on to the next one. If this is set to 0, the slides won't progress, and users must move between slides manually.

Show Slide Controls If selected, a forward and back arrow will display on the right side of the gadget, so users can manually browse through slides.

Custom CSS File

If you are using a custom CSS file to style this widget, enter the absolute URL of where the style sheet is located. Keep in mind the following:
  • The style sheet will take precedence over styles in your digital workplace's theme.
  • The style sheet must reside in either the same digital workplace that is using the gadget or be hosted in a service such as Azure.
  • If you are hosting the style sheet in your digital workplace, it must be located in a folder channel named filesthat is located at the root of your digital workplace. The style sheet can be located anywhere within this folder channel. For example: 
    https://customercare.igloosoftware.com/files/css/stylesheetcss
  • Valid files must end with css.

Appearance tab

Appearance options
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.

The default value is Auto (leftmost slider position) scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px.

Selecting a height less than what is needed to display its contents results in the widget having a vertical scrollbar.

Note

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

Using it

Viewing an article

Select the title or summary of the active slide to go to that article. If the gadget is configured to use Use first link as destination, you will instead be taken to the destination of the first link found in the article.

Browsing slides

If enabled, the presenter will automatically cycle between slides at the configured interval. You can pause and then resume the slideshow's automatic cycling by selecting Pause/Play (located in the bottom left corner of the gadget). 

 You can also use the following methods to change the currently active slide:

  • Select Next Up... to view the next slide.
  • Select an inactive area of the gadget, then press your left or right arrow keys to change the slide.
  • If enabled, select a Navigation Dot to jump to the associated slide.
  • If enabled, select the Slide Controls (located in the bottom right corner of the gadget) to change the slide.