Creating Custom HTML Tiles

Overview

If you are a place owner, you can create an HTML tile containing custom HTML code. You should be aware of some aspects of Custom HTML tiles before you start designing them.

This article provides an introduction to Custom HTML tiles as well as the procedure to create such tiles.

Information

The HTML tile lets you provide customized HTML in a mobile-friendly tile on a place page. It replaces the HTML widget that was available in previous versions. For more information about using HTML tiles, see Adding an HTML Tile to a Page in the Jive community. For information about the capability of this tile versus a developer-created tile and the HTML widget, see Custom HTML in Your Jive Community.

Depending on the complexity of your HTML, you may have concerns about whether your presentation can be displayed effectively on a mobile device. Setting the tile to be mobile-unfriendly means that it won't be displayed when the page is viewed on a mobile device or in a narrow width browser. If you have designed your HTML to be responsive, you can safely enable Mobile Friendly.

Link Types

The HTML Tile add-on differentiates between 3 types of links:

• Absolute, for example <a href='http://localhost/groups/mygroup1/content'>Absolute</a>.
• RootRelative, for example <a href='/groups/mygroup1/content'>RootRelative</a>.
• Relative, for example <a href='content'>Relative</a>.

In the examples above, the HTML tile is placed within a group named mygroup1 and that the instance URL is localhost. After being resolved, all three links redirect to the same URL address: http://localhost/groups/mygroup1/content.

Process

You add a tile and then add your custom code to it to create your custom tile. To create a Custom HTML tile:

1. Navigate to a place.
2. Open the page where you want to add a tile for editing by clicking the Gear icon > Edit <page title>.
3. Click Add a tile.
4. Under Categories, select Graphic Elements.
5. Under Tiles, select Create an HTML tile.
6. In the Your HTML dialog box, provide your HTML code.
7. To upload files for the tile, click Manage Files and upload the necessary files.
8. In Height (px), specify the height of the tile, in pixels.
   You can specify the height of the tile as you want to. By default, it is set to 250 pixels for narrow tiles, and 520 pixels for wide tiles. Note that with long tiles users may be required to scroll down to view all tile information.
9. If the tile is responsive and the HTML code is mobile-friendly, under Mobile Friendly select Yes.
10. Click Preview to see how the tile looks like.
11. Click Submit to enter the tile to the page.
12. Click Save, at the bottom of the page.

Back to top