tryghost / editorial

A free, open source theme for Ghost

Editorial

This is Editorial, a news-oriented design built around a dynamic 'locking' sidebar (try the toggle to see it in action!) and purpose built for content-centric sites. Originally created by @ajlkn for HTML5 UP and later ported to Ghost

Demo: https://editorial.ghost.io

 

 

First time using a Ghost theme?

Ghost uses a simple templating language called Handlebars for its themes.

We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full theme API documentation which explains every possible Handlebars helper and template.

The main files are:

• default.hbs - The main template file
• index.hbs - Used for the home page
• post.hbs - Used for individual posts
• page.hbs - Used for individual pages
• tag.hbs - Used for tag archives
• author.hbs - Used for author archives

One neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:

• page-about.hbs - Custom template for the /about/ page
• tag-news.hbs - Custom template for /tag/news/ archive
• author-ali.hbs - Custom template for /author/ali/ archive

Development

This implementation tries to stay as true as possible to the original template without making too many modifications. The original code is unmodified, preserving the ability to update it later.

There are two main changes compared to the original template files:

• The original template contained separate /assets and /images directories. Ghost Themes require that all assets be nested under a top-level /assets directory, so these are moved to /assets/main and /assets/images, respectively.
• In order to make minor modifications and add some new custom styles, one additional SaSS file is added under /assets/main/sass/layout/ghost.sass and included at the bottom of the main.sass file.

To work on styles in this theme, you'll need to run a local development environment to build/watch for changes. Once cloned and installed with npm/yarn, the following gulp build tasks are available:

# Build files locally and watch for changes
gulp

# Build production zip locally and save to /dist
gulp zip

# Run compatibility test against latest version of Ghost
yarn test

Original template files and design by @ajlkn

Copyright & License

Copyright (c) 2013-2022 HTML5 UP & Ghost Foundation - This theme is licensed under both the MIT and Creative Commons Attribution 3.0. Please note that the terms of the Creative Commons license require that you maintain the footer attribution to freely use this theme.

editorial's Issues

Different Color Themes

Hello!

New to ghost and editorial, so I may not exactly know, but is there a way to change the color scheme to something else? I was looking for a dark color scale instead. Would love an variation that does this.

Thank you!

Your licenses seem to be contraditory

The MIT license and the Creative Commons Attribution 3.0 license seem to have conflicting statements that makes it difficult for me to understand if I need to follow both licenses or if your intention was to allow me to choose which license to follow.

Subsctiption button

Subscription button wrong placed.

Doesn't Work on Gulp v4

I had to downgrade my version of gulp to 3.9.1 by going npm install [email protected] --save just in case anyone else has the same issue

Embed content is not responsive

Embed content is not being responsive, I'm using Flickr and the image stays out of bounds, it doesn't reduce size when screen size is also small.

3 column recent posts

Hey there,

is it possible to simply change 2 column layout to a 3 column one? I was playing with some vars in _posts.scss like width: calc(#{(100% / 3)} - #{$gutter}); and $gutter: (_size(gutter) * 2); but no luck. The layout still have 2 columns:

Can you please point me how to achieve it? Thank you. ✌

Content is wider than screen on mobile devices

content is wider than screen on screen width less than 737 px

posts_per_page doesn't work

I use another theme London，I set posts_per_page 6, but it doesn't work.
Can you help me ?

Make post text bigger

I'm new to the code and developer world. The editorial paragraph text on posts and pages is very small. How would I go about making the font bigger? There are areas where the text is triggering warnings due to how small it is.

Excerpt : uppercase by default

Hi,

When opening a post, the "excerpt field" is displayed in uppercase by default and it's not possible to change this setting.

Line 1392
https://github.com/TryGhost/Editorial/blob/master/assets/main/css/main.css

Actual

header p {
 font-family:"Roboto Slab",serif;
 font-size:1em;
 font-weight:400;
 font-style:italic;
 letter-spacing:.075em;
 margin-top:-0.5em;
 text-transform:uppercase;
}

Fixed

header p {
 font-family:"Roboto Slab",serif;
 font-size:1em;
 font-weight:400;
 font-style:italic;
 letter-spacing:.075em;
 margin-top:-0.5em;
 text-transform:none;
}

Control over post image

Love the theme but would like control over the post image. I'd like an option to display it in the post or not, and when it is displayed, an option for if it to be resized. Currently, if you have a small post image eg. 512x512, it blows it up to a pixelated mess.

Keep up the great work

Dark mode

Is there any intention to add a dark mode to this theme?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

error when activating the theme

screenshot explains all:

Localisation

If I am not mistaken this theme does not actually support translations. With some minor modifications to the code you could add a "locales" folder and support multiple languages (such as Italian, French, German, ...)

All is needed is to change some passages, such as for example:

<h3 class="subscribe-form-title">Subscribe to ...</h3>

with this special marker:

<h3 class="subscribe-form-title">{{t "Subscribe to"}} ...</h3>

Then, all is needed is to create a "locales" folder and put a json file for each translation. For example:

{
    "Subscribe to":  "Iscriviti a",
    "Back": "Indietro",
    "Newer Posts": "Nuovi Articoli",
    "of": "di",
    "Older Posts": "Vecchi Articoli",
    "Page": "Pagina",
}

I don't want to touch any sentence, I just want to wrap them in a marker and create an Italian translation. Then, anyone else will be able to join in and add a new language by just creating a new JSON file in the same way.

My question is: If I'll work on that, would you accept a pull request ?

Hamburger Menu has "Toogle" in the background.

Can be seen on demo site also. https://editorial.ghost.io/

Main content slides around on tablet

When the menu on the left is collapsed, all is fine. When the menu is extended (default), the main content area slides all around and isn’t locked down. Please fix.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Lock file maintenance

Detected dependencies

github-actions

.github/workflows/test.yml

• actions/checkout v4

npm

package.json

• beeper 2.1.0
• gscan 4.42.0
• gulp 4.0.2
• gulp-livereload 4.0.2
• gulp-sass 5.1.0
• gulp-sourcemaps 3.0.0
• gulp-watch 5.0.1
• gulp-zip 6.0.0
• node-sass 9.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Time header in post.hbs shows only D instead of the number of the date

I think the problem is
In post.hbs, in header class, line 10, you write the date format in MMMM D, YYYY which will shows up only D instead of the date it was posted

Here’s a video showing the horizontal sliding problem

Shot with an iPhone 8 Plus, but the same thing happens on an iPad.

https://youtu.be/0nJCpzW9uEQ

Theme update has broken featured page

Hi,

I updated from the mid-2020 Editorial theme for Ghost to the current version. Wonderfully, it fixed a few things that hadn't looked too good following an upgrade of Ghost itself from 4 to 5, but there's just one problem.

On uploading the new version of the theme, the single featured page is no longer featured. It should look exactly like the Editorial theme demo site, but instead of the featured page at the top, the first content is Recent Posts. See https://generative-identity.org/

Any and all ideas most welcome! Thanks in advance.

No support for the new "members only" section and "subscribe"

Currently, Casper has a subscribe button on every page, but with your theme there is no Subscribe button.

"Unexpected Field" error when attempting to upload to ghost

Using ghost:2.16.1-alpine docker image.