README

This component is a part of the Olympus Dionysos fields for WordPress.
It uses wpColor and wpMedia WordPress javascript bundle to manage field.

composer require getolympus/olympus-dionysos-field-background

Field initialization

Use the following lines to add an background field in your WordPress admin pages or custom post type meta fields:

return \GetOlympus\Dionysos\Field\Background::build('my_background_field_id', [
    'title'       => 'Ooh, got ourselves an epic now...',
    'can_upload'  => false,
    'default'     => [
        'background-attachment' => 'initial',
        'background-color'      => 'transparent',
        'background-image'      => 'https://vignette.wikia.nocookie.net/despicableme/images/1/1d/Kevin_minions.png/revision/latest/scale-to-width-down/350?cb=20170703052012',
        'background-position'   => 'left top',
        'background-repeat'     => 'no-repeat',
        'background-size'       => 'cover',
        'height'                => '200px',
        'width'                 => '100px',
    ],
    'description' => 'Oh crap, I got knocked!',
    'size'        => 'thumbnail',

    /**
     * Settings definition
     * @see the `Settings definition` section below
     */
    'settings' => [],
]);

Variables definition

Notes:

can_upload value is defined thanks to current_user_can('upload_files') (see WordPress reference)

Settings definition

The settings variable is an array of options defined below:

Retrive data

Retrieve your value from Database with a simple get_option('my_background_field_id', []) (see WordPress reference).
Below, a json_encode() example to understand how data are stored in Database:

{
  "background-attachment": "initial",
  "background-color": "transparent",
  "background-image": "https://vignette.wikia.nocookie.net/despicableme/images/1/1d/Kevin_minions.png/revision/latest/scale-to-width-down/350?cb=20170703052012",
  "background-position": "left top",
  "background-repeat": "no-repeat",
  "background-size": "cover",
  "height": "200px",
  "width": "100px"
}

And below, a simple example to show how to iterate on the data array in PHP:

// Get background from Database
$background = get_option('my_background_field_id', []);

// Check if background is empty and display it
if (!empty($background)) {
    $style = '';

    foreach ($background as $attr => $value) {
        $style .= $attr.':'.$value.';';
    }

    echo '<div style="'.$style.'">My content</div>';
}

Release History

0.0.3

Add height and width

0.0.2

Add display
Add JS integration

0.0.1

Initial commit

Contributing

Fork it (https://github.com/GetOlympus/olympus-dionysos-field-background/fork)
Create your feature branch (git checkout -b feature/fooBar)
Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request

Built with ♥ by Achraf Chouk ~ (c) since a long time.

getolympus / olympus-dionysos-field-background

Maintainers

Details