Kirki Config

Question

我会尽力解释这一点。

首先，我正在使用a toolkit called Kirki来扩展WordPress定制程序API

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

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

显示图像

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

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

为了记住这一点，我可以改变

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

到

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

将输出用户上传的图像，但是这会导致默认图像现在被破坏，并且只输出带有空白src的损坏图像。

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

我已经尝试了所有我能想到但却未能解决的问题。

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

Kirki Config

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

WordPress Customizer API（Kirki） - 中继器图像

Kirki Config

的 HTML / CSS

1 个答案:

的解决