I'm building portfolio site with Gatsby+Wordpress combination. If I run this setup locally or at Github pages everything seems to look normal when using desktop/laptop. If I visit site which is published to Github pages and view with mobile device images aren't showing at all.
I found this solution and added it to my gatsby-node.js like this:
const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)
// This is the solution I found but it's not working in my case
// ----------
if (process.env.NODE_ENV === "development") {
process.env.GATSBY_WEBPACK_PUBLICPATH = "/"
}
// ----------
exports.createPages = ({ graphql, actions }) => {
...
I didn't found any other solutions and it seems that I can't solve it by myself.
Link to site
Link to repo
Hopefully I provided enough information so you can catch the idea, if not ask and I tell more. Thanks in advance!
I got this working by changing the way I query images. At first I used for example this:
query {
wordpressWpPortfolio {
acf {
portfolio_gallery {
source_url
}...
This produced wrong kind of URLs for images. Images pointed to my localhost instead of folder inside my repo.
I changed query method to this:
query {
wordpressWpPortfolio {
acf {
portfolio_gallery {
localFile {
childImageSharp {
fluid(maxWidth: 500, quality: 100) {
src
srcSet
aspectRatio
sizes
base64
}...
This query for gatsby-image had to be done manually because gatsby-config.js doesn't support fragments like:
fixed(width: 300, height: 300) {
...GatsbyImageSharpFixed
}
This line in your gatsby config looks to be the issue: baseUrl: "localhost:8888/robertsalmi.fi",
I suspect the wordpress plugin uses that to prefix all the images, as your live site is showing them all with that base url. You'll need to provide the correct base, so it can build the image links properly.
Related
I am building a basic site with Gatsby and have connected it to Contentful. I uploaded 2 assets to Contentful:
First asset looks like:
The second asset is 100% identical other than the title which is test-two.
If I use the about query and pass in the URL into an img tag, my image will display. However, I am trying to use GatsbyImage and can't seem to figure out the problem.
I've been trying to follow this tutorial and using but I am unable to get anything to render. How does my query need to change in order to use gatsby-image?
In this case, you are querying for the url, filename and contentType. To be able to use GatsbyImage you need to query the node created from Gatsby (which is gatsbyImageData) it should be contained in the name of the Contentful asset node. Something like:
{
allContentfulAsset {
edges {
node {
test {
title
gatsbyImageData(layout: CONSTRAINED)
}
}
}
}
}
Check for the created nodes in the GraphiQL playground (localhost:8000/___graphql).
Once done, in your component, you should be able to do something like:
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function SomePage({ data }) {
const image = getImage(data.allContentfulAsset.test)
return (
<section>
<GatsbyImage image={image} alt={`Some alt text`} />
</section>
)
}
export const pageQuery = graphql`
query {
allContentfulAsset {
edges {
node {
test {
title
gatsbyImageData(layout: CONSTRAINED)
}
}
}
}
}
`
If the node doesn't appear, check your configurations in the gatsby-config.js file.
⚠️ Disclaimer
Watch out, the tutorial you are trying to use is using gatsby-image (from Gatsby v2 backward), where the rendered component is Img, imported from gatsby-image while you are using GatsbyImage (from Gatsby v3 onwards), imported from gatsby-plugin-image. The first one is deprecated and the query structure is slightly different. As you can see at the top of the guide you shared:
The gatsby-image package is now deprecated. The new Gatsby image
plugin has better performance, cool new features and a simpler
API. See the migration guide to learn how to upgrade.
I have a doubt with nextjs..
I'm building my site like this
pages
[slug]
index.jsx
index.jsx
so in my slug/index I'm doing this
export async function getStaticPaths() {
const resProducts = await fetch(`${process.env.PRIVATE_ENDPOINT}/products`);
const products = await resProducts.json();
const paths = products.data.map((p) => ({
params: {
slugProduct: p.slug,
},
}));
return {
// this should be dynamic
paths,
fallback: true,
};
}
My question is what happend if I add a new product in my back office?
Do I have to rebuild with next build?
My question is what happend if I add a new product in my back office?
Do I have to rebuild with next build?
The short answer is NO. If the requested page have not been genereted at build time, Next.js will serve a "fallback" version of the page and will statically generate the requested path HTML and JSON on the background. When the statically generation completed, the browser receives the JSON for the generated path. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time.
Don't forget to use router.isFallback to detect that request is on fallback.
You can see the good document here.
https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
So I am trying to display images with next/image's component. However, the images are not being displayed. I believe this is because of a 400 bad request error next/image is giving me.
When I click on that URL, it says "The requested resource isn't a valid image" which is strange because after retrieving the image url from the backend, I AM able to download the image to see that it is a valid image, so this error is happening right after the image link is passed in the props of the component. Basically, my requests are correct, but next/image's interaction with the image url is being messed up. What's weird is that I also did not have this error a few days ago, and after not changing anything, I'm seeing this error.
I've configured the next.js config file like this, and the request to the backend does retrieve a downloadable image (next/image is just not displaying it correctly).
Here is my config file for next.js:
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const nextConfig = {
images: {
domains: [
'url.s3.amazonaws.com',
'url.s3.amazonaws.com',
'url.s3.amazonaws.com',
],
},
};
module.exports = withPlugins([[withImages]], nextConfig);
I'm late for the topic, but hope my answer will help someone else.
Adding the domain's config into the next.config.js is not enough (only work for local):
module.exports = {
...
images: {
domains: ['firebasestorage.googleapis.com'],
}
}
For production, you need to make sure that your "next" instance grabs that config.
So in my case, what I did to make it work is:
Before
const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir
}
});
After
const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir,
images: {
domains: ['firebasestorage.googleapis.com'],
}
}
});
This issue is due to next.js version 11. The issue has been fixed with the next#11.0.2-canary.4 version. You can update the version. The problem will be solved.
Using loader function solves the issue. Don't know why. But updating the version is the best option.
<Image
loader={()=>user.coverImage}
src={user.coverImage}
alt="user cover image"
layout="fill"
objectFit="cover"
/>
Did you update your nextjs version ?
it seems 10.1.X and newer have some problems...
https://github.com/vercel/next.js/issues/23523
I had to add a domain name including www prefix into next.config.js. E.g. both googlapis.com and www.googleapis.com.
I imported the image first.
import product_1 from '../public/src/assets/images/ecommerce/product_img_01.jpg'
and then imported
import Image from 'next/image'
and used it as so.
<Image src={product_1} />
and everything worked fine in next version 12.3.1
Run in console at proyect route: rm -rf .next/
Then run the server again and try
i am trying to develop a blog site for myself.and i decided to make it with gatsby and contentful. and i followed this tutorial
query code
query MyQuery {
allContentfulBlogPost {
edges {
node {
author {
name
}
createdAt
body {
body
}
title
featuredImage {
file {
url
}
}
}
}
}
}
output :
"message": "Cannot query field \"featuredImage\" on type \"ContentfulBlogPost\".",
why featuredImage does not appear in allContentfulBlogPost ? and how can i find it ?
my gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-image`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 740,
wrapperStyle: `margin-bottom: 2.2rem;`,
},
},
i already added gatsby-image and gatsby-remark-images but it didnt help.
if you have any idea about this topic please respond.
any response would be appreciated
Gatsby provides GraphQL to fetch data without remark.
import { graphql } from "gatsby"
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
contentfulBlog(slug: { eq: $slug }) {
blogTitle
blogImage {
fluid (maxWidth: 500) {
...GatsbyContentfulFluid_withWebp
}
title
resize {
src
width
height
}
}
}
}
`
As you can see the query, you can fetch images using fluid or fixed.
I fetched image using fluid and webp since webp image type is a perfect choice for Lighthouse score.
And use Img tag(not img) to display image.
<Img fluid={post.blogImage.fluid} alt={post.blogImage.title} />
https://www.gatsbyjs.org/packages/gatsby-image/
The issue comes from Contentful side, it breaks before reaching your Gatsby app (when gathering data) that's why your gatsby-remark-images doesn't fix it.
When dealing with images in Contentful you must upload a dummy image for your new schema (featuredImage). Just an image to be retrieved with GraphQL query. Afterwards you can replace this image for your definitive content.
This is because internally, GraphQL schema is not able to infer the type of an image (it may happen with other fields too of other types) if you don't upload it at least once for your allContentfulBlogPost content model. It's a known bug that must be bypassed by this way until they fix it.
I'm new to Gatsby, and making my best to learn it (along with React, in which I have no prior knowledge either). I'd like to create a single page getting data from one or several markdown files.
For now I'm testing it out with just Gatsby, in order to later reproduce that technique with Netlify CMS markdown files (and be able to update the page texts with Netlify CMS admin panel).
So far, I've managed to add markdown pages to Gatsby, thanks to this tutorial. But this method only creates dynamic pages, which is far more complex than what I need.
Is there a simple way to import one specific markdown file, let's say src/markdowns/hero-texts.md, in (let's also say) pages/index.js, and then call data with their frontmatter tags, in the cleanest way as possible?
I've tried countless researches on Google just to find which plugin or coding term would handle that, without success. I totally get some of the explanations above may be full of technical misunderstandings, sorry for that...
You have a markdown file called hero-texts.md and you want to be able to query its frontmatter content.
Install the plugins gatsby-transformer-remark and gatsby-source-filesystem and setup the gatsby-source-filesystem options to find your markdown files.
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `markdown`,
path: `${__dirname}/src/markdowns/`
}
},
`gatsby-transformer-remark`
]
}
You could make a graphql page query like this inside index.js (then the result of the query is automatically added to your index component under props.data)
// src/pages/index.js
import React from "react"
import { graphql } from "gatsby"
const IndexPage = ({data}) => {
return (
<>
<p>{data.markdownRemark.frontmatter.author}</p>
<p>{data.markdownRemark.frontmatter.date}</p>
<p>{data.markdownRemark.frontmatter.title}</p>
</>
)}
export default IndexPage
export const pageQuery = graphql`
query IndexPageQuery {
markdownRemark(fileAbsolutePath: { regex: "/hero-texts.md/" }) {
frontmatter {
author
date
title
}
}
}
`
It will perform the graphql query at build time, and add the result of the query to the data prop of the IndexPage page component.
So in effect, pulling in all the frontmatter fields from a markdown file that looked like this.
// src/markdowns/hero-texts.md
---
title: "Gatsby + Markdown: How to simply get data from a specific markdown in a single page?"
author: Florent Despinoy
date: 2019-08-06
---
# This is my markdown post
The content of this markdown file would not be queried by pageQuery (only the frontmatter would)