Gatsby-theme-novela: [Feature] Front matter boolean for disabling hero image per post page

Created on 9 Aug 2019  路  18Comments  路  Source: narative/gatsby-theme-novela

It would be nice if we could optionally turn off the hero per page. E.g.

hero: ./images/hero.jpg
renderPostHero: false

Should probably be true by default and when unspecified.

All 18 comments

Yes, will think about this one. We can't disable images on the home page as it's not designed that way yet, but on the article page it might be a good idea.

You're not the first to request this so we'll investigate it today.

Nice and that's exactly what I mean... display the hero on the home page (as that looks nice) but disable per article (but only if explicitly disabled using front matter).

Would love a PR for this one. The design is very geared to including the image so ill consider this out of scope of what we'll do for now. Use nice hero images you'd want to display :D

I'm having a bit of a hard time figuring out how to set up the theme for PR. How do you folks do this? I was hoping to clone the theme, run it locally so I can see the changes while programming and when done.. just commit changes and push.

I will add some documentation once I figure this out.

Hit Fork
now you have your own copy
clone that locally and run yarn install
www is where you'll edit your "site"
@narative/gatsby-theme-novela is where you'll configure the theme
commit and push what you've changed
go to your forked Github repo and there should be a message saying create a pull request
if not, come back to this repo and see if the message is there.

Wow, I think this has been too long a day. It does work exactly as I expected.
Here's what I am doing:

git clone [email protected]:bravo-kernel/gatsby-theme-novela.git
cd gatsby-theme-novela
yarn workspace www install
yarn dev
  • This starts the www site as expected at localhost:8000
  • I now make a change in file @narative/gatsby-theme-novela/
  • Change in src is live reload in the www site as expected

Cool stuff this Gatsby, sorry for the noise. I will pick up on this tomorrow.

No problem, thanks for all the help.
I'm having a long day today as well 馃槄

@bravo-kernel I think https://github.com/narative/gatsby-theme-novela/pull/62 solves this as well.

an image will always be required with the design of this version of Novela and I think allowing authoring without an image is a great compromise. Let me know if you had something else in mind.

@brotzky I was just about to test this when I noticed yarn dev doesn't start anymore, looks to be caused by Contentful. I tried disabling the plugin by changing to false like shown below but same result.

Please do point me in right direction if I am misinterpreting stuff again, I thought Contentful was optional.

        sources: {
          local: true,
          contentful: false
        },

What was the error? are you on 0.3.1?

It should work without explicitly setting those values.

I made a local change that adds this functionality. There were only two things that I could not figure out:

  • the Aside progressbar calculations
  • the css (it now just displays an empty block)

I will probably have to dig in to React a little deeper this weekend but it looks very doable to me. IMHO you will have a clear winner once this feature lands as it would make the theme suitable to most use-cases. If needed I can PR anyway, perhaps with some pointers I will be able to get it right.

PR is appreciated, even to share the initial ideas.

I do have a fairly solid idea in my head how to accomplish this one if you didn't want to put up a Draft PR. No worries :)

@brotzky apologies for the late reply, I had to push out a new library which took more time than I expected.

In all honesty, my PR would only show a frontmatter similar to 'secret' but would not solve anything related to A-Side and CSS (since I am no Gatsby/React pro yet). How about this? You implement this feature and I start work on #52, should be do-able today.

Also some more background information on this request. The migration script for my current blog aims to produce the following:

without-image-render-on-post

Applied to all articles matching a certain "Category" with end-result:

  • the same generic category-image used for all posts matching the category
  • this category-image makes the posts easily identifiable as a group on the landing page
  • when opening the post we do not show the category-image (no added value) but jump straight into the content (mostly tutorials)

with-image-render-on-post

This would apply to all non-categorized/unique posts:

  • unique image per post
  • for example my 'Perfect Cosmopolitan' post
  • this would show an image of the cocktail on both landing and the article page (as it is unique for that post and adds value)

Hope this makes sense.

Im going to stand that we keep images on post pages for now. I dont want to ruin the integrity of the design and there's already an image required for the aritcles list.

Ahh, disappointed to hear that but you probably have good reasons. Out of curiosity.. was it the complexity of the change?

Want to avoid going too far from core design.

ok, fair enough

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bravo-kernel picture bravo-kernel  路  4Comments

KrisBraun picture KrisBraun  路  4Comments

slorber picture slorber  路  3Comments

dgovil picture dgovil  路  3Comments

mwood23 picture mwood23  路  4Comments