How can I use bootstrap grid mapping an array of images? - wordpress

Question

I'm building a portfolio website with gatsby.js. All photos are posted in wordpress, fetched by graphQL and rendered to the website.
I'm trying to use bootstrap grid to organize the photos and make it responsive, but because graphQL return an array with all images fetched from wordpress posts, I can't set a div with class='row' as I'm using array.map. And I don't know how to solve it.
From graphQL i'm setting resolution to width=300px and height=300px.
That's the only way I found to organize sizes, as long as I can't use class row and all images are considered in one row. The problem is that the photo size is not responsive, so it will always be 300X300...
I'd like a way to make it a grid system as it's suppose to work... So when I resize the window, all photos are organized and resized.
const IndexPage = () => {
const data = useStaticQuery(graphql`
query {
allWordpressPost {
edges {
node {
title
featured_media {
localFile {
childImageSharp {
resolutions(width: 300, height: 300) {
src
width
height
}
}
}
}
}
}
}
}
`);
const imagesResolutions = data.allWordpressPost.edges.map(
(edge) => edge.node.featured_media.localFile.childImageSharp.resolutions
);
return (
<Layout>
<Jumbotron />
<div className="container">
<h1 className="my-5 text-center">Portfolio</h1>
{imagesResolutions.map((imageRes) => (
<Img className="col-sm-6 col-lg-4 img-rounded img" resolutions={imageRes} key={imageRes.src} />
))}
</div>
</Layout>
);
};

Answer 1

If you split your data.allWordpressPost.edges array into a chunked array, you can loop through the outer array to render rows, and each of the inner arrays to render cols.
For a 3 column bootstrap grid, you want to pass in a size value of 3 (it's the 2nd param of lodash.chunk in this example). This ensures the length of each chunk is 3.
Here is a simple example ignoring the use of graphql, childImageSharp, and gatsby-image.
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import arrayChunk from 'lodash.chunk';
import 'bootstrap/dist/css/bootstrap.min.css';
const IndexPage = () => {
const rawData = [1, 2, 3, 4, 5, 6];
const chunkedData = arrayChunk(rawData, 3)
return (
<div>
<div className="container">
{chunkedData.map((row, rowIndex) => {
return (<div key={rowIndex} className="row">{
row.map((col, colIndex) => {return (<div key={colIndex} className="col-sm">{col}</div>)})
}</div>)
}
)}
</div>
</div>
);
};
ReactDOM.render(<IndexPage />, document.getElementById('root'));
stackblitz