Image Select
The Image Select field allows users to visually select an option.
There are very few options to adjust with the Image Select field:
In the UI, use the "Options" field to add all needed options. Please keep in mind that the full versions of the uploaded images will be used.
In PHP, you can use the add_options method. It works similarly to the select field, but instead of a simple label, it accepts an array, which contains both image and a label.
Field::create( 'image_select', 'color_scheme' )
->add_options(array(
'light-green' => array(
'label' => 'Light Green',
'image' => get_stylesheet_directory_uri() . '/images/scheme-light-green.png'
),
'light-blue' => array(
'label' => 'Light Blue',
'image' => get_stylesheet_directory_uri() . '/images/scheme-light-blue.png'
),
'light-sky' => array(
'label' => 'Light Sky',
'image' => get_stylesheet_directory_uri() . '/images/scheme-light-sky.png'
),
'light-purple' => array(
'label' => 'Light Purple',
'image' => get_stylesheet_directory_uri() . '/images/scheme-light-purple.png'
),
'light-red' => array(
'label' => 'Light Red',
'image' => get_stylesheet_directory_uri() . '/images/scheme-light-red.png'
),
'light-yellow' => array(
'label' => 'Light Yellow',
'image' => get_stylesheet_directory_uri() . '/images/scheme-light-yellow.png'
),
'dark-green' => array(
'label' => 'Dark Green',
'image' => get_stylesheet_directory_uri() . '/images/scheme-dark-green.png'
),
'dark-blue' => array(
'label' => 'Dark Blue',
'image' => get_stylesheet_directory_uri() . '/images/scheme-dark-blue.png'
),
'dark-sky' => array(
'label' => 'Dark Sky',
'image' => get_stylesheet_directory_uri() . '/images/scheme-dark-sky.png'
),
'dark-purple' => array(
'label' => 'Dark Purple',
'image' => get_stylesheet_directory_uri() . '/images/scheme-dark-purple.png'
),
'dark-red' => array(
'label' => 'Dark Red',
'image' => get_stylesheet_directory_uri() . '/images/scheme-dark-red.png'
),
'dark-yellow' => array(
'label' => 'Dark Yellow',
'image' => get_stylesheet_directory_uri() . '/images/scheme-dark-yellow.png'
)
))You can use the following output formats with the image select field:
-
value: Output the key of the selected option. -
text: Output the label of the selected option. -
url: Output the image source of the selected option. -
image: Output a full<img />tag.
In PHP, use the set_output_format method, along with the string, which represents your choice:
Field::create( 'image_select', 'color_scheme' )->set_output_format( 'url' )When the_value is used with this field, you will receive a string in the selected output format above.
<body <?php body_class( get_value( 'color_scheme', 'option' ) ) ?>>