如何在 Kirki 框架中上传多张图片用作图库

Question

我正在使用 Kirki Option 框架，它在大多数情况下都像魅力一样工作，我最近从 Redux 框架转向。我的网站中有一个画廊部分，我想使用 Kirki“图像”控件上传多个图像，并在其中保存这些图像 ID。我有自定义图像大小的缩略图，它是在functions.php 文件中定义的：

add_image_size('home-gallery-thumb', 400, 300, true);

这就是我用来在定制器中创建字段的方法：

Kirki::add_field( 'my_gallery', [
        'type'      => 'image',
        'settings'    => 'my_gallery_st',
        'label'       => esc_html__( 'Gallery Images', 'txtdom' ),
        'description' => esc_html__( 'Upload Images for the gallery section', 'txtdom' ),
        'section'     => 'my_gallery_sc',
        'choices'   => [
            'save_as'   => 'id',
        ],
    ]
);

在输出中，我想使用

wp_get_attachment_image_src()

函数显示特定图像 ID 的缩略图，当用户单击图像时，完整图像将显示在灯箱中。

但问题是使用这个控件我只能上传一张图像。我不知道我错过了什么。我在谷歌上研究了这个问题，发现多图像上传功能是从 Kirki 3.1 版本实现的，但我在他们的文档中没有找到任何可以使用它的内容。谁能帮我做这个吗？

提前致谢。

Answer 1

尝试以下代码将其用作控制器：

Kirki::add_field( 'my_gallery', [
    'type'        => 'repeater',
    'settings'    => 'my_gallery_images',
    'label'       => esc_html__( 'Gallery Images', 'txtdom' ),
    'section'     => 'my_gallery_sc',
    'row_label'   => [
        'type'  => 'text',
        'value' => esc_html__( 'Image', 'txtdom' ),
    ],
    'button_label' => esc_html__( 'Add New Image', 'txtdom' ),
    'fields'      => [
        'image' => [
            'type'        => 'image',
            'label'       => esc_html__( 'Image', 'txtdom' ),
            'description' => esc_html__( 'Upload an image for the gallery section', 'txtdom' ),
            'choices'     => [
                'save_as' => 'id',
            ],
        ],
    ],
] );

然后通过以下代码使用该控制器：

$gallery_images = get_theme_mod( 'my_gallery_images', [] );

foreach ( $gallery_images as $image ) {
    $image_id = $image['image'];
    $image_url = wp_get_attachment_image_src( $image_id, 'home-gallery-thumb' );
    
    if ( $image_url ) {
        echo '<a href="' . esc_url( wp_get_attachment_image_url( $image_id, 'full' ) ) . '" data-lightbox="gallery">';
        echo '<img src="' . esc_url( $image_url[0] ) . '" alt="" />';
        echo '</a>';
    }
}

您可以使用该代码创建多个图像的图库。