Slider Tile 3.1

Configuring the Slider Tile

What’s new in 3.1

  • Apply character limit on desktop content in Admin panel

3.0 Updates

The configuration panel has been updated to allow for the ability to display any Jive content dynamically in a slide format. The slider is compliant with accessibility requirements. Choices in the panel include the following:

  • Option to choose Curated or Dynamic display

  • Allow “Filter by tag” similar to Blog Tile

  • Allow “Select a Place(s)” or “Current Place”

  • Sort options: “Last Activity date” or “Date Created”

  • All Content Types are supported with ability to just filter one or more (e.g., Blogs)

  • Image display

    • The first image will be used from content for slide (If it is a blog post, it will take Blog Banner Image first)

    • Option to provide a default slide image if the content doesn’t have an image

  • Ability to apply character limit to the text displayed on the slider

Bug fix in 3.0.1

  • Apply character limit on desktop content in Admin panel

 

https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522

If you have more than one language available for set up in your tile, choose which language this will be displayed in. The default preference is English. After you’ve configured in one language, if you pick another language, you’ll be asked if you want to display the same posts for the second language (by copying the settings) or “create from scratch”. Refer to https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522 for more details on the multi-language set up and other set up detail

Configuring the Tile Setup

  1. To display the tile’s configuration panel, click the gear icon in the upper right corner of the tile.

  2. You are now ready to configure the appearance of the tile. Note:  You must configure some aspect of the Tile's appearance and save your work before adding it to the Place page.

Slider Tile Configuration
  • Decide if you are picking either Dynamic or Curated option. Dynamic will allow you to display blog posts automatically from a particular place(or places). Curated allows you to choose blog posts individually.

Dynamic Mode

This feature is similar to the Blog Tile Dynamic option

Slider Dynamic Mode Layout



  1. Click Add to choose what you wish to display in the slider from either the entire community or a specific place.

  2. Decide how many slides to display in Slide Count

  3. Sort by Latest Activity or Date Created

  4. 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).

    • Note: You can have “OR” results. Simply add a comma (,).

  5. Choose to Restrict to Content Type.

  6. Decide whether to have links open in a new browser window

  7. Pick a Default Slide Image (you will need to upload that image first and then input the link – see below in next section for more instructions regarding images). This image will display if the content doesn’t have an image.
    Tip: If you are using blog posts, the first image in that blog post will be used.

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

You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.

Curated Mode

In this version, you may pick each individual slide.

 

  1. Optional: Enter text for the Slide Title. Slider title text is the dominant, key headline for the slide.

  2. Optional: Enter text for the Action Button Text. Action text calls the user to action. 

    • For example -  “Sign Up”, “Join Now!”, “Learn More.”

  3. Optional: Enter the Action Button URL that will direct the user to a specific place. Action button URL can be an external link or an internal (Jive) link. To have the link open in a new window, check the appropriate box.

  4. Enter the Slide Image URL for the picture you want to display in the slider (see below for adding images).

  5. Optional: Decide whether to have all slide links open in a new browser window.

  6. When you finish all entries for a slide, click Save Slide.

  7. As needed, Select New Slide and repeat Steps 4 through 8 for each slide required for your user experience.

 

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

 

Adding Images

  1. To add images to your Slider Tile, you will first need to upload them in the community. Simply click the gear icon in the upper right corner of the place you are working and select Static resources. (Depending on the version of Jive you have, this may say Image Files instead of Static resources)

  2. In the popup, click Upload a File and select the image(s) you want to use in the slider. 

  3. Once you upload your images, copy the URL to your clipboard and paste each URL into a notepad to have handy when working in the Slider configuration panel.

 

Configuring the Theme

  1. Select Theme to open configuration options. 

 

  1. Select the Interval time (in seconds) for the slider. Interval time is the time between slide changes. You may choose between 4 to 10 seconds. 

  2. Select the Transition (in seconds). The Transition is the time the image takes to change. You may choose a range between 0.5 and 2 seconds.

  3. Enter the Desktop height (in pixels). Desktop height will scale the slider accordingly in a space or group. 

  4. Enter the Mobile height (in pixels). Mobile height will scale the slider for mobile users. 

  5. Enter the desired hexadecimal code for the Accent color. Accent color affects the background of the Slide text and the color of the Action text. If you don’t know the hexadecimal value, convert your colors at http://rgb.to

  6. Select the Background opacity. This will adjust the opacity behind the text.

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

Configuring the Fonts

You can configure the fonts for both the title and the action link. Choose between Basic, Google or Custom Font.

Configure Advanced Settings

Customize Margins. Set extra padding between this tile and other tiles if desired.

Configure HTML

Configure Google Analytics

 Copying your Tile Settings

Best Practices and Tips



Best Practice/Tip



How To…

Static Image URLs

Upload all your images and copy the Jive generated URLs for each uploaded image to a notepad before you begin configuring your slider. You will need to paste these image URLs into the image URL field.

Accent Color

Use darker colors for the accent color to enhance the visual effect of the slider. 

Headlines

Keep your headlines concise to avoid text cutting off.  

Fonts

Ask your branding team which Google Font is most similar to your brand font for the easiest font setup.

3 Column Layout

Be mindful when using the slider in the center of a 3-column layout as the width of the slider in that format can become as small as using the tile in a sidebar column. 

Action Links

Make your action link short and actionable like "Learn more", "Find out why", "Start exploring". Avoid text like "click here" or "click this button”.


Support

Need support or want to talk to us?  Please send an email to:

support@socialedgeconsulting.com