Redux

# Media

The media field is an adaption for a core WordPress feature.

Table of Contents

# Video Tutorial

# Arguments

Name Type
Default
 Description
type string media Value identifying the field type.
width string Sets the width of the image.
height string Sets the height of the image.
url bool false Flag to display the image of the URL.
preview bool true Flag to display a preview of the image.
placeholder string No media selected Sets the text that appears in the URL input box when no value is present.
readonly bool true Flag to set the readonly attribute of the media text field.
mode string String specifying either the file type or mime type of files to accept from the media library. IE, the file selector will not let you add any other types.
library_filter array Accepts an array of strings which correspond to the second part of a mime type(opens new window) (i.e. video/mp4 would be “mp4”). Only files that match one of the items in the array will appear in the media library.

Also See

# Default Options

Name Type Description
id string Unique ID for the media type.
url string Full URL to the default media.
width string Sets the width of the media.
height string Sets the height of the media.
thumbnail string URL to the media thumbnail, if any.

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.
 
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'media'
) );

# Example Config

Redux::addField( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'opt-media',
    'type'     => 'media', 
    'url'      => true,
    'title'    => __('Media w/ URL', 'redux-framework-demo'),
    'desc'     => __('Basic media uploader with disabled URL input field.', 'redux-framework-demo'),
    'subtitle' => __('Upload any media using the WordPress native uploader', 'redux-framework-demo'),
    'default'  => array(
        'url'=>'http://s.wordpress.org/style/images/codeispoetry.png'
    ),
) );

# Example Config w/ library_filter

This example will produce a media field that can only find files with the extension denoted. This is useful when you only want specific file types specified for a given field.

Redux::addField( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'opt-media',
    'type'     => 'media', 
    'title'    => __('Media w/ Library Filter', 'redux-framework-demo'),
    'library_filter' => array(
        'jpg'
    )
) );

# 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 'URL value: '       . $redux_demo['opt-media']['url'];
echo 'Height value: '    . $redux_demo['opt-media']['height'];
echo 'Width value: '     . $redux_demo['opt-media']['width'];
echo 'Thumbnail value: ' . $redux_demo['opt-media']['thumbnail'];

# Allowed File Types in WordPress

WordPress allows you to upload many of the most common image files, audio/video, PDF, Microsoft office and OpenOffice documents. The WordPress codex has a full list of allowed file types(opens new window) and extensions.

To find out which mime types are enabled in your instance, you can run the following code:

print_r( get_allowed_mime_types() );

# Adding Additional File Types

Security is the main reason behind the limitation on file types that users can upload. You can, however, get around this with a little bit of code. Add this code to your theme or plugin to allow SVG files to be uploaded:

function my_myme_types( $mime_types = array() ){
    $mime_types['svg'] = 'image/svg+xml'; // Adding svg extension
    return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Notice that the file extension goes as the key in $mime_types associated array and the mime type goes as its value. In this example, svg file extension represents files with the mime type image/svg+xml. You can find out mime types of several common file extensions on this page(opens new window) .

You can also add multiple file types in one code snippet, like this:

function my_myme_types( $mime_types = array() ){
    $mime_types['svg'] = 'image/svg+xml'; // Adding svg extension
    $mime_types['psd'] = 'image/vnd.adobe.photoshop'; // Adding photoshop files
    return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

← Multi Text →