tryghost / massively

A free, open source theme for Ghost

Massively

This is Massively, a text-heavy, article-oriented design built around a huge background image and scroll effects powered by Scrollex. Originally created by @ajlkn for HTML5 UP and later ported to Ghost

Demo: https://massively.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.

massively's Issues

RSS link structure in Nav is outdated

Unless I'm mistaken, it seems that line 14 of /partials/navigation.hbs points to an incompatible URL structure for Feedly.

<nav id="nav">
    <ul class="links">
        {{#foreach navigation}}
        <li class="nav-{{slug}} {{#if current}}active{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
        {{/foreach}}
    </ul>
    <ul class="icons">
        {{#if @site.twitter}}
        <li><a href="{{twitter_url @site.twitter}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a></li>
        {{/if}}
        {{#if @site.facebook}}
        <li><a href="{{facebook_url @site.facebook}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a></li>
        {{/if}}
        <li><a href="**https://feedly.com/i/subscription/feed/{{@site.url}}/rss/**" class="icon fa-rss" target="_blank" rel="noopener"><span class="label" title="RSS">RSS</span></a></li>
    </ul>
</nav>

This gives the error Feed not found Wrong feed URL or dead feed on feedly.com

The URL (in bold) seems to need to be structured instead:
'https://feedly.com/i/**discover/sources/search/feed/{{@site.url}}**'

Massively 1.0.2 reports as 1.0.1 in the Ghost admin Design interface

SSIA

Install 1.0.2... Look in your Ghost admin interface and it lists it as version 1.0.1

CSS Classes Missing on Install - Many Alerts

I'm getting a lot of CSS alerts when I try to install on Ghost:

The .kg-width-full CSS class is required otherwise full width images will appear unstyled.Find out more about required theme changes for the Koenig editor here.

Header Image resize options

Howdy folks. It would be awesome if we could add the option to set a default Publication cover size for mobile. If you check out the website lakewoodestatestx.org on a web browser you get the big beautiful cover image but on a mobile device its totally overblown.

In fact, if I could use the publication logo instead, that would also work.

A Bunch of Errors on Ghost v3.0.0

Here are the errors produced from Ghost v3.0.0

The theme "massively - 1.0.1" was uploaded successfully but we detected some errors. You are still able to activate and use the theme but it is recommended to fix these errors before you do so.
Errors
Highly recommended to fix, functionality could be restricted

Replace {{error.code}} with {{error.statusCode}}
The usage of {{error.code}} is deprecated and should be replaced with {{error.statusCode}}.
When in error context, e. g. in the error.hbs template, replace {{code}} with {{statusCode}}.
Find more information about the error.hbs template here.

Affected files:
error.hbs: Please remove or replace {{error.code}} from this template
The .kg-bookmark-card CSS class is required to appear styled in your theme
The .kg-bookmark-container CSS class is required to appear styled in your theme
The .kg-bookmark-content CSS class is required to appear styled in your theme
The .kg-bookmark-title CSS class is required to appear styled in your theme
The .kg-bookmark-description CSS class is required to appear styled in your theme
The .kg-bookmark-metadata CSS class is required to appear styled in your theme
The .kg-bookmark-icon CSS class is required to appear styled in your theme
The .kg-bookmark-author CSS class is required to appear styled in your theme
The .kg-bookmark-publisher CSS class is required to appear styled in your theme
The .kg-bookmark-thumbnail CSS class is required to appear styled in your theme

Publication cover image hyper-zooms when browsing on widescreen display

I tested on the demo site as well - not sure if this has something to do with the new auto-resizing image feature in Ghost 2.x but there's a width at which the publication image zooms in and gets hyper pixelated. I'm running at 3440x1440 and when I stretch out past 480 wide the zoom looks terrible even with high resolution images. Otherwise, I friggin love this theme <3

Full width images are not always full-width for viewports > 1280px

It appears that when the original image size is not large enough, the max-width:100% on the image container has a negative effect on it:

The image needs to be stretched to the fill its outer container, just like it's working for smaller viewports.

Ghost 5.X theme compatibility

I ran Massively through the official Ghost version 5.X theme compatibility tester (https://gscan.ghost.org/) which had a score of 99/100 with two warnings. Overall great, but wanted to log the warnings here so they could eventually be addressed.

(Note: This assessment was done as of 2022-05-30 and may need to be re-evaluated again in the future as recommendations may have changed.)

Output from the tool:

Warning 1: Remove "engines.ghost-api" from package.json

The "ghost-api" version is no longer used and can be removed.
Find more information about the package.json file here.
Affected files: package.json:

Warning 2: "card_assets" will default to true in package.json

The "card_assets" property is enabled by default if not explicitly set.
Find more information about the card_assets property here.
Affected files: package.json:

Missing template rss.hbs when adding /rss to url

Adding /rss to the url results in error 400 with the message 'Missing template rss.hbs for route "/rss/".'

Can a rss.hbs be added to this template?

I added this one to my site and it works well, perhaps we can add it to the theme by default?

<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
	<channel>
		<title>
			<![CDATA[ {{@blog.title}} ]]>
		</title>
		<description>
			<![CDATA[ {{@blog.description}} ]]>
		</description>
		<link>{{@blog.url}}</link>
		<image>
			<url>{{@blog.url}}/favicon.png</url>
			<title>{{@blog.title}}</title>
			<link>{{@blog.url}}</link>
		</image>
		<lastBuildDate>{{date format="ddd, DD MMM YYYY HH:mm:ss ZZ"}}</lastBuildDate>
		<atom:link href="{{@blog.url}}" rel="self" type="application/rss+xml" />
		<ttl>60</ttl>

		{{#get "posts" limit="all"}}
		{{#foreach posts}}
		<item>
			<title>
				<![CDATA[ {{title}} ]]>
			</title>
			<description>
				<![CDATA[ {{excerpt}} ]]>
			</description>
			<link>{{url absolute="true"}}</link>
			<guid isPermaLink="false">{{id}}</guid>
			<category>
				<![CDATA[ {{primary_tag}} ]]>
			</category>
			<dc:creator>
				<![CDATA[ {{author.name}} ]]>
			</dc:creator>
			<pubDate>{{date format="ddd, DD MMM YYYY HH:mm:ss ZZ"}}</pubDate>
			<media:content url="{{feature_image}}" medium="image" />
			<content:encoded>
				<![CDATA[ {{content}} ]]>
			</content:encoded>
		</item>
		{{/foreach}}
		{{/get}}

	</channel>
</rss>

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.

Gscan reveals 11 compatability failures for Massively 1.0.2 and Ghost 3.0

o/ Just wanted to report the incompatibilities with Ghost 3.0. Hoping that they'll be addressed soon. Gscan output and ghost update show these errors and recommends against upgrading to 3.0 until they're fixed:

`ℹ Downloading and updating Ghost [skipped]

Checking theme compatibility for Ghost 3.0.0

⚠ Your theme has 11 errors

? View error and warning details? Yes

Errors
File: error.hbs
- Replace {{error.code}} with {{error.statusCode}}

File: styles
- The .kg-bookmark-card CSS class is required to appear styled in your theme
- The .kg-bookmark-container CSS class is required to appear styled in your theme
- The .kg-bookmark-content CSS class is required to appear styled in your theme
- The .kg-bookmark-title CSS class is required to appear styled in your theme
- The .kg-bookmark-description CSS class is required to appear styled in your theme
- The .kg-bookmark-metadata CSS class is required to appear styled in your theme
- The .kg-bookmark-icon CSS class is required to appear styled in your theme
- The .kg-bookmark-author CSS class is required to appear styled in your theme
- The .kg-bookmark-publisher CSS class is required to appear styled in your theme
- The .kg-bookmark-thumbnail CSS class is required to appear styled in your theme`

Subscribe feature not working

Thanks for this template - it's great.

I've just noticed on turning on the members feature in the labs section of Ghost that the bottom of the page subscribe feature doesn't seem to be appearing. I note in the code that it is meant to.

Repro: Upload the template to Ghost, turn on the members feature in labs and refresh the live site.

[feature suggestion] Search function

Thank you for the beautiful ghost theme.
It will be a great feature if you can add "search" in the theme.

Three glitches: icon, logo, image via markdown

Hello!

A) icon

The down-arrow is not loading

B) logo

Here the logo should load instead of the down-arrow.

C) image via markdown

Inserting an image via Koenig is good. But when I insert them via Markdown, they are not responsive.

Details about my setup

• Ghost Version: 2.9.1
• CLI version: 1.9.4
• Node Version: 10.14.1
• Browser: Chrome 71
• OS X: 10.13.6
• Server: Docker using this image
• Database: SQLite

How to print tags on page in this themes

Hi Team,

I am new to ghost and used this massively theme version 1.0.1. It is hosted on Ubuntu 18.04 VM. I want to do two things in this theme.

1. To print all tags in a page
2. to add share icon of linked on each blog post.

Let me know, how can I do this.

--
BR

Amit Bondwal

Post feature image is not served as https

When adding a post image these are served default as http, and thus will not show on modern browsers ("Parts of this web page is not secure, such as images")

How can I add auto-darkmode

Similar to how Casper can detect the macOS theme and match it?

Adding /rss results in error 400

Adding /rss to the url results in error 400 with the message 'Missing template rss.hbs for route "/rss/".'

Can a rss.hbs be added to this template?

404 page does not reflect the changes made to default.hbs

Hi, As I see, the 404 page does not reflect the changes previously made to default.hbs (like modifying the copyright information), and I can't figure out which template to modify then. Also, it would be nice to have such content at the same place so that I won't need to rewrite it twice in case of need for any update

Logo sometimes reappear

Hi there, this doesn't seem to happen on the demo, but when I scroll up and down to make the site logo appear, whether it's the default one with the box around the name or a custom picture.

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/deploy-theme.yml

• TryGhost/action-deploy-theme v1.6.6
• ubuntu 22.04

.github/workflows/test.yml

• actions/checkout v4

npm

package.json

• beeper 2.1.0
• gscan 4.43.0
• gulp 5.0.0
• 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

Demo pictures not loading

On the demo site (https://massively.ghost.io/elements/), the images don't load on the elements page.

They seem to have the wrong path setup. I looked in the code and couldn't find the page, so I assume it's in the ghost admin where the content is (custom html block?).

Anyway, all that needs to be done is add /assets/ before each of the image paths.

The original has it showing up correctly: https://html5up.net/uploads/demos/massively/elements.html

Long post/page scrolling causes header and menu to dissapear

Hi,

Using this theme in one of my blogs, and I have spotted this issue. On a long page (a lot of content to scroll through) or post, when you scroll back up the top, the header and the menu disappeared.
I have tried this on the demo as well, and yes it happens there too see this page: Massively Demo - Apps Integrations. Scroll down the bottom, then back up, the menu and header is gone as in screenshot below.

I am using: Google Chrome - Version 95.0.4638.54 (Official Build) (64-bit)

Add Native Search Feature

Since 5.x was released, it'll be very appreciated if you can add "Native Search" feature in this theme. Thanks

background is shaky while scrolling in firefox

using firefox 68.9.0esr makes problems with the background image, its most of the time shaking very much while scrolling down and up. Problem does not appear in google chrome.

No secondary menu

Hi, Ghost let's to configure a secondary menu but I don't see this in the theme. Is there any existing / recommended way to activate such a thing?

Full-width images are not responsive

When I insert full width images in posts on my site, they are not responsive at different browser sizes.

They look fine on desktop if the browser is open at full-width. But when changing the size of the browser there is a narrow line on the right hand side of any full-width image:

I've replicated this in the latest Chrome and Safari on Mac. I am also seeing the same thing when viewed on my iPhone X in Chrome.

An example post with full width images can be found here.

Odd behavior with Twitter Social Link

The twitter social link in the navigation bar doesn't appear to work correctly in the header navigation

If I supply only a facebook link, the facebook url works as expected.

If I supply only a twitter link, the twitter URL points to my website, not the supplied twitter url.

If I supply facebook and twitter urls, the facebook url is correct but the username from the facebook url is used as the twitter username (e.g. the twitter url would be twitter.com/ghost even though the twitter url I supplied is twitter.com/tryghost).

I seriously thought I was going nuts so I switched back to Casper and the problem stays with the theme.

Time for a new release?

Version 1.0.3 was released in 2020. Since then, numerous updates and improvement have been made to the repo to account for Ghost releases. I think a new release is warranted to signify the changes and provide a packaged download for users seeking to update their current install of Massively that broke with an update (like mine did).
For example, I just installed my 3rd iteration of the 1.0.3 release, but each install fixed an issue I was having with my blog.

Error editing something in _main.scss

First, thank you for your theme, I love it! I am not new to programming but I am to scss. Whenever I change something/anything in _main.scss it always results in the following message, even when I just edit a comment, same error:

D:\projects\riekusio\ghost\Theme>yarn dev
yarn run v1.22.10
warning [email protected]: The engine "ghost" appears to be invalid.
warning [email protected]: The engine "ghost-api" appears to be invalid.
$ gulp
[01:15:24] Using gulpfile D:\projects\riekusio\ghost\Theme\gulpfile.js
[01:15:24] Starting 'default'...
[01:15:24] Starting 'css'...
[01:15:24] Finished 'css' after 210 ms   
[01:15:24] Starting 'serve'...
[01:15:24] Finished 'serve' after 5.18 ms
[01:15:24] Starting 'cssWatcher'...      
[01:15:24] Starting 'hbsWatcher'...      
[01:15:28] Starting 'css'...
Error in plugin "sass"
Message:
    assets\main\sass\libs\_fixed-grid.scss
Error: Undefined operation: "8rem gt 0".
        on line 238 of assets/main/sass/libs/_fixed-grid.scss, in mixin `fixed-grid`
        from line 79 of assets/main/sass/layout/_main.scss
        from line 69 of assets/main/sass/main.scss
>>                                      @if ($gutters > 0) {
   ---------^

[01:15:28] 'css' errored after 114 ms
[01:15:28] Error in plugin "gulp-sass"
Message:
    assets\main\sass\libs\_fixed-grid.scss
Error: Undefined operation: "8rem gt 0".
        on line 238 of assets/main/sass/libs/_fixed-grid.scss, in mixin `fixed-grid`
        from line 79 of assets/main/sass/layout/_main.scss
        from line 69 of assets/main/sass/main.scss
>>                                      @if ($gutters > 0) {
   ---------^

Details:
    status: 1
    file: D:/projects/riekusio/ghost/Theme/assets/main/sass/libs/_fixed-grid.scss
    line: 238
    column: 10
    formatted: Error: Undefined operation: "8rem gt 0".
        on line 238 of assets/main/sass/libs/_fixed-grid.scss, in mixin `fixed-grid`
        from line 79 of assets/main/sass/layout/_main.scss
        from line 69 of assets/main/sass/main.scss
>>                                      @if ($gutters > 0) {
   ---------^

    messageFormatted: assets\main\sass\libs\_fixed-grid.scss
Error: Undefined operation: "8rem gt 0".
        on line 238 of assets/main/sass/libs/_fixed-grid.scss, in mixin `fixed-grid`
        from line 79 of assets/main/sass/layout/_main.scss
        from line 69 of assets/main/sass/main.scss
>>                                      @if ($gutters > 0) {
   ---------^

    messageOriginal: Undefined operation: "8rem gt 0".
    relativePath: assets\main\sass\libs\_fixed-grid.scss

My apologies if I am going about this totally in the wrong way, can someone push me in the right direction? Following the error leaves me nowhere.

Again, the error even appears when I just remove a character from your comment, but what I was trying to change was the margin of the date:

    > .post {
        @include padding((_size(padding) * 4), (_size(padding) * 4));

        header {
            &.major {
                > .date {
                    margin-top: -2rem;
                }