Elphin
A custom, photo-centric, theme for Ghost. Released free of charge under MIT license.
Based on the London theme by the Ghost folk, but with heavy emphais on the images rather than image rich text. (WIP)
I had a bunch of specific requirements to start with:
-
Landing page without feed with a background image, easily editable through the site editor,
-
About page, with same background image as the landing page,
-
All other pages just solid themeable background,
-
Gallery page(s) with a masonry layout that preserves image ratio.
Ghost doesn’t directly facilitate all of this but I wanted to make it work without hacking Ghost itself, so a bit of lateral thinking was needed.
The default.hbs
template works around the fact that Ghost index page cannot
be one of the static pages. It uses the tile, contents, and feature image from a post tagged ‘#main`; this post must be among the 10 oldest posts on the site.
The page-about.hbs
template is used to render the About page (created normally
through the site Editor). Unlike the regular static pages, this page has the
same background as the landing page.
The image galleries are implemented as a tag archives; the main Gallery shows
images tagged with the ‘Gallery’ tag, the gallery.hbs
template which maximises
the screen real estate for the images (no title or descriptive blob). Other
galleries can simply be created using other tags (and will use the tag.hbs
template). In both cases masonry layout is used.
The page-browse.hbs
is a custom template for a browse page; it shows the
complete feed, plus a small menu with all public tags (aka galleries).
In order for things to work, you need to setup custom routing by uploading the routes.yml file to the ghost intallation.
I had to remove the swup script that London uses; it’s a nice idea, but it breaks Ghost theming rather badly (in ghost each page type gets assigned specific classes, e.g., .page-about for the about page, .tag for tags, etc.; when swup is used, when the pages changed, these styles don’t, which makes it impossible to create functional styling).
The main files are:
default.hbs
- The main template filehome.hbs
- Used for the home pagepost.hbs
- Used for individual postspage.hbs
- Used for individual pagespost-card.hbs
- A partial used to render the gallery ‘thumbs’page-about.hbs
- Used for the About Pagepage-browse.hbs
- A main post feed page.tag.hbs
- Used for tag archivesgallery.hbs
- Use for the Galleryauthor.hbs
- Used for author archivesroutes.yml
- custom routing
Development
As with the original London theme styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:
$ yarn install
$ yarn dev
Now you can edit /assets/css/
files, which will be compiled to /assets/built/
automatically.
The zip
Gulp task packages the theme files into dist/<theme-name>.zip
, which you can then upload to your site.
$ yarn zip
PostCSS Features Used
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
- Variables - Simple pure CSS variables
- Color Function
Copyright & License
Copyright (c) 2013-2019 Ghost Foundation Copyright (c) 2020 Tomas Frydrych Released under the MIT license.