Questions tagged [gatsby-image]

Questions related to the gatsby-image plugin. https://www.gatsbyjs.org/packages/gatsby-image/

292 questions
0
votes
1 answer

gatsby-image map multiple queries

I have the components below. For the images I would like to use gatsby-image and art-directing multiple images. The example at gatsby-image work with single images but how can I apply this to my components with multiple images? Child…
noxsta
  • 111
  • 1
  • 4
0
votes
2 answers

Passing Gatsby Image As Prop

I'm trying to learn Gatsby by building a demo blog. I have an Archive component, where I'm querying blog data, and I'm trying to pass the Image down as a prop, however, when im trying to access the prop within my Article component, I keep getting a…
juicy j
  • 183
  • 5
  • 20
0
votes
2 answers

How to sort graphql query by a number in a string?

I'm making a photo gallery/lightbox and am using graphql to manage the pictures. I have 10 photos in a folder: "1- Picture.png", "2- Picture of other thing.png", "3-...", ..., "10- My last picture.png" I'm using the following snippet to sort in…
nicholas
  • 180
  • 2
  • 9
-1
votes
0 answers

Just images and GatsbyImageSharpFluid_withWebp error

I am trying to load in multiple images with gatsby and I have two issues. Issue #1 My query is here: export const query = graphql` query announcementsPage { allFile { nodes { relativePath …
tcoulson
  • 602
  • 3
  • 10
  • 37
-1
votes
1 answer

gatsby-remark-images-remote make the build fail, how to troubleshoot the root cause?

My gatsby site https://jeff-tian.jiwai.win/ (Source code: https://github.com/Jeff-Tian/space/) uses gatsby js. It contains thousands of markdown blog posts and the building used to be smooth before I made the following change. The images in the…
Jeff Tian
  • 5,210
  • 3
  • 51
  • 71
-1
votes
1 answer

Can we crop square images into 16x9 with Gatsby Image?

Is it possible to crop an image with Gatsby to turn it into 16x9 and start from the center out? My original response it is that it is not but I want to double check before venturing to other options. I couldn't find information about this process in…
Helmut Granda
  • 4,565
  • 7
  • 35
  • 51
-1
votes
1 answer

Failed Prop Type in Gatsby Image

I wanted to inquire about something. I am trying to display staff images, bio, etc. My query is like so: const data = useStaticQuery(graphql` query { allContentfulStaff { edges { node { staffBio { staffBio …
Kelsey
  • 33
  • 3
-1
votes
1 answer

Retrieving images from Contentful -Not seeing child image sharp in graphql playground

I am still new to Gatsby and Graphql and am trying to go through tutorials of using gatsby-transformer-sharp, gatsby-plugin-sharp, and gatsby-plugin-image to retrieve images from Contentful using graphql and map over those images. In all of the…
Kelsey
  • 33
  • 3
-1
votes
2 answers

Rendering Contentful data into Gatsby page but getting an error

I'm trying to load an about page from Contentful with gatsby, but I'm running into an error when loading the image data, stating: data.allContentfulAbout is undefined Could someone correct my code to have both the image load and then the raw text…
-1
votes
1 answer

Gatsby Contentful Query Cannot Query fluid image?

I'm trying to set up a component of my portfolio that lists all my projects next to a fluid image (gif) of them working. I made this page before in gatsby v2 using this exact code. However, graphql playground is saying that it's unable to query…
kenton
  • 11
  • 4
-1
votes
1 answer

Gatsby localized image using i18next

I have set up i18n using gatsby-plugin-react-i18next plugin. All the contents work great but I also need to localize some static images but can't figure out how to get this working. I have tried passing image prop on GatsbyImage but this is not…
Saqueib
  • 3,484
  • 3
  • 33
  • 56
-1
votes
1 answer

Gatsby - Using Dynamic Images Inside a Component

I have a component that works as a collapsible ui element where an image is loaded when opened. These collapsible elements are part of a list, and I need the image to be a variable since it's different on each list item. I understand that I need to…
-1
votes
1 answer

Gatsby Image Path to og:image for SEO

I'm using markdown pages to generate my pages on Gatsby. I'm defining the image path inside the .md file. --- slug: "/blog/my-blog-post" date: "2022-01-11" title: "My title" image:…
fobus
  • 1,938
  • 8
  • 29
  • 48
-1
votes
1 answer

gatsby : optimize images that do not have 'childImageSharp' graphql field

I am using gatsby with a wordpress CMS to display upcoming events on my gatsby web app .I am using the plugin gatsby-source-tribe-events to connect to the wordpress event calendar plugin and get the event data. The problem is that I want to…
vasilis 123
  • 585
  • 1
  • 12
  • 26
-1
votes
1 answer

How do i manage ever increasing number of images in gatsby

I am trying to build a website that has around 13 images for just the background and socials but even more images on just 1 page. they are 30 images on just one page. how do i manage more images using Gatsby statically because background images…
1 2 3
19
20