Collections like posts and pages work as you’d expect. If you’re new to them be sure to read Jekyll’s documentation.
The theme has been built with collections in mind and you will find several examples on the demo site (portfolio
A popular use case for collections is to build a portfolio section as part of one’s personal site. Let’s quickly walk through the steps to do that.
Step 1: Configure the portfolio collection by adding the following to _config.yml.
collections:
portfolio:
output: true
permalink: /portfolio/:name
These settings essentially say output index.html files for each portfolio document in _portfolio at _site/portfolio/<document-filename>/.
For example, now make a portfolio.html file in the ‘portfolios’ folder.
# grid-portfolio.html
---
layout: portfolio/grid-portfolio
title: "Grid Portfolio"
sub_title: "Aenean lacinia bibendum nulla sed consectetur"
classic_nav: true
portfolio_area:
enable: true
categories:
- title: "Branding"
filter: "branding"
- title: "Corporate"
filter: "corporate"
- title: "Application"
filter: "application"
- title: "Video"
filter: "video"
---
And then create portfolio content like _portfolio/donec-commodo.md.
Working with portfolio
This theme has a versatile portfolio that has been versions.
It can be included as
---
layout: portfolio/with-slider
title: "Donec Commodo"
sub_title: "Aenean lacinia bibendum nulla sed consectetur"
classic_nav: true
image: "/assets/images/art/m1.webp"
sm_image: "/assets/images/art/m1.webp"
big_image: "/assets/images/art/p1-full.webp"
grouped_by: masonry
link: "/"
filters:
- branding
- corporate
---
some content here
Portfolio Data Files
In addition to the built-in variables available from Jekyll, you can specify your own custom data that can be accessed via the Liquid templating system.
Jekyll supports loading data from YAML, JSON, CSV, and TSV files located in the _data directory. Note that CSV and TSV files must contain a header row.
Data files are included in this theme for portfolio under _data/portfolio folder.
Here is a basic example of using Data Files to avoid copy-pasting large chunks of code in this theme:
In _data/portfolio/fullscreen-grid.yml
---
portfolio_area:
categories:
- title: "Branding"
filter: "branding"
- title: "Corporate"
filter: "corporate"
- title: "Application"
filter: "application"
- title: "Video"
filter: "video"
portfolios:
- title: "Fringilla Nullam"
image: "/assets/images/art/p1.webp"
url: "#"
filters:
- corporate
- branding
- title: "Ridiculus Parturient"
image: "/assets/images/art/p2.webp"
url: "#"
filters:
- application
- title: "Ornare Ipsum"
image: "/assets/images/art/p3.webp"
url: "#"
filters:
- video
- title: "Nullam Mollis"
image: "/assets/images/art/p4.webp"
url: "#"
filters:
- corporate
- application
- title: "Euismod Risus"
image: "/assets/images/art/p5.webp"
url: "#"
filters:
- branding
- title: "Pellentesque Commodo"
image: "/assets/images/art/p6.webp"
url: "#"
filters:
- video
- branding
---
This data is rendered in _layouts/portfolio/grid-portfolio.html.
---
<div class="wrapper light-wrapper">
<div class="container inner">
<div class="grid grid-view">
<div class="isotope-filter text-center">
<ul>
<li><a class="button active" data-filter="*">All</a></li>
{% for post in page.portfolio_area.categories %}
<li><a class="button" data-filter=".{{post.filter}}">{{post.title}}</a></li>
{% endfor %}
</ul>
</div>
<div class="clearfix"></div>
<div class="tiles tiles-m">
<div class="row isotope">
{% assign grid_portfolio = site.portfolio | where:"grouped_by","grid" %}
{% for post in grid_portfolio %}
<div class="item grid-sizer col-md-6 col-lg-4 {% for filter in post.filters %} {{filter}} {% endfor %}">
<figure class="overlay overlay1 rounded">
<a href="{{post.url}}">
<img src="{{post.image}}" alt="{{post.title}}" />
</a>
<figcaption>
<h5 class="from-top mb-0">{{post.title}}</h5>
</figcaption>
</figure>
</div>
<!-- /.item -->
{% endfor %}
</div>
<!-- /.row -->
</div>
<!-- /.tiles -->
</div>
<!-- /.grid -->
</div>
</div>
---