{"id":19639532,"url":"https://github.com/nickforddev/acf-swatch","last_synced_at":"2025-04-28T10:31:09.922Z","repository":{"id":57026794,"uuid":"42822634","full_name":"nickforddev/acf-swatch","owner":"nickforddev","description":"ACF Color Swatch Field","archived":false,"fork":false,"pushed_at":"2020-10-14T13:05:53.000Z","size":318,"stargazers_count":76,"open_issues_count":8,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-05T08:11:34.989Z","etag":null,"topics":["acf","acf-swatch","advanced-custom-fields","php","swatch","swatches","wordpress","wordpress-plugin"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nickforddev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-20T17:40:07.000Z","updated_at":"2024-11-25T18:53:14.000Z","dependencies_parsed_at":"2022-08-23T16:11:12.588Z","dependency_job_id":null,"html_url":"https://github.com/nickforddev/acf-swatch","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Facf-swatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Facf-swatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Facf-swatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Facf-swatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickforddev","download_url":"https://codeload.github.com/nickforddev/acf-swatch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251295275,"owners_count":21566429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acf","acf-swatch","advanced-custom-fields","php","swatch","swatches","wordpress","wordpress-plugin"],"created_at":"2024-11-11T13:01:41.611Z","updated_at":"2025-04-28T10:31:04.907Z","avatar_url":"https://github.com/nickforddev.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"ACF - Color Swatch field add-on\n===\n\n* **Author:** Nick Ford\n* **Tags:** acf, acf add-on, color, color swatch, color swatches\n* **Requires at least:** 4.0\n* **Tested up to:** 5\n\nLicense: [GPLv2](http://www.gnu.org/licenses/gpl-2.0.html) or later\n\nDescription\n---\n\nThis is a simple ACF Add-on field allowing the creation of color swatches that behave as radio buttons. This is particularly useful if you want to limit the color options available to the end users, instead of using a color picker field.\n\nThis is an add-on for the [Advanced Custom Fields](http://wordpress.org/extend/plugins/advanced-custom-fields/)\nWordPress plugin and will not provide any functionality to WordPress unless Advanced Custom Fields is installed and activated.\n\nThe color swatch field is a radio button field, with a few modifications. The syntax for building the choices is the same as a radio button field, in that you may include a key : value pair, or just a single value, each option separated by a line break.\n\nThe field expects each line to be a color string, and can interpret all of the possible color formats.\n\nFor example, all of the following will produce a bright red swatch:\n\n* `red`\n* `#ff0000`\n* `rgb(255,0,0)`\n* `rgba(255,0,0, 1)`\n* `hsl(0,100%,50%)`\n* `hsla(0,100%,50%, 1)`\n\nAdditionally, if you are using rgb/rgba or hsl/hsla, you may use only the values, if desired. For instance:\n\n* `255,0,0, 1 // will be recognized as rgba`\n* `0,100%,50% // will be recognized as hsl`\n\nThis may be useful for defining CSS linear-gradients, or other situations where you may want to alter some of the values in the view.\n\nNote that while the field can recognize these shortened syntaxes to display the color swatch in the Wordpress back end, it will still output only what you entered when using `the_field()` or `get_field()`.\n\nScreenshots\n===\n\n![Choices Field](/images/choices.png?raw=true)\n\n![Color Swatches](/images/swatches.png?raw=true)\n\nInstallation\n===\n\n### Wordpress Plugin Store\n---\nhttps://wordpress.org/plugins/acf-color-swatches\n\n### Composer\n---\nIf using Composer (e.g. with [Bedrock](https://roots.io/bedrock/))\n* Add repo to `composer.json`:\n```json\n\"repositories\": [\n  {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/nickforddesign/acf-swatch\"\n  }\n]\n```\n* Install using composer `composer require nickford/acf-swatch`\n\n### Manual\n---\n* Clone the repository to /wp-content/plugins/ in your Wordpress installation\n* Activate in the Plugins manager.\n\nSuggested Usage\n===\n\nAssuming you select a swatch with value `\"rgba(255,0,0, 1)\"`:\n\nAs inline CSS:\n\n```html\n\u003csection style=\"background-color: \u003c?php the_field('swatches')?\u003e\"\u003e\n```\n\nInside a `\u003cstyle\u003e` tag:\n\n```html\n\u003cstyle\u003e\nsection {\n  background-color: \u003c?php the_field('swatches')?\u003e;\n}\n\u003c/style\u003e\n```\n\nOne situation where you might want to take advantage of the shorthand syntax would be to control a CSS linear-gradient that fades a color from 100% opacity to 0%.\n\nAssuming you select a swatch with value `\"255,0,0\"`:\n\n```html\n\u003cstyle\u003e\nsection {\n  background: linear-gradient(\n                to bottom,\n                rgba(\u003c?php the_field('swatches')?\u003e, 1) 0%,\n                rgba(\u003c?php the_field('swatches')?\u003e, 0) 100%\n              );\n}\n\u003c/style\u003e\n```\n\n\nIncluding Within Theme\n===\nTake advantage of the `acf/swatch_settings/path` and `acf/swatch_settings/url` filters to modify where acf-swatch is located so that js and css are found correctly in the backend.\n\n```PHP\n/**\n * Include ACF Color Swatch Field\n */\n\nadd_filter('acf/swatch_settings/path', 'my_swatch_path', 10, 1);\n\nfunction my_swatch_path( $path ) {\n  \n  $path = get_template_directory() . '/path/to/acf-swatch';\n  \n  return $path;\n  \n}\n\nadd_filter('acf/swatch_settings/url', 'my_swatch_url', 10, 1);\n\nfunction my_swatch_url( $url ) {\n  \n  $url = get_template_directory_uri() . '/path/to/acf-swatch';\n  \n  return $url;\n  \n}\n\ninclude( 'path/to/acf-swatch.php' );\n```\n\nChangelog\n===\n\n4/25/18 - v1.0.7\n---\n* [issue](https://github.com/nickforddesign/acf-swatch/issues/12) - Fixed bug with returning value instead of array\n\n10/23/17 - v1.0.6\n---\n* [d57ec40](https://github.com/nickforddesign/acf-swatch/pull/11) - Match background-color syntax\n* [4892d0e](https://github.com/nickforddesign/acf-swatch/pull/10) - Allow transparent values to be selected\n\n10/23/17 - v1.0.5\n---\n* [fa93a8b](https://github.com/nickforddesign/acf-swatch/pull/9) - Add return value option\n\n2/13/17 - v1.0.4\n---\n\n* [44912a6](https://github.com/nickforddesign/acf-swatch/pull/7) - Allow inclusion within theme\n\n10/21/16 - v1.0.3-rc.1\n---\n\n* [7bdc1d2](https://github.com/nickforddesign/acf-swatch/pull/5) - Improved composer instructions\n\n10/7/16 - v1.0.3 \n---\n* [9d733d9](https://github.com/nickforddesign/acf-swatch/pull/4) - Add composer.json\n* Added readme.txt for Wordpress plugin database\n\n5/19/16 - v1.0.3-alpha\n---\n* [0b1b7f6](https://github.com/nickforddesign/acf-swatch/pull/2) - Added support for ACF5\n\n11/9/15 - v1.0.2\n---\n* Added checkerboard pattern to indicate transparency\n* Added subtle border to show swatches that match the background color\n\n10/14/15 - v1.0.1\n---\n* Improved browser / OS support by replacing input elements with block elements\n\n9/20/15 - v1.0.0\n---\n* Initial Release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickforddev%2Facf-swatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickforddev%2Facf-swatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickforddev%2Facf-swatch/lists"}