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.

Dimensions Field

Arguments

Name Type Default Description
type string ‘dimensions’ Value identifying the field type.
id string Unique ID identifying the field. Must be different from all other field IDs.
title string Displays title of the option.
subtitle string Subtitle display of the option, situated beneath the title.
desc string Description of the option, appearing beneath the field control.
class string Appends any number of classes to the field’s class attribute.
compiler bool/array Flag to run the compiler hook or array of CSS selectors to pass dynamic CSS to the compiler hook. More info
output array Array of CSS selectors to dynamically generate CSS. More info
mode array array( ‘width’ => false, ‘height’ => false ) Setting a value for width or height overrides the dynamic CSS output generated by Redux to match the string you specify.
required array Provide the parent, comparison operator, and value which affects the field’s visibility. More info
default string Array of default values. See ‘Default Options’ 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.
permissions string String specifying the capability required to view the section. More info.
select2 array Array of select2 arguments. For more information see the ‘Constructor’ section of the Select2 docs.
hint array Array containing the content and optional title arguments for the hint tooltip. More info

Default Options

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.

NOTE:  The Name properties also serve as the input placeholder text when no value is present.  it is acceptable to capitalize them, if desired.

Example Declaration

    $fields = array(
        'id'       => 'opt_dimensions',
        'type'     => 'dimensions',
        'units'    => array('em','px','%'),
        'title'    => __('Dimensions (Width/Height) Option', 'redux-framework-demo'),
        'subtitle' => __('Allow your users to choose width, height, and/or unit.', 'redux-framework-demo'),
        'desc'     => __('Enable or disable any piece of this field. Width, Height, or Units.', 'redux-framework-demo'),
        'default'  => array(
            'Width'   => '200', 
            'Height'  => '100'
        ),
    ),

Example Usage

This example in 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'];
Tagged: