Blog Presenter gadget
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.
Sections in this article:
Considerations and caveats
- Image priority: The blog presenter selects images automatically, using the following priority:
- 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.
- 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.
- 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.
- 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 display 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:
- Place an
Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. While the widget can be placed anywhere on a page, for the best experience, place it in a side column. - Select the placed widget's Edit button.
- Under Integration Library, select Igloo Gadget Depot.
- Select the
Blog Presenter gadget from the library. - 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.
- 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
Options tab
| 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 |
| 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.
The first link corresponds to the This setting is not selected by default. |
| 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:
|
| 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:
|
Appearance tab
Your digital workplace's theme overwrites many of the settings on this tab. However, the settings listed below are usable.
| 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 other than Auto will add a vertical scrollbar to the gadget. |
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.
Viewed 2,120 times