How I created my Moments page

As an alternative to social media, I created a moments page collecting my thoughts and inspiration.I previously built a version of this on WordPress, Automad, and then Kirby CMS. By far, Kirby CMS was the easiest once you get used to the templating and templates.

Here are the steps I took when creating the page:

1. Determine the categories you want to have included. I added quite a bit so I don't limit myself whenever I need to make a post. I also added the functionality to add custom categories.

2. Find an icon library if you would like to have icons for the category titles. I am using Phosphor Icons for my page.

3. Establish if you want to cross post from Kirby CMS to social media platforms or vice versa.

4. Tailor the backend to support your posting needs. When I create post options I optimize it for when I am on the go.

5. Refine and rework as needed. I am constantly tweaking things to make it easier and more efficient to post.

This is only a snapshot of steps you should take when creating your moments page. The more planning ahead of time, the easier and smoother it will be to implement.

The instructions are for creating a basic microblog for your Kirby CMS site. Additional functionality is up to you on how you want to extend it.

Create the blueprint

I think it is easier to start with the blueprint. As in its name, it allows you to organize and make refinements before creating your template. You may have planned to organize your content a certain way only to realize it makes more sense to do it another way.

My blueprint looks something like this:

title: Moment
num: date
icon: 🗒️
status:
...


I am using 2/3 and 1/3 columns. The 2/3 columns for the post content and the 1/3 column for the meta data and categorization.

Since I did not want to have to add the icons each time, I created a category field that allows me to select a category with the associated icon and then automatically add it in the template. Here is a complete list of icons what I am using for categories.

columns:
- width: 2/3
fields:
text:
type: blocks
- width 1/3
sections:
...
category


For the category section, I am using a dropdown referred as a Select in Kirby. You can change the name if you want to call it something else.

category:
label: Category
type: select
options:

For the options I am using a value which is the coding parts that will be displayed in the template. The text is the label you see in the drop down.

For example:

- value: <span class="ph-fill ph-trophy" style="font-size:24px;vertical-align:middle;"></span> Achievement
text: Achievement

You can style or customize how you want the icon to look in the span. You can remove the span if you do not want to use an icon or add it a different way.

Repeat this process until you added all of the categories you want.

Create the template

For my template, I am using a plugin for a custom category in the event that one does not fit exactly what I am looking for.

To add just the category without a custom category here is the basic code:

<?php foreach ($moments as $post): ?>
<!-- This adds the category from the blueprint above. -->
<?= $post->category() ?>
<!-- This is the text of the moment. -->
<?= $post->text()->toBlocks() ?>
<!--This is the date of the post. -->
<?= $post->date()->toDate('F j, Y') ?>
<?php endforeach ?>


I am also using the Komments plugin for handling comments. Adjust the code as necessary to reflect your website/blog.

Adding a custom category

If you want to add a custom category you will need to make a slight adjustment to your template and blueprint code.

In the blueprint, you will need to add the following code after installing the plugin.

customcategory:
label: Custom Category
type: icon
<!--where the icon folder is-->
folder:
<!--max number of icons-->
max:


This next part adds in the custom text after the icon. This allows you to call the category anything you want.

customcategorytext:
label: Custom Category Text
type: text


In the template file, modify the code to only use either the custom categories or the one with the pre-populated list.

<?php foreach ($moments as $post): ?>
<!-- This adds the category from the blueprint above. -->
<?php if($post->category()-?isEmpty()): ?>
<object data "<?='<FILE PATH TO ICONS>'> .$post->customcategory() ?>"
type="image/svg+xml" height="24" width="24" style="margin-right:5px;vertical-align:middle;" class="box-icon"></object> <?= $post->customcategorytext()?>
<?php else:?>
<?= $post->category() ?>
<?php endif ?>
<!-- This is the text of the moment. -->
<?= $post->text()->toBlocks() ?>
<!--This is the date of the post. -->
<?= $post->date()->toDate('F j, Y') ?>
<?php endforeach ?>

Comments