Question

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

我为此Gatsby网站构建了一个页面模板，该模板使用gatsby-image提供的某些属性（特别是aspectRatio），基于该值将图像过滤到两个阵列中，然后使用两个阵列构建图像网格布局-两个肖像，一个风景，两个肖像等等。

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

我已经尝试使用NPM包“ image-size”，但是由于在节点环境中的服务器上未执行预览模板代码，因此无法使用（我不认为）。我也尝试过利用浏览器的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>
    );
};

针对Netlify CMS预览模板按纵横比对图像进行排序

0 个答案: