Skip to content

Blueprint tutorial (Step 2): Add carousel code

Jump to bottom Edit New page
KavyaSukumar edited this page Jul 2, 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

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

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

  ```js
  (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

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

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

  ```rb
  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
  ```

4. Add dummy data for testing

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

  ```json
  {
    "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."
  	  }
    ]
  }
  ```

5. Run the middleman server with `bundle exec middleman` command. 
  
---
Congratulations! You now have a configurable carousel running.

Proceed to the [[next step|Blueprint-tutorial-(Step-3):-Making-your-project-a-blueprint]] to make this a blueprint.
Add a custom footer
Clone this wiki locally