themeum / kirki

Extending the customizer
https://kirki.org
MIT License
1.26k stars 328 forks source link

Using "value_pattern" with image in select control doesn't seem to work #1742

Closed Alanimus closed 6 years ago

Alanimus commented 6 years ago

Issue description:

I am using value_pattern to assign a texture to background-image with the select control. I am not entirely sure this is a Kirki issue but it's fairly simple so I don't see why it's not working.

If I toggle my colour setting in the same section, the pattern disappears. If I save, the pattern disappears. When I load from default, it doesn't show anything.

When I "publish", the pattern does not output to the CSS element. The default setting doesn't work, and when ever I change a setting in the section, it again removes the pattern.

I am using a function to get the choices values because there are so many textures to choose from. The format is like this: array( "arches" => "Arches")

I could use the radio-image control (this works fine) but because there are so many textures it is too unwieldy.

Version used:

Latest Dev

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

if ( function_exists( 'gm_get_textures' ) ) {
        $imagepath = get_template_directory_uri() . '/framework/assets/images/textures/';
        /* Header Texture */
        MyTheme_Kirki::add_field( 'my_theme', array(
            'type'            => 'select',
            'settings'        => 'gm_jumbo_texture',
            'label'           => esc_html__( 'Jumbotron Background Textures', 'mytheme' ),
            'section'         => 'gm_jumbotron_style',
            'default'         => 'escheresque',
            'priority'        => 9,
            'choices'         => gm_get_textures(),
            'transport' => 'auto',
            'active_callback' => array(
                array(
                    'setting'  => 'gm_jumbotron_select',
                    'operator' => 'in',
                    'value'    => 'texture',
                ),
            ),
            'output'          => array(
                array(
                    'element'       => '#custom-main > .section_primary',
                    'property'      => 'background',
                    'value_pattern' => 'url("' . $imagepath . '$.png");'
                ),
            )
        ) );
    }

Default value doesn't set the CSS:

texture_1

Texture works if I change the select option:

texture_2

But when I publish it doesn't save:

texture_3

aristath commented 6 years ago

Assuming the gm_get_textures function returns array that is formatted like array( 'filename' => 'label' ), something like this should work:

/* Header Texture */
MyTheme_Kirki::add_field( 'my_theme', array(
    'type'            => 'select',
    'settings'        => 'gm_jumbo_texture',
    'label'           => esc_html__( 'Jumbotron Background Textures', 'mytheme' ),
    'section'         => 'gm_jumbotron_style',
    'default'         => 'escheresque',
    'priority'        => 9,
    'choices'         => gm_get_textures(),
    'transport'       => 'auto',
    'active_callback' => array(
        array(
            'setting'  => 'gm_jumbotron_select',
            'operator' => 'in',
            'value'    => 'texture',
        ),
    ),
    'output'          => array(
        array(
            'element'       => '#custom-main > .section_primary',
            'property'      => 'background-image',
            'value_pattern' => trailingslashit( get_template_directory_uri() ) . 'framework/assets/images/textures/$.png'
        ),
    )
) );