Frame9 Jekyll Theme

A small flexible gallery theme for jekyll. The main feature is the 9 pane gallery element.

Installation & configuration

Fist install jekyll and create a project Jekyll quick start guide

Add the theme gem to your gemfile then do a bundle install.

gem 'frame9-jekyll-theme', '~> 1.0'

Install gorko with npm.

npm init -y
npm install gorko

Add the theme to your _config.yml

theme: frame9-jekyll-theme

Collections and Defaults

You will want to configure the collections and defaults.

collections:   
  tabs:         # Each tab shows up as a page in your sites nav
    sort_by: order
    output: true
    permalink: /:name/

defaults:
  - scope:      # use the default layout for tabs
      path: ''
      type: tabs
    values:
      layout: default

  - scope:      # Use the post layout for posts
      path: ''
      type: posts
    values:
      layout: post
      show_sibling_nav: true # Display `next` and `previous` links at the bottom of each post

Frame9 config options

frame9:
  show_current_tab: false               # display the current page in the navigation.
  avatar: 'assets/img/avatar.png'       # Your logo or avatar
  banner: 'assets/img/banner.jpg'       # optional banner image

  footer_links:                         # footer links
    - title: Github
      url: 'https://github.com/CodeKarmaDev/frame9-jekyll-theme'

Tabs

Each page you create in the _tabs folder will show up as a page in the site navigation.

You can arrange them with the order tag in the header.

I recommend crating a page under _tabs/home.md

---
title: home
permalink: /
order: 0
---

# Your Heading
{% include gallery.html items=site.posts openable=true limit=9 %}

Gallery Include Tag

The gallery.html include displays a panel of images. It takes five passable parameters items, openable, viewer, limit, and class

{% include gallery.html items=site.posts openable=true limit=12 %}

You can pass the gallery include tag a collection or a list of "Gallery Item Objects"

Tag	Description	Default
`items`	Accept a collection or a list of gallery items	`required`
`openable`	will make each images a hyperlink to its own page.	`false`
`viewer`	Each image will enlarge when clicked	`false`
`limit`	can set the max amount of images to display in the panel	`9`.
`class`	adds custom classes to the `img-wrapper` element.	`""`

Gallery Item Object

A gallery item object should to have image and alt properties. with optional summery and url properties. When using a collection you can define these in the markdown header.

Tag	Description	Default
`image`	the path to a image file	`Required`
`alt`	the alt for the image	`Recommended`
`summery`	some markdown that displays a preview in the gallery.	it defaults to jekyll's excerpt property
`url`	the url to open when openable is enabled	With a collection Jekyll handles it for you

_posts/yyyy-mm-dd-example.md
---
image: assets/img/post1.jpg 
alt: A cool picture of something 
summery: >-                     
    ### Title
    Sub Title
url: /my/post/

Gallery Item Include

You can also use gallery_item.html directly. You might want to display the image on its own page for example. It accepts item, viewer, openable, and class. the item being a single Gallery Item Object.

{% include gallery_item.html item=page viewer=true class="float-left mb-x" %}

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/frame9-jekyll-theme.