Blog presenter gadget
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 presenter 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
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 and image size
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)
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.
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.
Setting it up
You set up gadgets in a way similar to widgets (see, Placing and setting up a widget). However, instead of selecting a gadget directly from the widget carousel, select the Integrations widget. When editing the Integrations widget, select the Igloo Gadget Depot; then select the gadget you want to configure. For information about gadget-specific configuration options, refer to the options below.
- Title: Enter a title for the gadget. The title appears as a heading above the gadget's contents. You should use the title to give users an idea of why the gadget's content is important to them or highlight the content's purpose. Titles also serve to better structure the content of a page 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.
- Title link: Enter the URL of a location in your digital workplace. Users who click the gadget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or absolute URL does not matter, it will convert to an absolute URL the next time you edit the gadget.
- Description: Enter a description for the gadget. The description appears between the title and the gadget's contents. You can use this text to provide additional context to the gadget or instructions for using the gadget. When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should selectTranslation and enter a description for each supported language.
- 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:
- 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 blogs for 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).
- 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:
- RGB value:
rgb(153, 255, 51)
- HSL value:
hsl(90, 100%, 60%)
- HTML color name:
- Hex code:
- 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.
There are no layout options available for this gadget.
Use the Class field to add custom CSS to this gadget.
Your digital workplace's CSS theme overrides the other settings here, so these settings will not change the gadget's appearance.
Viewing an article
Select the title or summary of the active slide to go to that article.
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.