PHPackages getolympus/olympus-dionysos-field-background - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. getolympus/olympus-dionysos-field-background ActiveOlympus-field[Framework](/categories/framework) getolympus/olympus-dionysos-field-background ============================================ Background field, this component is a part of the Olympus Dionysos fields. v0.0.3(6y ago)01682MITJavaScript Since Apr 3Pushed 6y ago1 watchersCompare [ Source](https://github.com/GetOlympus/olympus-dionysos-field-background)[ Packagist](https://packagist.org/packages/getolympus/olympus-dionysos-field-background)[ Docs](https://github.com/GetOlympus/olympus-dionysos-field-background)[ RSS](/packages/getolympus-olympus-dionysos-field-background/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (1)Versions (5)Used By (2) Dionysos Background Field ========================= [](#dionysos-background-field) > 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 ``` --- [![Olympus Component](https://camo.githubusercontent.com/f483886a465a9e44005a352c6c1ba6556689a579ecf0d8b984cf60becaaa878c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f666f722d4f6c796d7075732d3434636331312e7376673f7374796c653d666c61742d737175617265)](https://github.com/GetOlympus)[![CodeFactor Grade](https://camo.githubusercontent.com/5ce68ffc31f4c19637ea90a44e910613c2930e8299955ec5e6ed6185987f85f5/68747470733a2f2f7777772e636f6465666163746f722e696f2f7265706f7369746f72792f6769746875622f4765744f6c796d7075732f6f6c796d7075732d64696f6e79736f732d6669656c642d6261636b67726f756e642f62616467653f7374796c653d666c61742d737175617265)](https://www.codefactor.io/repository/github/getolympus/olympus-dionysos-field-background)[![Packagist Version](https://camo.githubusercontent.com/f1c8b330f25debcd0cb0a60b73acd4dbb8b239e60fead05c09abc74ad4c32d6b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6765746f6c796d7075732f6f6c796d7075732d64696f6e79736f732d6669656c642d6261636b67726f756e642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/getolympus/olympus-dionysos-field-background)[![MIT](https://camo.githubusercontent.com/68035de4b7f69ada20e98e34172f47d361b83a017c8045200fc338660c467897/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49545f4c6963656e73652d626c75652e7376673f7374796c653d666c61742d737175617265)](https://github.com/GetOlympus/olympus-dionysos-field-background/blob/master/LICENSE) --- [![](https://github.com/GetOlympus/olympus-dionysos-field-background/raw/master/assets/field-background-64.png)](https://github.com/GetOlympus/olympus-dionysos-field-background/blob/master/assets/field-background-64.png) --- Field initialization -------------------- [](#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 -------------------- [](#variables-definition) VariableTypeDefault value if not setAccepted values`title`String`'Background'`*empty*`can_upload`Boolean`false``true` or `false``default`Array*empty**empty*`description`String*empty**empty*`settings`Array`[]`see [Settings definition](#settings-definition)`size`String`'thumbnail'`image sizes from `add_image_size()` [WordPress function](https://developer.wordpress.org/reference/functions/add_image_size/)Notes: - `can_upload` value is defined thanks to `current_user_can('upload_files')` (see [WordPress reference](https://codex.wordpress.org/Function_Reference/current_user_can)) Settings definition ------------------- [](#settings-definition) The `settings` variable is an array of options defined below: VariableTypeDefault value if not setAccepted values`upload`Boolean`true``true` or `false``color`Array`[]`see [WordPress reference](https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/color-picker.js)`upload`Array`[]`see [WordPress reference](https://core.trac.wordpress.org/browser/trunk/src/wp-admin/js/media.js)Retrive data ------------ [](#retrive-data) Retrieve your value from Database with a simple `get_option('my_background_field_id', [])` (see [WordPress reference](https://developer.wordpress.org/reference/functions/get_option/)). 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 'My content'; } ``` Release History --------------- [](#release-history) 0.0.3 - Add height and width 0.0.2 - Add display - Add JS integration 0.0.1 - Initial commit Contributing ------------ [](#contributing) 1. Fork it () 2. Create your feature branch (`git checkout -b feature/fooBar`) 3. Commit your changes (`git commit -am 'Add some fooBar'`) 4. Push to the branch (`git push origin feature/fooBar`) 5. Create a new Pull Request --- **Built with ♥ by [Achraf Chouk](https://github.com/crewstyle "Achraf Chouk") ~ (c) since a long time.** ### Health Score 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community11 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 2230d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/c255b14ebf8b792ba8b0c9940bd13e899281fc1431f1088af9074acdaa191cef?d=identicon)[crewstyle](/maintainers/crewstyle) --- Top Contributors [![crewstyle](https://avatars.githubusercontent.com/u/1572149?v=4)](https://github.com/crewstyle "crewstyle (5 commits)") --- Tags phpframeworkwordpressbackgroundfieldcustomolympusdionysos ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/getolympus-olympus-dionysos-field-background/health.svg) ``` [![Health](https://phpackages.com/badges/getolympus-olympus-dionysos-field-background/health.svg)](https://phpackages.com/packages/getolympus-olympus-dionysos-field-background) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)