{"id":29802196,"url":"https://github.com/androlax2/acf-image-map","last_synced_at":"2025-07-28T10:03:59.328Z","repository":{"id":47258060,"uuid":"402812702","full_name":"Androlax2/acf-image-map","owner":"Androlax2","description":"An ACF field to map shapes in image.","archived":false,"fork":false,"pushed_at":"2025-06-06T18:12:52.000Z","size":569,"stargazers_count":7,"open_issues_count":8,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-21T23:57:50.633Z","etag":null,"topics":["php"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Androlax2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-09-03T15:17:26.000Z","updated_at":"2025-06-06T18:12:16.000Z","dependencies_parsed_at":"2024-02-05T06:42:48.261Z","dependency_job_id":null,"html_url":"https://github.com/Androlax2/acf-image-map","commit_stats":{"total_commits":28,"total_committers":2,"mean_commits":14.0,"dds":0.1071428571428571,"last_synced_commit":"db54443bf1565ff8f86ff39b581f5f091dab6d47"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Androlax2/acf-image-map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Androlax2%2Facf-image-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Androlax2%2Facf-image-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Androlax2%2Facf-image-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Androlax2%2Facf-image-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Androlax2","download_url":"https://codeload.github.com/Androlax2/acf-image-map/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Androlax2%2Facf-image-map/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267497269,"owners_count":24097114,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["php"],"created_at":"2025-07-28T10:03:02.864Z","updated_at":"2025-07-28T10:03:59.315Z","avatar_url":"https://github.com/Androlax2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ACF Image Map\n\n![Example](https://user-images.githubusercontent.com/39646949/132213349-31b4fee3-1a54-4f9a-82cb-fddbebf5aead.gif)\n\n## Requirements\n\n- [PHP](https://secure.php.net/manual/en/install.php) \u003e= 7.3\n- [Composer](https://getcomposer.org/download/)\n\n## Installation\n\n### Bedrock\n\nInstall via Composer:\n\n```bash\n$ composer require androlax2/acf-image-map\n```\n\n### Manual\n\nDownload the release `.zip` and install into `wp-content/plugins`.\n\n## Usage\n\nFirst you need to define an image that will be used to add different shapes on it.\n\n### Shapes\n\nYou can use different shapes, for now you can use **polygon** and **points**.\nOn the front end :\n\n- It will return an array with your coords in an `area_coords` for the **polygon**,\n- It will return an array with the point coord in an `x` \u0026 `y` for the **point**.\n\n### ACF Composer\n\nIf you are using [ACF Builder](https://github.com/StoutLogic/acf-builder) :\n\n#### Point\n\n```php\n$field\n  -\u003eaddImage('my_image')\n  -\u003eaddField('my_point_coords', 'image_map', [\n    'image_field_label' =\u003e 'my_image',\n    'shape' =\u003e 'point',\n    'percentage' =\u003e true,\n  ]);\n```\n\n#### Polygon\n\n```php\n$field\n  -\u003eaddImage('my_image')\n  -\u003eaddField('my_poly_coords', 'image_map', [\n    'image_field_label' =\u003e 'my_image',\n    'shape' =\u003e 'poly',\n  ]);\n```\n\n### HTML\n\n#### Point\n\nFor the point, you have the `x` and `y` coords.\n\nLet's imagine that we have the fields defined above:\n\n```php\n$field\n  -\u003eaddImage('my_image')\n  -\u003eaddField('my_point_coords', 'image_map', [\n    'image_field_label' =\u003e 'my_image',\n    'shape' =\u003e 'point',\n    'percentage' =\u003e true,\n  ]);\n```\n\nSo we would have an HTML structure that would look like this to display our point on the image:\n\n```php\n$image = get_field('my_image');\n$point = get_field('my_point_coords');\n  \n\u003cdiv style=\"position: relative;\"\u003e\n  \u003cimg src=\"\u003c?php echo $image['url']; ?\u003e\"\u003e\n  \u003cspan style=\"\n    position: absolute; \n    top: \u003c?php echo $point['y']; ?\u003e; \n    left: \u003c?php echo $point['x']; ?\u003e\"\n   \u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n#### Poly\n\nYou use poly to create a map on the image a priori, so here is an HTML code to achieve this:\n\nLet's imagine that we have the fields defined above:\n\n```php\n$field\n  -\u003eaddImage('my_image')\n  -\u003eaddField('my_poly_coords', 'image_map', [\n    'image_field_label' =\u003e 'my_image',\n    'shape' =\u003e 'poly',\n  ]);\n```\n\nSo we would have an HTML structure that would look like this to display our area on the image:\n\n```php\n$image = get_field('my_image');\n$poly = get_field('my_point_coords');\n  \n\u003cdiv style=\"position: relative;\"\u003e\n  \u003cimg src=\"\u003c?php echo $image['url']; ?\u003e\" usemap=\"#map\"\u003e\n  \u003cmap name=\"map\"\u003e\n    \u003carea coords=\"\u003c?php echo $poly['area_coord']; ?\u003e\" shape=\"poly\"\u003e\u003c/area\u003e\n  \u003c/map\u003e\n\u003c/div\u003e\n```\n\nBe careful, the coordinates of the area are defined in relation to the maximum size of the image. In responsive, this will not work, you have to recalculate the coordinates.\n\nTo do this automatically and easily, I recommend [this package](https://github.com/davidjbradshaw/image-map-resizer)\n\n\n## Bug Reports\n\nIf you discover a bug in ACF Image Map, please [open an issue](https://github.com/Androlax2/acf-image-map/issues).\n\n## Contributing\n\nContributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.\n\n## License\n\nACF Image Map is provided under the [MIT License](https://github.com/Androlax2/acf-image-map/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrolax2%2Facf-image-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrolax2%2Facf-image-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrolax2%2Facf-image-map/lists"}