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 github.com/[USERNAME]/frame9-jekyll-theme.
License¶ ↑
The gem is available as open source under the terms of the MIT License.