如何使用引导网格映射图像数组?

时间:2019-05-15 12:32:12

标签: wordpress reactjs bootstrap-4 graphql gatsby

我正在用gatsby.js建立一个投资组合网站。所有照片都在wordpress中发布,由graphQL提取并渲染到网站上。

我正在尝试使用引导网格来组织照片并使其具有响应性,但是因为graphQL返回一个数组,其中包含所有从wordpress帖子中获取的图像,所以我无法将class ='row'设置为div m使用array.map。而且我不知道该怎么解决。

从graphQL我将分辨率设置为width = 300px和height = 300px。

这是我发现的唯一一种组织尺寸的方法,只要我不能使用类行并且所有图像都被视为一行即可。问题在于照片大小没有响应,因此它将始终为300X300 ...

我想要一种使其能够正常工作的网格系统...因此,当我调整窗口大小时,所有照片都被组织和调整大小。


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>
    );
};

1 个答案:

答案 0 :(得分:1)

如果将data.allWordpressPost.edges数组拆分为 chunked数组,则可以遍历外部数组以呈现rows,并遍历每个内部数组以呈现{{ 1}}。

对于3列引导网格,您希望传入的大小值为3(在此示例中,它是cols的第二个参数)。这样可以确保每个块的长度为3。

这是一个简单的示例,忽略了对graphql,childImageSharp和gatsby-image的使用。

lodash.chunk

stackblitz