# Dimensions
The Dimensions field comes in handy when allowing users the ability to set the width, height and unit value of any HTML element that supports those properties.
Table of Contents
# Arguments
Name | Type | Default | Description |
---|---|---|---|
type | string | dimensions | Value identifying the field type. |
mode | array |
| Setting a value for width or height overrides the dynamic CSS output generated by Redux to match the string you specify. |
default | string | See Default Argument below. | |
width | bool | true | Flag to display the width input. |
height | bool | true | Flag to display the height input. |
units | string/bool/array | px | Specify a string to pass a single unit value. Specify an array to pass an array of unit values. Specify false to hide the units selector. Accepts: px em % . |
units_extended | bool | false | Flag to allow users to select any type of unit. |
select2 | array | Array of select2 arguments. Select2 Documentation (opens new window). |
Also See
# Default Argument
Name | Type | Description |
---|---|---|
width | string | Default value to display. |
height | string | Default value to display. |
units | string | Default unit to display. When unspecified, px is used by default. |
TIP
The name
properties also serve as the input placeholder text when no value is present. it is acceptable to capitalize them, if desired.
# Build Config
Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
'type' => 'dimension'
) );
# Example Config
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
'id' => 'opt_dimensions',
'type' => 'dimensions',
'units' => array('em','px','%'),
'title' => esc_html__('Dimensions (Width/Height) Option', 'your-textdomain-here'),
'subtitle' => esc_html__('Allow your users to choose width, height, and/or unit.', 'your-textdomain-here'),
'desc' => esc_html__('Enable or disable any piece of this field. Width, Height, or Units.', 'your-textdomain-here'),
'default' => array(
'Width' => '200',
'Height' => '100'
),
) );
# Example Usage
This example is based on the example usage provided above. Be sure to change $redux_demo
to the value you specified in your opt_name argument.
global $redux_demo;
echo 'Width value: ' . $redux_demo['opt_dimensions']['width'];
echo 'Height value: ' . $redux_demo['opt_dimensions']['height'];
echo 'Unit value: ' . $redux_demo['opt_dimensions']['units'];