Blog Tile Configuration version 1.4.3

Owned by Erin Haines (Unlicensed)
Last updated: Sept 14, 2022 by Ruth Neighbors
5 min read

Current Version: 1.4.3

Blog Tile Layout

  1. Choose your Layout. There are two different modes or layout options to choose from:

    • List View

      • displays blogs in a list view

    • Masonry View

      • displays blogs in a masonry view

    • Note: You must select a layout before continuing to edit the other components of this tile.

  2. Once you select a layout all other feature sections display and you are now ready to configure the tile.

 

NOTE: If you added Copy to the Migrate configuration section you will not need to fill out any of the sections in the Blog Tile.)

Save All now before moving on to the next section. Scroll to the bottom of the tile and click the Save All button.

 

Blog Tile Setup

  1. Add the Tile Header

  2. Click Add Blog to select the blogs you want to display in the tile. 

    • You can select one or multiple blogs to display

    • You can choose from personal blogs, system blogs and place blogs

    • Note: You must select at least one blog to continue.

  3. Choose to Restrict by Tag

    • If you select this option, you will be asked to enter in the tag(s) below. Enter in one or multiple tags, separated  by a comma. 

    • Restricting by a tag(s) will only return results with the specified tag(s) and may override additional filtering managed in the “Filters” section (see below).

  4. Set the Preview Image. Choose what image you would like to display.

    • Image from the post

    • Author avatar

    • None

  5. Set the Date to display. Choose from the following options:

    • Relative

    • Absolute

    • Hide

  6. Select what metadata you would like displayed by checking the box for the following:

    • Show Author

    • Show divider lines

    • Show border

    • Alternating row highlights

Save your changes. Scroll to the bottom of the tile and click the Save All button.

Blog Tile Filters

To help users sort through all displayed places, you may pre-define several tags, grouped as Filters. When a tag is selected, the grid will animate to remove non-matching places. For each filter, you must specify

  • Filter Heading: This is the categorical label for a group of tags. For example, if your tags are “red,” “blue,” and “green,” your filter heading may be “Colors.”

  • Blog Post Tags: These are the place tags associated with each display name. 

  • Display name for tags: You can write a friendly name for each tag. For example, your tag may be “so-cal” but your displayed tag can be “Southern California.”

  • Set default filter: Check this box on the filter you want visible when the blog first loads on the page. These will be the posts users see first.  

A preview is displayed at the top of the the filter configuration area. Wide view shows the appearance of filters in large columns, whereas narrow view simulates the filters as they will appear in mobile or in Jive’s skinny sidebars.

NOTE: If you add five or more tags, the horizontal bar will convert to a dropdown due to space constraints. Therefore, the horizontal bar is intended for scenarios where a maximum of 4 tags need to be displayed.

If you add several filter headings, each with their own set of tags, the filters will display as several dropdown menus.

Here’s how to add a new filter:

  1. Select New Filter to add a new filter category

  1. Add details for your filters

    • Add the Filter heading

    • Click Add Blog Post Tag if you want to feature places based on tag and for each item add the Display name and Associated tag

    • Repeat the above steps for each additional Filter 

      • Note: The horizontal link bar will be displayed when only one filter category is added, with less than 5 blog post tags. Otherwise, dropdowns will be displayed.

    • Click Set as default for the filter you want displayed as the default

Notes on adding Filters:

  • If you add one Filter 

    • In the Wide View the links will display in a horizontal bar

  • In the Narrow View the links will display in a dropdown menu

  • If you add multiple filters

    • In the Wide View the links will display horizontally as separate dropdowns

  • In the Narrow View the links will display in a dropdown menu 

 

Configure the Theme

If you have configured Filters above, you can adjust the button style of the filters. 

You can adjust the settings for the following components:

  • Unselected border color, radius, and thickness

  • Unselected text and background color

  • Selected border, background and text colors

Next, configure the main components of the Blog tile Theme:

 

  1. Select your colors for the following components of the blog display:

    • Tile header

    • Article title

    • Author

    • Date

    • Excerpt

    • Divider

    • Tile border

    • Article background/Row highlight.  

      • Note: If you have selected alternating row highlights (selected in Setup above) the colours will display differently depending on your selected mode.

        • List View

          • this color controls the background of every other row

  1. Masonry

    • this color controls the box background

  1. Select your colors for the button style this includes the following options

    • Background

    • Background hover

    • Text color

    • Text color hover

    • Border color

    • Border thickness (in pixels)

    • Border radius (in pixels)

Note: You can type the basic colors into each color field. For example, red, blue, green, brown, black, white, yellow, purple, orange. For other colors, you can enter hexadecimal values. If you don’t know the hexadecimal value, convert your colors at http://rgb.to.

Preview

As you adjust the theme, the preview at the top of the section will update with your changes so you can preview the theme before publishing.

 





Related articles