collective.gridlisting 1.2.0

功能

• 为“文件夹”和“集合”添加新的视图模板“网格列表”

• 在编辑文件夹或集合时，您将获得一个新的“网格列表”选项卡，可以设置各种列表模板选项。

开始使用

1. 在附加组件控制面板中安装 collective.gridlisting

2. 转到文件夹并从 显示 菜单中选择 网格列表

3. 编辑文件夹并转到 网格列表 选项卡

4. 您可以输入网格项的CSS类，或者启用瀑布流布局。

网格设置

网格结构设置如下

您可以为这些容器中的每一个定义CSS类。

例如，如果您只想有一个响应式的4/2/1列布局，可以将容器行CSS类设置为

row-cols-1 row-cols-lg-2 row-cols-xl-4

您还可以使用列内容CSS类定义列内容的边框、边距和填充

border border-primary m-2 p-2

您还可以进一步尝试间距或背景。

在列内部，文本和图像信息可以分别定义。例如，您可以通过以下方式简单地切换文本/图像的顺序

列内容文本：col order-2

列内容图像：col order-1

或者使用以下方式将图像置于文本上方

列内容文本：col-12 order-2

列内容图像：col-12 order-1

有关CSS定义的更多信息，请参阅Bootstrap文档

https://bootstrap.ac.cn/docs/5.3/layout/grid/

特殊示例：卡片列表

以下值为您提供具有卡片、单元格高度100%和顶部图像的列表

• 容器行：row-cols-3（3列）

• 列：pb-3（卡片下方间距）

• 列内容：card h-100（卡片轮廓，100%单元格高度）

• 列内容文本：order-2 card-body（图像下方的文本）

• 列内容图像：order-1 card-img-top（文本上方的图像）

就这样！

注意：如果您启用瀑布流布局，则必须从列内容中删除h-100，并具有如此处所示的马赛克卡片列表：https://bootstrap.ac.cn/docs/5.3/examples/masonry/

翻译

此产品已翻译成

• 英语

• 德语

安装

通过将其添加到您的buildout中安装collective.gridlisting

[buildout]

...

eggs =
    collective.gridlisting

然后运行bin/buildout

兼容性

Plone 6，Python 3.8 - 3.11

贡献

• 问题跟踪器：https://github.com/collective/collective.gridlisting/issues

• 源代码：https://github.com/collective/collective.gridlisting

• 文档：https://github.com/collective/collective.gridlisting/docs

许可证

该项目受GPLv2许可证的许可。

1.2.0 (2024-07-02)

• 启用预览图像的裁剪。[petschki]

1.1.3 (2024-07-02)

• 修复preview_scale的值。[petschki]

1.1.2 (2024-07-02)

• 修复show_more_link和more_link_text的默认值。[petschki]

1.1.1 (2024-06-06)

• 修复选择字段中的missing_value。[petschki]

1.1.0 (2024-06-04)

• 添加控制面板以定义站点范围的默认值。[petschki]

1.0.0 (2023-06-28)

• 首次发布。请参阅README.rst [petschki]