Blueprint tutorial (Step 2): Add carousel code
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.
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.jsonfile. Later, we'll wire up autotune to write configuration to this file when the project is built.
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>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" %>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);In config.rb, add the following lines
set :layout, 'layout'
set :vertical, data.autotune.themeChange 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
endCreate 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."
}
]
}Run bundle exec middleman command.
Congratulations! You now have a configurable carousel running.
Proceed to the next step to make this a blueprint.