0

我需要能够按宽高比对图像进行排序并将它们放入 Netlify CMS 预览模板中。

我已经为这个 Gatsby 站点构建了一个页面模板，它使用 gatsby-image 提供的一些属性（特别是 aspectRatio）根据这个值将图像过滤成两个数组，然后用这两个数组构建一个图像网格布局——两个肖像，一张风景，两张人像等等。

我希望能够在 Netlify CMS 预览模板中复制此布局，以便用户可以看到他们输入的图像的布局。当然，问题在于提供给模板的数据不包含与通过构建页面本身的 GraphQL 查询获得的结果相同的信息，而且我无法使用静态查询来获取文件，因为我需要为每个单独的“项目”运行查询，并且您不能将变量传递给静态查询（它们是 static ）。

我已经尝试使用 NPM 包“image-size”，但它不起作用，因为预览模板代码没有在 Node 环境中的服务器上执行（我不认为）。我也尝试过利用浏览器 Img API，但我也无法让它工作。

我能够通过提供给 Netlify CMS 模板的方法和数据获得每个图像资源的链接（例如“/media/some-image.jpg”），但我不确定从那里去哪里。

也许我应该尝试在客户端执行我需要的代码？

// Here's the working page template.

// Sort images into two different arrays based on aspect ratio
const filterImagesByAspectRatio = (images) => {
    const portraitOrientation = images.filter(
        ({ image }) => image.childImageSharp.fluid.aspectRatio <= 1
    );

    const landscapeOrientation = images.filter(
        ({ image }) => image.childImageSharp.fluid.aspectRatio > 1
    );

    return {
        portraitOrientation,
        landscapeOrientation,
    };
};

// Put image columns into an array, alternating two portrait, one landscape
const imageGrid = (portraitColumns, landscapeColumns) => {
    let i = 0;
    let j = 0;
    let grid = [];

    while (i < portraitColumns.length || j < landscapeColumns.length) {
        if (i < portraitColumns.length) {
            grid.push(portraitColumns[i], portraitColumns[i + 1]);
            i = i + 2;
        }
        if (j < landscapeColumns.length) {
            grid.push(landscapeColumns[j]);
            j++;
        }
    }

    return grid;
};

export const ProjectTemplate = ({
    images,
}) => {
    // Sort based on aspect ratio
    const {
        portraitOrientation,
        landscapeOrientation,
    } = filterImagesByAspectRatio(images);

    // Put images into React Components
    const portraitColumns = portraitOrientation.map((item) => {
        return (
            <div
                className="column is-6"
                key={`${item.image.childImageSharp.fluid.src}`}
            >
                <PreviewCompatibleImage imageInfo={item} />
            </div>
        );
    });

    // Put images into React Components
    const landscapeColumns = landscapeOrientation.map((item) => (
        <div
            className="column is-12"
            key={`${item.image.childImageSharp.fluid.src}`}
        >
            <PreviewCompatibleImage imageInfo={item} />
        </div>
    ));

    return (

            <div className="columns">
                <div className="column is-8 images-column">
                    <div className="columns is-multiline is-mobile images-row">
                        {imageGrid(portraitColumns, landscapeColumns)}
                    </div>
                </div>
            </div>
    );
};
4

0 回答 0