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.
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.
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
template). In both cases masonry layout is used.
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 file
home.hbs- Used for the home page
post.hbs- Used for individual posts
page.hbs- Used for individual pages
post-card.hbs- A partial used to render the gallery ‘thumbs’
page-about.hbs- Used for the About Page
page-browse.hbs- A main post feed page.
tag.hbs- Used for tag archives
gallery.hbs- Use for the Gallery
author.hbs- Used for author archives
routes.yml- custom routing
$ yarn install $ yarn dev
Now you can edit
/assets/css/ files, which will be compiled to
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.