OctoberCMS后台：创建Actuality时展示Gallery标题与图片布局实现

要实现这个多对多关联列表的自定义显示，你只需要通过配置表单字段的自定义列或者行模板就能搞定，下面是两种实用方案：

方案一：自定义关联列表列（简洁易维护） #

这是最常用的方式，直接在表单字段配置里定义要显示的列，其中图片列用partial模板渲染：

1. 编辑Actuality模型的fields.yaml
   找到你的插件下Actuality模型的表单配置文件（路径通常是plugins/yourvendor/yourplugin/actuality/models/actuality/fields.yaml），找到关联Gallery的字段，添加list配置：

galleries:
    label: 关联图库
    type: relation
    nameFrom: title
    list:
        columns:
            title:
                label: 标题
            gallery_image:
                label: 预览图
                type: partial
                path: $/yourvendor/yourplugin/gallery/models/gallery/_image_column.htm

2. 创建图片预览的Partial模板
   在Gallery模型目录下新建_image_column.htm文件，用来渲染每个Gallery的图片：

<?php 
// 替换`images`为你Gallery模型中attach many字段的实际名称
if ($record->images->count() > 0): ?>
    <img 
        src="<?= $record->images->first()->getThumb(100, 100, ['mode' => 'crop']) ?>" 
        alt="<?= e($record->title) ?>" 
        style="border-radius: 4px;"
    />
<?php else: ?>
    <span style="color: #666;">无图片</span>
<?php endif; ?>

方案二：完全自定义关联行模板（更灵活的布局） #

如果需要更个性化的布局（比如图片和标题横向排列更紧凑），可以自定义整个关联行的渲染模板：

1. 修改Actuality的fields.yaml配置
   给关联字段指定partial属性，指向自定义的行模板：

galleries:
    label: 关联图库
    type: relation
    partial: $/yourvendor/yourplugin/actuality/models/actuality/_gallery_relation_row.htm

2. 编写自定义行模板
   创建_gallery_relation_row.htm文件，内容如下（可以根据需求调整样式）：

<div style="display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee;">
    <!-- 图片区域 -->
    <div style="width: 80px; height: 80px; flex-shrink: 0;">
        <?php if ($record->images->isNotEmpty()): ?>
            <img 
                src="<?= $record->images->first()->getThumb(80, 80, ['mode' => 'fit']) ?>" 
                alt="<?= e($record->title) ?>" 
                style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
            />
        <?php else: ?>
            <div style="width: 100%; height: 100%; background: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #666;">
                无图片
            </div>
        <?php endif; ?>
    </div>
    <!-- 标题区域 -->
    <div>
        <h4 style="margin: 0; font-size: 14px;"><?= e($record->title) ?></h4>
    </div>
</div>

必要的前置配置检查 #

在上面的步骤生效前，确保你的模型关联配置是正确的：

• Gallery模型的attachMany关联：

// 在Gallery.php中
public $attachMany = [
    'images' => ['System\Models\File', 'order' => 'sort_order'],
];

• Actuality与Gallery的多对多关联：

// 在Actuality.php中
public $belongsToMany = [
    'galleries' => [
        'YourVendor\YourPlugin\Models\Gallery',
        'table' => 'yourvendor_yourplugin_actuality_gallery', // 替换为你的中间表名称
        'order' => 'title',
    ],
];

完成这些配置后，你在后台创建或编辑Actuality时，关联的Gallery列表就会同时展示每个Gallery的标题和对应的预览图片了。

内容的提问来源于stack exchange，提问作者Hamza Ben Abdesslem