Blueprint tutorial (Step 3): Making your project a blueprint

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

Code is available in this repo.

Read steps 1 and 2 before this.

Making the carousel a blueprint

For a blueprint to work in Autotune, it must contain certain files. In this step, we will add those files.

1. autotune-config.json

Autotune uses this file to create project configuration in the format we added in the autotune.json file in the last step. Read more about configuring this file here.

Add a autotune-config.json file in the project folder and copy the following into it.

This file generates the project form that the user will fill in, which in turn will generate the data in the autotune.json file. More information about how these two files interact is available here.

{
  "name": "Carousel blueprint",
  "description": "Blueprint for creating a bootstrap carousel.",
  "instructions": "### Instructions\n Add as many images and captions as needed.",
  "type": "app",
  "tags": ["Example"],
  "thumbnail": "thumbnail.jpg",
  "authors": ["Kavya Sukumar <[email protected]>"],
  "form": {
    "schema": {
      "type": "object",
      "properties": {
        "images": {
          "type": "array",
          "title": "Images",
          "items": {
              "title":"<span class='label label-primary'>Image</span>",
            "type": "object",
            "minItems": 2,
            "properties": {
              "src": {
                "title": "Image Url",
                "type": "string",
                "required": true
              },
              "caption": {
                "title": "Caption (optional)",
                "type": "string"
              }
            }
          }
        }
      }
    }
  }
}

2. autotune-build

This file should contain the script to build the project and copy the configuration so that your blueprint can access it. Read more about this file here.

Create a autotune-build file at the project root and add the following lines

#!/bin/bash

BUILD_COMMAND="bundle exec middleman build"
INPUT_DATA=$(</dev/stdin)
SAVE_DATA_TO=data/autotune.json

echo "Saving autotune data to $SAVE_DATA_TO"
mkdir -p `dirname $SAVE_DATA_TO`
echo "$INPUT_DATA" > $SAVE_DATA_TO

$BUILD_COMMAND

Run chmod +x autotune-build from the terminal to make sure that the file has execution permission.

3. embed.txt.erb

This is the embed code for projects created from the project. It is recommended that you use Pym.js to dynamically resize the iframe on content change.

• Copy Pym.js to the source/javascripts folder.

• Include the file in the index.html.erb file by adding this at the end of the file <%= javascript_include_tag "pym" %> but before including slideshow.js like here.

• Initialize Pym child in the slideshow javascript, by adding the following line

   var pymChild = new pym.Child();

• Add pymChild.sendHeight(); to the end of addSlides function

Now you are ready to create a embed code.

Add a embed.txt.erb file in the source folder. Copy the following lines to the file

<div data-analytics-class="embed" id="<%=data.autotune.slug %>__graphic"></div>
<%=javascript_include_tag('pym') %>
<script type="text/javascript">
new pym.Parent('<%=data.autotune.slug %>__graphic', '<%=asset_url('/') %>', {xdomain: '.*\.voxmedia\.com'});
</script>

4. TheRubyRacer

Add gem 'therubyracer', :platforms => :ruby to your Gemfile, then gem install therubyracer && bundle install.

5. Thumbnail

Finally, add a image at the root and name it thumbnail.jpg

Adding blueprint to Autotune

Commit changes to your project and push the changes to master branch of your repo.

---

Congratulations! You created your first blueprint. Add it to Autotune to start creating embeddable slideshows.