Understand and Customize Hub Item Tiles

Follow

Want to learn how to customize Item Tiles in your Hub? This primer will help you to understand the anatomy of an Item Tile.


 

Before you Begin

  • To customize Item Tiles, you'll need at least a basic understanding of HTML.

 

About Item Tile Customization

Tiles can come in many variations, but every Tile is made up of the same basic parts. In this article, we will look at the building blocks of an Uberflip Hub Item Tile. Once you understand how they're built, you will be able to use that knowledge to customize the Item Tiles in your own Hub. (To get you started, we'll also look at a few example customizations at the end of this article).

 

Anatomy of an Item Tile

Below is an HTML markup and diagram of an Item Tile:

itemeditorimage_54d8e250c8aa0.png

How to read this markup and diagram:

The markup on the left is a simplified HTML tree of a Tile. This is the code that determines the look and feel of the Tile.

The diagram on the right represents the Tile that results from the HTML shown on the left. The numbered elements in the diagram correspond to the line numbers in the markup.

Some other formatting notes:

  • Any markup in italics denotes markup that doesn’t always exist for each tile

  • Any bold tags denote that the tag isn’t always the same (e.g. sometimes the <li> tag is a <div>)

  • Any [variables] in square brackets denote...you guessed it, variables! 

     

Line-by-Line

Let's look at the markup line-by-line to understand what each line does.

Tip: The image above is linked — right-click on it and open it in a new tab or window so you can easily refer to it as you read about each line below.

Line 1

This is the main container of a tile. Depending on where it lives within a Hub, this container can either be an <li> or a <div> but in either case both look exactly the same.

The variable in the class list [item-service] is what you would expect - the service type of the Item - i.e. instagram, facebook, blogpost, youtube, etc. There are other classes which may be included that will get covered later on.

​​The standard dimensions of a tile are 250 pixels wide by 330 pixels high. This varies under the following conditions:

  • When a tile is “Highlighted” (using the Lab feature “Highlight first Item”) then these dimensions roughly double to 520 pixels wide by 680 pixels high. The <li> (or <div>) will include a class “highlight” in this case.
  • On mobile, or more specifically on screens narrower than 560 pixels, the dimensions change to 100% wide by 370 pixels high.

Line 2

When an Item is featured on the home of your Hub, the star icon will display, otherwise this markup will not be rendered.

Line 3

If an Item has a thumbnail to display, the image container will be rendered. the <li> (or <div>) will also include a class “with-img”, otherwise a class “no-img”. The image container’s height is standardized for the most part at roughly 41% of the total height of the tile. Here are the exceptions:

  • Instagram tiles have the image set 56% since they are always square (it’s more than 50% because the image itself is scaled larger than the width of the tile to account for any Instagram borders applied)
  • Flipbooks (which confusingly have an <li> class “uberflip”) have their image height set to 88% because they’re predominantly portrait document covers. That said when a Flipbook cover is landscape the default height (41%) is used.

Line 4

For any video services (YouTube, Vimeo, Wistia, etc.) a play button displays overtop of the image.

Line 5

This is the thumbnail image itself. Uberflip uses an image proxy to resize and scale images from around the web to a standard size of 500 pixels wide by 272 pixels high. This is to ensure we don’t overload your visitors with massive images when in most cases only a 250 pixel wide area is visible. For example if one of your blog posts was an infographic, and that infographic was the image our system automatically picked us as the “thumbnail”, imagine what would happen if we squeezed that infographic into a tile - a lot of wasted bandwidth, and a bad user experience in general. That said, not all images are passed through this image proxy:

  • YouTube, Vimeo, Slideshare, Instagram: All these services provide an already standardized thumbnail image through their API
  • Uberflip Flipbooks: the cover image is already returned in a suitable size (since we’re in control over this image)

Line 6

Much like the play button, for any video tiles the duration of the video is displayed here.

Line 7

The Description container. This is always present as every tile has some form of a description. 

Line 8

This container holds the friendly timestamp that represents the created or published date of the Item. This element is omitted when an Item is “featured” because a featured Item may have been created long ago and should not detract a visitor from clicking on a featured item.

Line 9

The friendly timestamp is displayed as either “about x hours ago”, “a day ago”, “x days ago”, “about a month ago” or “x months ago.

Line 10

Social avatar. This displays for any social Item tile such as Twitter, Facebook or Instagram. For all other types of tiles this element is omitted.

Line 11

The title or heading of the Item is always displayed, however it serves different purposes in different cases. For social tiles, where there is an avatar, this element is given the class “avatar” and is populated with the service’s user name. For example a Twitter account name (not the @handle). For non-social tiles, such as Blog Articles (blogpost), Videos (youtube, vimeo, wistiar, vidyard, etc.) or Docs (uberflip, slideshare) this is the title of the Item. The size in which it displays, both for social and non-social, depends on whether or not there’s an image for this tile (which as we learned from line 3, the <li> (or <div>) main container will include a class “no-img”.

You should also note that this element is not always a <h3> - it may be a <div>. This is for SEO purposes depending on where tiles are displayed in a Hub. Regardless, this element will always have the class “h3like” so that it can share styling.

Line 12

The subtitle (Item description or social update) element, <h4>, is not always displayed. For social tiles, this represents the tweet, facebook update or first comment on an instagram photo. In those cases this element always displays. But like the title, its size is determined by whether or not an image exists for the tile. For non-social items, the subtitle or description may not display for the following reasons:

  • There is no description! Most Flipbooks (unless given a description manually) will not have a description.
  • The tile includes an image, and the title is longer than 30 characters. In this case the element renders, but is hidden by default. The <h4> will include a class “long-h3” in this case. With custom CSS you can easily override this behaviour and show the element.

Line 13

The share icons that display over top of the tile on hover (when the share option is enabled) is a set of elements that we won't dive deeply into here. The styling of these share buttons can however be altered just like any other element of a Tile.

Line 14

The footer of each tile, and also its main call-to-action, always displays. It is the container in which the Item’s service Icon, actionable label and arrow display, and is the main link to the content of this Item. The service icon is set as a background on this element, and is targeted by the main container <li> (or <div>) having the service name as a class value (i.e. <li class=”tile ... twitter”>).

Line 15

Using CSS magic, this element creates a fading effect for the description should it bleed below the start of the footer.

Line 16

This element holds the Verb and Noun for this title (i.e. “Read Article”). Each of these can be customized in the application under Appearance > Custom Labels.

Line 17

This is how the arrow or chevron on the right of each tile’s footer is rendered.

Line 18

You may notice that more than just the tile’s footer is a link. This additional link element is positioned over the entire tile, making the whole area of a tile actionable.

 

Customization Examples

Now that you've got the basic knowledge of how an Item Tile is created, let's see how you can modify its appearance with a set of examples. These examples will not focus on best CSS practices - you know those already!

 

Example 1: Round the corners of your tiles

li.tile.single, div.tile.single{
   border-radius:5px;
}

This will round the corners of ALL tiles. Notice we covered our bases by include by <li> and <div> declarations. While you can get away with just ".tile.single" you're better off being as specific as possible. That said, for future examples we'll omit this to simplify the example.

And, of course you'll want to add the -moz and -webkit variants for border-radius. You should note that this will also round the corners of your CTAs. If for any reason you didn't want that, you can do this:

.tile.single:not(.cta){
   border-radius:5px;
}

Now let's say you wanted to round the corners of your Twitter tiles even more (i.e. 25px):

.tile.single.twitter{
   border-radius:25px;
}

 

Example 2: Hide the footer of all tiles

Not everyone loves the bottom of the tiles that read "Read Article" or "View Tweet" - you can get rid of the footer easily:

.tile.single > a.item-link.view{
   display:none;
}

Note this will also hide the fading effect for when the description bleeds since it lives within this element.

 

Example 3: Change the footer service icon

Not loving the little icons at the left of the footer for each service? Maybe you want your standard video icon instead of Wistia's logo. Easy fix:

.tile.single.wistiar > a.item-link.view{
  background:transparent url(http://yoursite.com/your-icon.png) 3px 5px no-repeat;
}

(A special note about Wistia's service tag. For reasons not worth explaining, the service tag for Wistia is wistiawith an "r" on the end.)

That may need some tweaking based on the size of your icon and the desired look, but you should get the idea.

And there you have it! Now that you have a good understanding of the way Hub Item Tiles work, feel free go and create your own customizations!

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.