I am new to gatsby.js and working on some gatsby starter. Right I have this folder structure src/content/jobs/job1
where it has index.md
and a featured picture with it. The way I import this picture is through this query
jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter\_\_\_date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
name
pic {
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
}
}
html
}
}
}
so that I can get all of the posts of every job folder under the /jobs/ path. And inside src/content/jobs/job1/index.md
, it has this entry pic: './pic.jpg'
. This is very limiting, since if I wanted to include more pictures for this post, I need to create a pic2: './pic2.jpg'
entry inside the index.md
and modify the query at the same time to be
```
jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter\_\_\_date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
name
pic {
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
pic2 { <----- new query for the newly added picture
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
}
}
html
}
}
}
```
I been searching online looking for the solutions, and I came across this post: https://spectrum.chat/gatsby-js/general/gatsby-image-loop-through-and-display-them-dynamically-on-component-page~0d56c1bf-183b-494c-b61b-6957a2406192
However it doesn't address my problem since it targets a pre-defined folder as in
{
resolve: `gatsby-source-filesystem`,
options: {
name: `logos`,
path: `${__dirname}/images/logos`,
},
}
but in my case I havesrc/content/jobs/job1
,src/content/jobs/job2
,src/content/jobs/job3
or even maybe src/content/jobs/job4\
which I can add it later. this solution only works for one specific folder.