Fieldtype and Inputfield ImageMarker
As of 02 January 2018 ProcessWire versions earlier than 3.x are not supported
Version: Stable Project Page: Github
Modules Directory: http://mods.pw/Bk OR http://modules.processwire.com/modules/fieldtype-image-marker/
Requires: ProcessWire 2.4 or greater
########################
About
This module allows you to easily 'place markers' on an image. Each placed marker's position/coordinates (x and y) are saved in the field as well as the ID of the ProcessWire page the marker refers to.
In the backend markers are placed on a specified base image. In the frontend, using each saved page ID you can then retrieve any information you want about the pages being referenced and display that on your website over the same base image you used in the backend.
The module is useful for a diverse number of uses including:
Product demonstration: place markers on various parts of your product to showcase its features. Using a bit of CSS and/or JavaScript you can create pop-up boxes displaying more information about that feature of the product. The information (in this case, feature), would be information you've stored in some field (e.g. a text field) in the page marker (i.e. the page being referenced by the coordinates).
Office locations: place markers on a map showing global offices of a multinational company
Points-of-Interest: place markers showing points of interest on a map or location or anything.
The coordinates are saved as percentages. This means they will scale well with the image being marked.
This module came about as a result of this request.
@credits Ryan Cramer: This code borrows from his FieldtypeEvents.
@credits Helder Cervantes: Module concept, HTML, CSS, JavaScript.
@credits Roland Toth: CSS, Inspiration.
API
In the frontend, the field returns an array of ImageMarker objects. Each of these has the following properties
info (integer): The page ID of the marker (i.e. the page being referenced by the marker. Using this, you can get the referenced page and have access to all its data.
infoLabel (String): The title of the page (above) referenced by the marker (runtime only).
x (Integer): The x-coordinate of the marker (%).
y (Integer): The y-coordinate of the marker (%).
You grab the properties as in any other PW field, e.g.
$out = '<img src="'. $page->base_image->url . '" alt="">';// image to place markers on 'base_image' is the name of the file field
foreach ($page->marker as $m) {
// do something with the following properties
$m->id;// e.g. $pages->get((int) $m->id);
$m->x;
$m->y;
$m->infoLabel;
}
// the CSS and HTML are up to you but see InputfieldImageMarker.module for examples
Frontend implementation is left to you the developer/designer