Ghost + Gatsby Cover Image and favicon not appearing

[redstern]

If you’re looking for some help, it’s important to provide as much context as possible so that people are able to assist you. Try to always mention:

• What’s your URL? This is the easiest way for others to debug your issue redstern.com
• What version of Ghost are you using? 2.20
• What configuration? Gatsby+Netlify+Headless Ghost
• What browser? Chrome
• What errors or information do you see in the console?
• What steps could someone else take to reproduce the issue you’re having?

After setting up gatsby and ghost per the directions…the cover set image on my ghost admin domain does not appear in the gatsby site. In fact no photo shows up.

I’m completely new to react/front-end so I’m assuming it’s a config somewhere that I need to set.

[Aileen]

Hey @redstern

Does this error still occur? I’m seeing the favicon and also a cover image

[redstern]

I have a custom favicon (not the ghost) that I set up in admin. It doesn’t update. I don’t see it in the layout of the starter repo.

Similarly the cover_image is not in the default gatsby ghost repository.
I’ve started work to update the container to have a background image. But I’m not a react dev, so it’s trial and error. The cover image, is the beginning of my updates to the starter repo. I updated src/components/common/Layout.js to:

{ isHome ?
    <div className="site-banner" >
        {site.cover_image ?
            <img className="site-cover" 
                 src={site.cover_image} 
                 alt={site.title} 
            />
            : <Img fixed={data.file.childImageSharp.fixed} alt={site.title} />
        }
        <h1 className="site-banner-title">{site.title}</h1>
        <p className="site-banner-desc">{site.description}</p>
    </div> :
    null
}

Is there any way to make it a background image to the container like below (from ghost.redstern.com)?

Happy to contribute a tutorial back for others in my shoes

Thanks for your help

[Aileen]

@redstern

I have a custom favicon (not the ghost) that I set up in admin. It doesn’t update. I don’t see it in the layout of the starter repo.

You can reference the site.icon from your Ghost installation. However, there is a limitation at the moment which doesn’t allow this icon to be used for other plugins. There’s an open issue here, that describes the problem more in-depth. For now, I recommend to copy the favicon from your Ghost installation and replace it with the one in Gatsby.

@redstern

Is there any way to make it a background image to the container like below (from ghost.redstern.com)?

This should be done with CSS in your starter repository. I recommend checking out which styles are applied in the Casper theme and then adapting them in your Gatsby code.

[redstern]

I can copy over the favicon. That’s no problem.

So you are saying that I can’t add a cover image in my ghost admin instance and have it move automatically to gatsby, without basically creating my own new theme?

I have been trying to do just that for 3 days. It’s a steep learning curve.

Are there any --even rough drafts – of how to place the site.cover_image into the header on the gatbsy theme? It seems like it would be straight forward. I have seen examples of it working for others, but mine doesn’t work.

1. I tried to use the background-image: url({{img_url background size='xl'}});
2. I tried adding it and adding inline absolute (image) & relative (container) It just moves everything around
3. I tried adding the image to the site-banner (it makes the container huge)
4. I tried adding the css from the Casper theme --and now netlify won’t compile

Here’s and example of how I want my image to look:
https://stenbeck.io

I’m happy to contribute back whatever I build and create tutorials, but I really need help getting this going.

Thanks!

[Aileen]

@redstern

So you are saying that I can’t add a cover image in my ghost admin instance and have it move automatically to gatsby, without basically creating my own new theme?

This is absolutely not what I’m saying. What I said was this:

@Aileen

This should be done with CSS in your starter repository. I recommend checking out which styles are applied in the Casper theme and then adapting them in your Gatsby code.

Your code example was correct - excepts that you put it already in a container that has a limited width, so it can’t be full width - and when I checked your site the first time, I was able to see the cover_image. It was just lacking some CSS styling. You can’t just copy the Casper styles as Casper is using CSS with pre-processors, but the CSS in Casper should give you the idea of what you need to change in Gatsby to make it look similar.

To give you a starting point, don’t insert the image with an HTML tag, but rather as a CSS background image (which is exactly how it’s done in Casper).

First, create a variable to determine the styles (just under facebookUrl get declared in Layout.js:

const backgroundImage = site.cover_image ? { backgroundImage: 'url(${site.cover_image})', backgroundSize: 'cover' } : ''

Then, change the <header> tag to this:

<header className="site-head" style={backgroundImage}>

Just doing those changes, I was able to get a basic Casper-like cover image:

The {{img_url}} helper won’t work in Gatsby. You did it correct the first time, fetching it with site.cover_image from the GraphQL query result.

[redstern]

@Aileen

Thank you so much!
I will get the tutorial link to you tomorrow.