Use an HTML Template to Represent Data

This post will focus on how you can use an HTML template to represent data for an image gallery.

A typical image gallery may have photo albums, with each album containing photos, and then there is data associated with each photo.

Take a look at this screenshot from the index.html file, which contains the templates. The following shows the HTML template for the albums template. This template matches up with the albums.js file, which was shown in the previous post.

Wk4WriteTemplate1

  • The {{#each albums}} template expression matches up and displays the content associated with the albums member variable from the albums.js file.
  • That “data id” attribute allows you to click on the thumbnail and bring up the whole album.
  • the {{photos.length}} expression gives you the size of the array, which tells you how many photos are in that particular album.

Additionally pictured below are the photos template and a photo template, the latter is used for a large display of an individual photo.

Wk4WriteTemplate2

Wk4WriteTemplate3

The next template is for the slide show carousel. It uses some built-in jQuery and bootstrap to give it some rather nice features.

Wk4WriteTemplate4

Lots of the template is fairly boilerplate. The important thing is how to get the photo data into the slide show. The following bit of code, from the template, shows how to do that.

Wk4WriteTemplate5

The {{#if @first}} is true if the current item in the template is the same as the first item in the array you are display. This handlebar template will ensure the first photo is displayed in your carousel.

You can see that the index.html contains a number of templates that you can use in different contexts to display different aspects of the data.

The screenshots in this post show only snippets of the code. Feel free to download the complete image gallery source code.

 

Bootstrap Modal Template Pop-Up Display

This post will focus on how to display a single piece of data with a bootstrap modal template.

Think of this as the opposite of displaying different pieces of data a single way with one template. Instead, you will display a single piece of data with different templates. One template will be a bootstrap modal template.

Wk3BootstrapModal

In the above picture you see an object being displayed with two different templates. The display on the right is called a bootstrap modal display. The term “modal” describes a pop-up type display. A modal display overlaps in front of the existing display.

The following picture displays code for a bootstrap modal template. It has several classes that allow for lots of customization.

Wk3BootstrapModal2

The next bits of code show you how to display the modal, and how to display the other template structure when the modal template is hidden.

Wk3BootstrapModal3

Pictured above, the jQuery “on” function binds functionality to the moment an event happens on your webpage. The “on” function handles many types of events. In this case, the even being handled is when the modal is hidden. The function that binds to this event is the details template view when the modal is hidden. It acts like a virtual click of the details button when the modal is hidden.

Pictured below is the jQuery click method that triggers display of the details template.

Wk3BootstrapModal4

The next picture is the jQuery click method that triggers display of the bootstrap modal template.

Wk3BootstrapModal5

Do you want to see the full code used for the example it this post. You can download all the files for free.

Bootstrap Grid System – Gain Control

The bootstrap grid system is a brilliant method to gain control over the responsiveness of your website. Consider the built-in bootstrap classes in the following code:

<div class=”row”> <!– start row –>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_1.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_2.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_3.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_4.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_5.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_6.jpg”>
++</div>

</div> <!– end row –>

The main thing you need to know about this example derives from the <div class=”col-xs-6 col-md-3 col-lg-2″> tag.

Remember that bootstrap is built on 12 evenly spaced grids.

The class “col-xs-6” indicates that on an extra small screen, the image will consume six of those grid spaces. Thus, you will see two columns of pictures.

The class “col-md-3” indicates that on a medium screen, the image will consume three of those grid spaces. Thus, you will see four columns of pictures.

The class “col-lg-2” indicates that on a medium screen, the image will consume two of those grid spaces. Thus, you will see six columns of pictures.

You can see how the bootstrap grid system (along with these built-in classes) allows you to easily gain control over how your content is displayed.

Plan first! So, as you build your site you will know how many of the grid spaces to consume on an extra small, medium, or large screen size.

Read the documentation on the bootstrap grid system, for more information.

How to Leave a Breadcrumb Trail

A good site should communicate to the users where they are on your site, at all times. A typical way to telling users where they are is to leave a breadcrumb trail on all your pages.

To build a bootstrap navigation bar, you use an unordered list, <ul>. For a bootstrap breadcrumb trail, you will us an ordered list, <ol>. This makes sense. Order is not so important for the navbar, but it is important for the breadcrumb trail. You want users to know where they are, and how to get back to where they came from.

For example, directly under the main heading, <h1>, on a page called “Albums”, you would create a breadcrumb trail as follows:

<!– start breadcrumb –>
<ol class=”breadcrumb”>
++<li><a href=”index.html”>Home</a></li>
++<li><a href=”albums.html”>Albums</a></li>
</ol>
<!– end breadcrumb –>

Using the bootstrap class “breadcrumb”, the trail on your albums page should display as pictured.

bootstrap breadcrumb trail

You would then add <li> elements to your breadcrumb trail depending on how many levels deep you go into your website. For example if someone clicks on one of your albums, then it would take that user to the photos page. Therefore, you would add a third <li> element to the breadcrumb on the photos page.

It is suggested to read the bootstrap documentation on breadcrumb trails, for more information.

Collapsible Navigation Bar – A Must for Mobile Friendly

After you learn how to build a basic bootstrap navigation bar, you will want to know how to transform it to a collapsible navigation bar. Why? Well, if the user is on a small mobile device, then the navigation bar may consume the entire screen. This would result in a bad user experience, and the user may quickly leave your site. If you build a collapsible navigation bar, then the user experience is improved.

In order to build a collapsible navigation bar, you will need to program your site so it knows what to display when the nav bar is collapsed, and when it is not collapsed.

Start with your basic nav bar code from the previous lesson, and build on it to add the code necessary to build a collapsible navigation bar.

The correct code is shown below. Directly below are descriptions of all the additions shown in the code.

Collapsible Nav Bar Code
HTML5 Code for a Collapsible Navigation Bar

An Analysis of the Collapsible Navigation Bar Code

Make another <div> element for the collapsed navbar. Label it with comments, so you can distinguish the nav bars.

Add the built-in bootstrap class “navbar-header” to the collapsed navbar. This class tells your page that the collapsed navbar should sit on top of everything else.

Add the “collapse navbar-collapse” class to your un-collapsed ‘div’ element.

The next step is to make a make the <button> in your collapsed ‘div’ interact with your un-collapsed <div>. So, set a “main_navbar” id inside your un-collapsed <div>.

Now you will add a whole slew of characteristics to your button. Look above at all the characteristics added to the <button> tag. The type given improves accessibility. The class tells what to show when the navbar is collapsed. The data-toggle is picked up by bootstrap.js to give the button interactivity. The data-target specifies what actually collapses (it’s the main navbar). Finally, aria-expanded implies the button will not initially be seen.

Take a look at your progress. The images below show how the nav bar appears, collapsed and un-collapsed, on a small screen.

Wk2NavBarCollapsedWk2NavBarUnCollapsed