php - WordPress Customizer API (Kirki) - Repeater Image

Question

我会尽力解释这一点。

首先，我使用 a toolkit called Kirki扩展 WordPress Customizer API

我的主题中有一个部分包含 4 列服务布局。这些服务中的每一个都有一个图标。我正在使用转发器字段来允许用户编辑其中的每一个。除了图像方面，我没有任何问题...

默认情况下，已经创建并填充了 4 列内容，包括图像。确切的问题是显示图像，或者我可以使用显示图像

<?php $img_url = esc_url_raw($setting['service_image']); ?>
<img src="<?php echo $img_url; ?>" alt="...">

这允许默认图像完美显示，但是如果用户上传自己的图像，它会中断并且不会输出 url。而是输出 ID。

为了弥补这一点，我可以改变

<?php $img_url = esc_url_raw($setting['service_image']); ?>

到

<?php $img_url = wp_get_attachment_url($setting['service_image']); ?>

这将输出用户上传的图像，但是这会导致默认图像现在被破坏，并且除了带有空白 src 的破坏图像之外什么都不输出。

我正在尝试弄清楚如何制作它，以便它既显示默认图像，又在用户上传自己的图像时将其替换为他们上传的图像。

我已经尝试了所有我能想到的方法，但还没有弄明白。

如果您需要更多代码...

Kirki 配置

// Panels and Sections
Kirki::add_panel( 'pestex_theme_settings', array(
       'priority'    => 10,
       'title'       => __( 'Theme Customization', 'pestex' ),
       'description' => __( 'Customization Options', 'pestex' ),
    ) );


//Nesting Section Inside Panel Above
Kirki::add_section( 'pestex_services_styles', array(
       'title'          => __( 'Section One - Services Styles' ),
       'panel'          => 'pestex_theme_settings', 
       'capability'     => 'edit_theme_options',
    ) );




// Repeater Setting
Kirki::add_field( 'pestex_section_one_services_control', array(
    'type'        => 'repeater',
    'label'       => esc_attr__( 'Services', 'pestex' ),
    'section'     => 'pestex_services_styles',
    'priority'    => 10,
    'choices' => array(
    'limit' => 4
    ),
    'row_label' => array(
        'type'  => 'field',
        'value' => esc_attr__('service', 'pestex' ),
        'field' => 'link_text',
    ),
    'settings'    => 'pestex_section_one_services',
    // Defining Pre-Made Repeater Fields
    'default'     => array(
        array(  
            //Default Image/Fields
            'service_image' =>  get_template_directory_uri() . '/assets/img/resicon.svg',
            'service_title' => esc_attr__( 'Residential', 'pestex' ),
            'service_text'  => 'Lorem ipsum dolor sit et, consectet adipiscing elit. Cras ut dictum.',
        ),
        array(
            //Default Image/Fields
            'service_image' =>  get_template_directory_uri() . '/assets/img/comicon.svg',
            'service_title' => esc_attr__( 'Commercial', 'pestex' ),
            'service_text'  => 'Lorem ipsum dolor sit et, consectet adipiscing elit. Cras ut dictum.',
        ),
        array(
            //Default Image/Fields
            'service_image' =>  get_template_directory_uri() . '/assets/img/inspicon.svg',
            'service_title' => esc_attr__( 'Free Inspection', 'pestex' ),
            'service_text'  => 'Lorem ipsum dolor sit et, consectet adipiscing elit. Cras ut dictum.',
        ),
        array(
            //Default Image/Fields
            'service_image' =>  get_template_directory_uri() . '/assets/img/ecoicon.svg',
            'service_title' => esc_attr__( 'Eco-Friendly', 'pestex' ),
            'service_text'  => 'Lorem ipsum dolor sit et, consectet adipiscing elit. Cras ut dictum.',
        ),
    ),
    'fields' => array(
        'service_image' => array(
            'type'        => 'image',
            'label'       => esc_attr__( 'Service Icon', 'pestex' ),
            'default'     =>  '',
        ),
        'service_title' => array(
            'type'        => 'text',
            'label'       => esc_attr__( 'Service Title', 'pestex' ),
            'description' => esc_attr__( 'This will be the title of your service', 'pestex' ),
            'default'     => '',
        ),
        'service_text' => array(
            'type'        => 'textarea',
            'label'       => esc_attr__( 'Service Text', 'pestex' ),
            'description' => esc_attr__( 'This will be the text displayed below the service title', 'pestex' ),
            'default'     => '',
        ),
    )
) );

HTML/CSS

// Grabbing Kirki Repeater Field and Assigning Variable 
$settings = get_theme_mod( 'pestex_section_one_services' ); ?>

<?php foreach( $settings as $setting ) : ?>

// Calling Image from Repeater Field and Assigning Variable
<?php $img_url = wp_get_attachment_url($setting['service_image']); ?>

    <div class="col-sm-3 col-centered">

        //Displaying Image          
        <img src="<?php echo $img_url; ?>" alt="#">

        <h3><?php echo $setting['service_title']; ?></h3>
        <p><?php echo $setting['service_text']; ?></p>
     </div>

<?php endforeach; ?>

Answer 1

已解决

在@Asher 回复后，我研究了一种方法，我可以找到一种方法来检查图像是否已上传到媒体库，然后为其分配适当的设置...(这对于一些我从未想过的原因，我曾尝试检查其他一些东西，但从未查看图像是否已上传到媒体库)，我最终运行了这个函数:wp_attachment_is_image()

使用它，我能够通过以下代码让它执行我需要的操作

if ( ! wp_attachment_is_image( $setting['service_image'] ) ){

    $img_url = esc_url_raw($setting['service_image']);

} else {

    $img_url = wp_get_attachment_url($setting['service_image']);
}