Gatsby-remark-images is sporadically linking images - reactjs

I have a file structure like so:
src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)
I successfully created the blog pages through with a template. I cannot figure out how to make these images appear. I have included gatsby-remark-images and modified by gatsby-config.js to appear like this:
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blogImages`,
path: `${__dirname}/src/images/blog-images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blog`,
path: `${__dirname}/src/pages`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/Favicon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-sass`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200
}
}
]
}
},
Occasionally, the image will show up as I move it from the blog-images folder to images or the pages/blog folder. But then I try to adjust it or get a second image on the page working by moving it and it stops working. I undo what broke the image and it does not come back.
I've tried following this post and this one, but I'm not any closer to understanding what I'm doing wrong.

Moments after posting, I figured it out.
I was trying to reference the image via [alt](./filename.png) or [alt](./blog-images/filename.png). I ended up referencing it relative to the post, instead of any of my image-centric gatsby-source-filesystem configs.
What worked was [alt](../../images/blog-images/filename.png)

Related

Gatsby 3 "Path" argument must be of type string

I'm attempting to upgrade from Gatsby 2 to 3. I removed all dependencies from package.json and installed Gatsby. I'm currently trying to run gatsby develop, but I get the error:
'The "path" argument must be of type string. Received an instance of Object'
Any idea how to get around this? I'm not sure what all I need to share, but here's my gatsby-config.js.
// Gatsby-config.js
module.exports = {
siteMetadata,
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
[],
extensions: [`.mdx`, `.md`]
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Tyler's Blog`,
short_name: `TylersBlog`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `standalone`,
icon: `content/favicon.svg`,
},
},
],
}
Remove your package-lock.json and generate it again by npm install. Run a gatsby clean after that.
In addition, without knowing the siteMetadata object structure it's difficult to guess if there's something wrong there but maybe your need to:
// Gatsby-config.js
module.exports = {
siteMetadata.siteMetadata,
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`]
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Tyler's Blog`,
short_name: `TylersBlog`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `standalone`,
icon: `content/favicon.svg`,
},
},
],
}
I've also removed the empty options array.

Gatsby: GraphQL Cannot query field \"allMarkdownRemark\" on type \"Query\"

I'm new to Gatsby and attempting to build blog functionality. I have installed gatsby-source-filesystem, gatsby-transformer-remark, and gatsby-plugin-catch-links. I have blog posts within the pages directory, each blog post is within a folder inside pages. When I attempt to query the blog posts witin pages I can the following error:
Cannot query field \"allMarkdownRemark\" on type \"Query\"
Here's how my project is structured:
Here is my config file:
module.exports = {
siteMetadata: {
title: `Gatsby Crash Course`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `#gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`
},
},
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
My GraphQL query :
{
allMarkdownRemark {
edges {
node {
frontmatter {
path
title
date
author
}
}
}
}
}
How can I fix this error and get allMarkdownRemark to work properly and retrieve the blog posts from pages?

gatsby-remark-image-attributes not working

Has anyone used gatsby-remark-image-attributes? My image displays but the styling does not work.
"This plugin can handle already processed images (type: ‘html’), as long as the node object contains an attributes field and the value an tag." This is from the docs - not sure how to add an attributes field to the node which might be where I am messing up.
Here is my image inside a md file:
![01](/NarrativeExport/01_3L8A0607.jpg#margin-bottom=200px;)
Here is my config (I am using it like in the example on it's page on the Gatsby site with gatsby-remark-images):
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
quality: 100,
// wrapperStyle: 'margin-bottom:100px' **This also does not work for me
},
},
`remark-image-attributes`,
{
resolve: `gatsby-remark-image-attributes`,
options: {
styleAttributes: [`margin-bottom`],
},
}
],
},
},
`gatsby-transformer-sharp`,
Width gatsby-remark-image-attributes you also need to use remark-image-attributes plugin in your gatsby config for it to work
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
quality: 100,
},
},
`remark-image-attributes`,
{
resolve: "gatsby-remark-image-attributes",
options: {
styleAttributes: [`margin-bottom`],
},
}
],
},
},
`gatsby-transformer-sharp`,
Once you do that, your image margin-bottom attribute will be used like
![01](/NarrativeExport/01_3L8A0607.jpg#margin-bottom=200px;)

When I add gatsby-plugin-sass in gatsby-confis.js file

plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
already add the plugin but still error
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Nose Sass isn’t included with the plugin, so also try running:
npm install -S node-sass
Per: https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#install
That way for most changes you can easily upgrade or change versions of Node Sass, without needing to wait on a change from the Gatsby plugin maintainers.
Hope that helps!

Images breaking between localhost and Netlify using NetlifyCMS

OK, I'm pretty new to JAMstack, React, GatsbyJS, NetlifyCMS and Netlify, so do forgive me if this is simple.
I have a site running using React and GatsbyJS, and have NetlifyCMS running too to control the content. For the most part the site is running fine, however I keep running into an issue when it comes to images between the different environments.
When I add an image into the body section of any page through NetlifyCMS, I then pull the repo the image simply doesn't appear and is replaced with the broken image icon. However, it seems to work fine when on Netlify.
Occasionally, it appears, but after a push or a pull or restarting the Gatsby develop server, it just breaks again.
It only seems to happen when adding an image via NetlifyCMS into the body content so it appears in the main content of the markdown file; it is seemingly working fine when in frontmatter.
I've spent many hours on this it seems. I've got the full range of plugins installed, and I can't seem to find anyone else that is facing this issue.
All the other HTML seems to work fine but these images really don't want to.
gatsby-config.js
siteMetadata: {
title: 'Sheringham Shantymen',
description: 'The Shantymen travel widely throughout the UK and Ireland supporting Lifeboat Stations in their fundraising efforts and are always considering how they can help in others to raise funds by performing concerts.',
},
plugins: [
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
"gatsby-remark-copy-linked-files",
"gatsby-plugin-netlify-cms-paths",
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 1600,
},
}
],
},
},
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/gigs`,
name: 'gigs',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/discography`,
name: 'discography',
},
},
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
google: {
families: ['Source Sans Pro', 'Source Serif Pro']
}
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Sheringham Shantymen",
short_name: "Shantymen",
start_url: "/",
background_color: "#172957",
theme_color: "#FAC43E",
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: "standalone",
icon: "src/img/logo-badge.png", // This path is relative to the root of the site.
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
{
resolve:'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
}
Content.js component
import PropTypes from 'prop-types'
export const HTMLContent = ({ content, className }) => (
<div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)
const Content = ({ content, className }) => (
<div className={className}>{content}</div>
)
Content.propTypes = {
content: PropTypes.node,
className: PropTypes.string,
}
HTMLContent.propTypes = Content.propTypes
export default Content
Called on the page template:
<PageContent className="content" content={content} />
I expect to add an image into the body of markdown, for Gatsby to process the image and output it as a processed/blur up loading image, and for this to work consistently across all servers (localhost and Netlify).
Instead, when it outputs initially (sometimes) it's a huge image, breaking out of containers, then following a server restart or similar the image simply breaks.
Turns out this was a small bug in the version of Netlify CMS I was running - I updated from 2.6.1 to 2.8.0 and this has fixed the issue (as of 2.7.0).

Resources