What is a showcase?
A showcase allows you to showcase your work with a large image, description and a list of features.
Creating A Showcase Datafile
Create a datafile in your sites _data directory in the following format. Subtitle, features and tags are not required.
The description text accepts markdown and is run through the markdownify filter on the page.
The image_ratio will default to is-16by9 if it is not defined and accepts the Bulma image classes.
To display GitHub Stars, Forks and Watchers badges add your GitHub user and repo name to the github setting, such as ianfab/bulma-simple-theme
To change the default styles of the features, set features_styles. This uses the styles from bulma-block-list npm package.
intro: |-
This is some introduction text for the showcases.
## Example Heading
It can convert markdown format
items:
- title: Example showcase item
subtitle: Example subtitle
description: |-
This is the example description for this item that you are showcasing and has an image, title, description, tags and a link.
features:
- This is a feature
- This is a feature
features_styles: is-centered is-outlined is-primary
image: https://via.placeholder.com/1024x788
image_ratio: is-16by9
link: http://www.example.com
link_text: View example
tags: PHP,CSS,JavaScript
github: user/repo-name
Displaying the Showcase
Set the showcase in the page’s front matter to be the name of the showcase data file without the extension. This gives you the ability to create multiple showcases to be used on different pages.
title: Showcase
subtitle: An example showcase page
layout: page
showcase: example_showcase
#showcase_tag: Theme
show_sidebar: false
You can add the optional showcase_tag attribute to filter the showcase items for a specific tag.
Showcase Include
The showcase include allows you to include showcases anywhere.
The include needs only the items as argument, and an optional tag for filtering.
Below is an example for the include.
{% include showcase-items.html items=site.data.example_showcase.items tag="Theme" %}
Example Showcase Include
Bulma Simple Theme
A simple theme built with Bulma
A simple Jekyll theme built with the Bulma framework, available as a Ruby Gem. You may recognise it, it’s what powers this website!
There is a wide variety of different page layout options available, along with the essential blog and post pages.
- Responsive
- Page With Sidebar
- Page With Menubar
- Page With Tabs
- Page Contents
- Landing Page With Callouts
- Blog and Posts
- Showcases