Portfolio Collection
A portfolio site block for miniml. I use this for my personal portfolio hosted for free on GitHub. Check it out here for reference: https://isaacjosephhorton.github.io/portfolio There is some nice javascript gallery functionality and its of course responsive and looks great on mobile.
Start by adding the following code to your existing _config.yml file. (What we are doing is adding a collection to our site and the collection type is portfolio_items linked to /portfolio/:path/.)
# 5. Collections
collections:
portfolio_items:
output: true
permalink: /portfolio/:path/Under #Build Settings in the _config.yml add the build for the portfolio items by copying the code below:
- scope:
path: ""
type: "portfolio_items"
values:
layout: "portfolio"It should look something like this (your configuration may differ):
# Build settings
markdown: kramdown
defaults:
-
scope:
path: ""
type: "posts"
values:
layout: "post"
comments: true # add comments to all blog posts
-
scope:
path: "" # all files
values:
layout: "page"
show-avatar: true
- scope:
path: ""
type: "portfolio_items"
values:
layout: "portfolio"Now create a new page located under _pages called portfolio.html and copy in this code:
---
layout: page
title: Portfolio
subheading: The works of IJH
permalink: /portfolio
---
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid uk-height-match="target: > div > .uk-card > .uk-card-media-top">
{% for portfolio_item in site.portfolio_items reversed %}
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-media-top uk-background-cover uk-height-large uk-border-rounded" style="background-image:url({{portfolio_item.image}});">
<a href="{{site.baseurl}}/portfolio/{{portfolio_item.slug}}/" class="uk-display-block uk-height-large"></a>
</div>
</div>
</div>
{% endfor %}
</div>
Now create a directory called _portfolio_items and this is where your items will be stored. Start by creating an example.md file.
---
date: 2022-02-12 12:37:18 -0800
tags:
- photography
- design
title: American Mother
client: Black History Month
image: "/assets/img/uploads/african-mother.jpg"
---
Linocut Illustration of American Mother.This is just an example and you can use any front matter you like. The front matter contains the portfolio details as would pertain to a post.
Now create a new file called portfolio.html in your _layouts directory and copy in the following code:
---
layout: default
---
<hr class="uk-margin-remove-top">
<div>
<div class="uk-section-xsmall">
<div class="uk-container">
<div uk-grid>
<article class="uk-article uk-width-3-4@l">
<div uk-lightbox>
{% if page.svg %}
<a href="{{ page.image }}" data-alt="Image"><img src="{{ page.image }}" alt="{{ page.title | downcase }}"></a>
{% else %}
<a href="{{ page.image }}" data-alt="Image"><img src="{{ page.image }}" alt="{{ page.title | downcase }}"></a>
{% endif %}
</div>
</article>
<div class="uk-width-1-4@l ">
<div class="uk-card">
<h6 class="uk-margin-remove-bottom">Title:</h6> <h5 class="uk-margin-remove-top">{{page.title}}</h5>
{% if page.client %}<h6 class="uk-margin-remove-bottom">Client:</h6><h5 class="uk-margin-remove-top">{{page.client}}</h5>{% endif %}
{% if page.subheading %}<h5 class="uk-margin-small-bottom">{{page.subheading}}</h5>{% endif %}
<h6 class="uk-margin-remove-bottom">Date:</h6> <h5 class="uk-margin-remove-top"><span class="date">{{page.date | date: "%b %d, %Y "}}</span></h5>
{{content}}
</div>
{% include post-pagination.html %}
</div>
</div>
</div>
</div>
{% include totop.html %}
</div>
Once complete run this command in your cli to test your site:
bundle exec jekyll serveIf all looks good then you can publish and make some decisions on how youre going to create and edit files.
Using forestry.io
I have found that forestry.io is an interesting free way of adding content management. Just sync it up by adding your front matter to its backend and then you can edit and create pages like a regular cms.
