How to upload multiple images to use as gallery in Kirki Framework

Question

I am using Kirki Option framework which works like charm in most cases, I recently shifted from Redux framework. I have a section in my website for the gallery, I want to upload multiple images using Kirki 'image' control where I want to save those images ID. I have custom image size for the thumbnail which is defined in functions.php file:

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

and this is what I am using to create a field in customizer:

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',
        ],
    ]
);

In the output I want to display thumbnail using wp_get_attachment_image_src() function for the specific image ID and when user clicks the image the full image will display in lightbox.

But the problem is using this control I can only upload one image. I don't know what I am missing out. I did research in google for the issue and found that the multiple image upload feature is implemented from Kirki 3.1 version but I don't find anything to use it in their documentation. Can anyone help me do this?

Thanks in advance.

Answer 1

Try following code use it as a controller:

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',
            ],
        ],
    ],
] );

then use that controller by following code:

$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>';
    }
}

You can create a gallery of multiple images, With that code.