A slick personal blog theme for PyroCMS

Developing a reasonably OK theme can be time consuming and not everybody have the time. Especially when you have other things to take care of. So this is my gift to the PyroCMS community.

It is very suitable for a developer because it comes with built-in code snippets and various options for collecting images into galleries.

This blog uses this theme without any special modifications!

Installing PyroCMS and the Blog theme

Installing PyroCMS is quite easy. As it is a modern software, you need to have composer installed on your system. For a detailed list of requirements please consult the manual. Here are the basics:

composer create-project pyrocms/pyrocms <sitename>
cd <sitename>
php artisan install
composer remove anomaly/installer-module

While it is possible to use web installer (after composer) by browsing the sites URL, i recommend doing it in your terminal. Much quicker! Also you need to remove the installer module after you have completed the installation process. Next thing you have to do is to install the Blog theme and enable it in the admin/settings. Please make sure your sites email has been correctly set!

composer require keevitaja/blog-theme dev-master

If all went fine, you should be able to browse your site with a Blog theme enabled. If you want to modify it to your exact needs, you can download the theme and place it into the addons / <sitename> / keevitaja / blog-theme. In that case do not install the theme with composer.

General setup

Before you can start blogging, there are few things that need to be taken care of. First navigate to admin/pages module and change your home pages layout to blog. Also create a second page for the history layout. For both cases use the default page type that has been pre-installed.

I prefer markdown to wysiwyg editor. So i delete the content field and create a new one with the same slug but with a markdown fieldtype. Much cleaner way to write posts. This is just a personal preference.

For the navigation create a new menu with a slug header. Blog theme uses IcoMoon Free icon pack. To specify the icon for the menu link, use the links class field with a proper icon name.

In-Post snippets and images

To use the themes snippets and images feature, you need to configure the repeaters and fieldtypes. Slugs can be overwritten by publishing the themes configuration file.

Repeaters

In admin/repeaterscreate images and snippets repeaters. Next add fields code(editor), image(file), slug(slug), title(text) and assign title, slug, image to images and slug, code to snippets.

In admin/posts create fileds images and snippets using repeater fieldtype with corresponding repeaters.

Use only characters in slugs. There is something fishy going on in the repeaters or in my code. I'll try to resolve this soon.

Files module

In admin/files add field title and assign it to your images folders.

Using twig helpers

{{ snippet('snippetslug') }}

snippetslug is the snippets repeater slug field. For a shorter code, you can use the code syntax shorthand:

{{ images('default').post('first', 'second')|raw }}
{{ images('default').post('first', 'second').files(11, 2)|raw }}
{{ images('default').folders(5, 2).post('first', 'second')|raw }}

first and second are the images repeater slug field. Numbers are the id-s of file or a folder.

Images have several layout types:

  • single (1/1)
  • double (1/2)
  • default (1/3)
  • quater (1/4)

If all went well, you should have a pretty OK blog system at your disposal. Have fun!