Babble by Vernacchia

If You're Using Github Pages

If you're using Github Pages to publish with this "theme" you WILL NOT be able to use any custom plugins. Checkout the two links below, which outline what you can do to combat this problem.

• http://ixti.net/software/2013/01/28/using-jekyll-plugins-on-github-pages.html
• http://davidensinger.com/2013/04/deploying-jekyll-to-github-pages/

Features

1. Creates posts (obviously)
2. Creates tag structure
3. Displays gists
4. Displays youtube videos
5. Pagination
6. Custom image tags + resizing modified for my use case
7. jsFiddle
8. Search
9. Post Thumbnails
10. Twitter Card Integration (summary and large summary)
11. Open Graph Integration

To see a full feature list and what I modified take a look at my README.

GEMs Needed

I have just started using Ruby v2.0.0 (but this will work with v1.9.3). GEMs needed include:

1. rdiscount - for rendering
2. activesupport - for caching
3. json - for Lunr Search
4. nokogiri - for Lunr Search

How to Use

Pagination

This will automatically paginate based on value set in _config.yml

paginate: 5

Tags

Tags will be created for you automatically if you put them in your post front-matter.

---
layout: post
title: Babble by Vernacchia Jekyll Theme
date: 2013-10-31 20:27:32
tags:
  - jekyll
  - jekyll-theme
  - twitter-bootstrap
summary: Summare for this post
---

Gists

To create a Github Gist use the sytax below.

// single page gists
{% gist identifier %}

// multi-page gists
{% gist identifier/filename %}

// example
{% gist 82c02b8fed1877368d7a %}
{% gist 82c02b8fed1877368d7a/intelligent-dropdown.js %}

Youtube Videos

// no auto width (will default to 100%)
{% youtube identifier %}

// no width or height specified. Defaults to 560(w) x 420(h)
{% youtube identifier %}

// specific width (870) and height (500)
{% youtube identifier 870 500 %}

// examples
{% youtube 9kf51FpBuXQ 870 653 %}
{% youtube 9kf51FpBuXQ %}

Image Resizing and Optimization

Using this Liquid tag will resize your images. I've modified the original script to add classes that automatically center the image if it's not as big as the containing element.

I also modified it to add a height and width attribute to the image tag that is generated. All images generated are fully responsive.

The following needs to be added to your _config.yml.

image:
  source: uploads
  output: generated
  presets:
    centered:
      attr:

And to use in your posts, add something like below.

// basic
{% image [preset or WxH] path/to/img.jpg [attr="value"] %}

// this theme uses this syntax most of the time
{% image 870xAUTO /2013/04/medium-fp.jpg %}

jsFiddle

This Liquid tag will embed a jsFiddle into your post. Stolen from Octopress.

// basic. will include all tabs
{% jsfiddle fiddle_id %}

// basic. specific tabs included
{% jsfiddle fiddle_id [tabs] %}

// example
{% jsfiddle ccWP7 %}

// css tab excluded
{% jsfiddle ccWP7 js,html,result %}

Search

A JSON file is generated after the whole site is indexed by the Lunr Search plugin. The search page is located here if you want to see my implementation.

Post Thumbnails

To include a post thumbnail on index/paginated pages, you only need to edit your post's Front-matter.

---
thumbnail: 'images.jpg' // thumbnail
heroImage: 'images.jpg' // Hero image
---

These will only be displayed on the index or paginated pages. NOT on actual posts.

These images should be stored at /img/posts/hero_images|thumbnails

These can be used in unison.

Twitter Cards

This theme supports Summary and Large Summary Twitter Cards. You just have to edit the post's Front-matter. If you have a large image, the thumbnail image will be ignored.

---
twitterThumbnail: 'http://yourdoman.com/path/to/image' // summary thumbnail
twitterHeroImage: 'http://yourdoman.com/path/to/image' // large summary image
---