Skip to content

Blueprint tutorial (Step 2): Add carousel code

Casey Miller edited this page Feb 10, 2016 · 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. Read more: How to access your Autotune data in an app

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

Note: Once the blueprint is finished and loaded into autotune, the project form will generate this data. Creating this dummy data is necessary, however, in order to correctly load the blueprint into Autotune and for developing locally. More information about this file is located here.

{
  "title": "A sample slideshow",
  "slug": "sample-slideshow",
  "theme": "default",
  "images":[
	  {
	  	"src":"http://kavyasukumar.com/apps/imgSlider/img/before.jpg",
	  	"caption":"Evanston, IL at night."
	  },
	  {
	  	"src":"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.

Clone this wiki locally