如何使用引导网格映射图像数组? [英] How can I use bootstrap grid mapping an array of images?

问题描述

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

I'm building a portfolio website with gatsby.js. All photos are posted in wordpress, fetched by graphQL and rendered to the website.

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

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.

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

From graphQL i'm setting resolution to width=300px and height=300px.

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

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

推荐答案

如果将 data.allWordpressPost.edges 数组拆分为分块数组，则可以遍历用于渲染行的外部数组，以及用于渲染 cols 的每个内部数组.

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.

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

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.

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

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

这篇关于如何使用引导网格映射图像数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！