Skip to content

Blueprint tutorial (Step 2): Add carousel code

Jump to bottom Edit New page
soo oh edited this page Jul 17, 2015 · 9 revisions

This is part 2 of a step-by-step guide to creating a configurable Bootstrap carousel blueprint.

Code is available in this repo.

Follow instructions in step 1 before doing this.

Adding bootstrap carousel

Now that we have a barebones middleman app running, let us add a bootstrap image carousel to it.

Here, we'll write the code for carousel assuming that all configuration data like images and captions come from data/autotune.json file. Later, we'll wire up autotune to write configuration to this file when the project is built.

1. Include Bootstrap on the page

In source/layouts/layout.erb file, add the following lines inside the <head> tag as shown here.

<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap files -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

2. Add carousel markup

Replace the existing markup in source/index.html.erb with the following like shown here.

<script>
var AUTOTUNE = <%=data.autotune.to_json %>;
</script>
<div id="blueprint-carousel" class="carousel slide">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#blueprint-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#blueprint-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<%= javascript_include_tag  "slideshow" %>

3. Add javascript to insert the slides

Create slideshow.js in source/javascripts folder. Add the following code to the file.

(function ($) {
  'use strict';

  var slides;

  var addSlides = function(){
  	$.each(slides, function(i, item){
  		var $itemDiv = $('<div>')
  			.addClass('item');

  		// set the first slide as active	
  		if( i === 0){
  			$itemDiv.addClass('active');
  		}	

  		$itemDiv.append($('<img>')
  			.prop('src',item.src));

  		if(item.caption){
  			$itemDiv.append($('<div>')
  				.addClass('carousel-caption')
  				.html(item.caption));
  		}
  		$('.carousel-inner').append($itemDiv);
  	});
  };

  $(document).ready(function () {
    slides = AUTOTUNE.images;
    addSlides();
  });

})(jQuery);

4. Configure the project

In config.rb, add the following lines

set :layout, 'layout'
set :vertical, data.autotune.theme

Change the build specific configuration section at the end of the file to the following

configure :build do
   require 'uri'
  uri = URI(data.autotune.base_url)
  set :absolute_prefix, "#{uri.scheme}://#{uri.host}"

  set :url_prefix, uri.path
  set :http_prefix, data.autotune.base_url

  activate :asset_hash
  activate :minify_javascript
  activate :minify_css
end

5. Add dummy data for testing

Create a data/autotune.json file with the following content

{
  "title": "A sample slideshow",
  "slug": "sample-slideshow",
  "theme": "default",
  "slides":[
	  {
	  	"image":"http://kavyasukumar.com/apps/imgSlider/img/before.jpg",
	  	"caption":"Evanston, IL at night."
	  },
	  {
	  	"image":"http://kavyasukumar.com/apps/imgSlider/img/after.jpg",
	  	"caption":"Evanston, IL in the morning."
	  }
  ]
}

6. Start middleman

Run bundle exec middleman command.

Congratulations! You now have a configurable carousel running.

Proceed to the next step to make this a blueprint.

Add a custom footer
Clone this wiki locally