Module: ImageMarker Fieldtype & Inputfield

[kongondo]

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:

 

1. 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).
2. Office locations: place markers on a map showing global offices of a multinational company
3. 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
  

Edited January 2, 2018 by kongondo
ProcessWire 3.x support only

[tpr]

I can help in css but only about a week later, if all goes well.

[kongondo]

Alternatively, markup could be rendered to suit the CSS style, not the other way round

Edit: I think that would be easier actually. So, if using 'callout' style, we use 'callout' HTML, if using 'Gmap/tear drop' style, we use its unique HTML and the same for 'circular'. 

Edited January 10, 2016 by kongondo

[kongondo]

@tpr, looking at your callout example, we could even have a choice to show 'marker title' instead of 'marker number' if user selects 'callout' for their marker style..

[tpr]

Text vs number: I would prefer both, with the same markup. Perhaps an additional class could be added to simplify things, if needed.

Do markers have links atm?

[kongondo]

No, they don't have links atm. 

ps: Am moving the last conversations to the module's support forum to avoid confusion

[kongondo]

Update version 2:

• Added Tear Drop and Callout marker styles (thanks @heldercervantes and @trp respectively)
• Using unified markup for all the styles (<div><span></span></div>)
• CSS styles still needs quite some work, especially for the new styles (to fit into the unified markup)

Circular Markers (default...for now)
See screenshot in post #1
 
Tear Drop Markers

 
 
Callout Markers

[kongondo]

Updated first post to show module's API.

[kongondo]

I can help in css but only about a week later, if all goes well.

Thanks. I suggest we all work from the same unified markup.

[heldercervantes]

@kongondo, just made a little tune-up on your code:

Affected files:

• InputfieldImageMarker.css
• InputfieldImageMarker.js

Changes:

• Fixed position differences between the 3 marker styles;
• Unified look, so that all marker styles feature the same kind of border and colors;
• Improved the way markers are highlighted;
• Added a higher z-index to the highlighted marker, bringing it on top of the others;
• Tweaked draggable event to remove the snapping that happened when user started dragging the marker.

Suggestion: Callout and teardrop styles seem redundant. I suggest that on callout style, instead of the number, we show the page name. CSS is ready for this change, just output the name in the span and it expands from the center.

You can find the update here:

heldercervantes.com/experiments/ifim/FieldtypeImageMarker_2.zip

I'm starting to implement this on a website right now. It will be a good testing ground. First impressions are good, second impressions coming soon.

[kongondo]

@heldercervantes,

Brilliant! I have amended code with your changes. I am not sure about the 'Page Titles' on the callout and teadrop styles => long names are extending outside the 'red bounds'. See screens below and let me know what you think.

I've added you as module co-author in the next version

[heldercervantes]

I meant numbers on the teardrops and names on the callouts

But I see from your GIF that it's getting line breaks. I only tested with single words and didn't notice it was doing that.

But it's an easy fix. Give me a sec.

[kongondo]

I meant numbers on the teardrops and names on the callouts

OK, done.

[heldercervantes]

Ok, maxwidth was playing pranks. Just add these couple of lines:

max-width: none;

white-space: nowrap;

 

in the "div.callout span {" statement on line 142, and names should show up nice on the callouts.

[kongondo]

Done, works fine! Tested with Reno Theme as well (see screens). Thanks. Updating repo now...

Reno Theme view

[kongondo]

Update: Version 3

1. Unified markers working fine (thanks @heldercervantes)
2. Fixed position differences between the 3 marker styles; (thanks @heldercervantes)
3. Unified look, so that all marker styles feature the same kind of border and colors; (thanks @heldercervantes)
4. Improved the way markers are highlighted; (thanks @heldercervantes)
5. Added a higher z-index to the highlighted marker, bringing it on top of the others; (thanks @heldercervantes)
6. Tweaked draggable event to remove the snapping that happened when user started dragging the marker. (thanks @heldercervantes)
7. Callout markers display referenced page title instead of marker number
8. Confirmed testing OK with Reno Theme

Ready to grab from Github

 

Pending: ReadMe/Docs...+ long coordinates table..

Edited January 12, 2016 by kongondo

[heldercervantes]

Well that took me a lot less time to implement than it did to add the content I needed for testing it out.

Worked like a charm, didn't need any tweaking at all.

The only thing I noticed missing was the keyboard fine-tuning. But that would conflict with Reno theme's expanding / collapsing of the left column, so best leave it as it is.

In this case, on the frontend I have a rollover behavior that pops up an info box on each spot. The box pops to the right, so I'd have a problem with the ones closer to the right edge. But since the module returns % based positions, I can easily add a CSS class whenever the dot is over 50% horizontal, to make the popup appear to the left instead.

The filtering options for the page selector also worked great. Limited that to a specific template and voilá. On the image below you'll see I have white and red dots on the frontend. Those are according to the parent of each dot. Easy as pie.

Great work @kongondo.

Here's a side by side of the field, and the end result:

[kongondo]

Cool! I didn't have a chance to test in the frontend.

[heldercervantes]

Updated to the latest version to test callouts. Looks great.

With short names as in this particular use case, callouts greatly improve usability.

BTW, should probably update the description on the first post in this thread: "one can only choose from one type of marker (circle) at the moment". No longer the case.

[kongondo]

Update: Version 4

Up on GitHub

Changes

In addition to the using a custom selector to filter for selectable page markers, you can now also use custom PHP Code. NOTE: (a) Custom PHP code will only work with the Asm Select page selector option. (b) Custom PHP code overrides custom selector if set

Will submit to Modules Directory once I have done the README (might take a while...)

ps: Updated first post to reflect current status...

[kongondo]

Update: Version 5 (dev branch only)

Changes

1. Added pagination to coordinates' table (adaptation of this easy table pagination script) [@note: (i) selecting trash all will trash all rows whether in view or not: (ii) *clicking on a marker whose table 'page' is not in view will not bring that page into view. I need help with this]
2. If using AsmSelect, made it so that selectable pages that are already markers (i.e. already in the coordinates' table) are greyed out and are un-selectable (similar to normal page field behaviour) [@note: the JS I am using may not work in some (older) broswers]

* need help with this please, thanks.

I've noticed that IE does not seem to understand element width() [only innerWidth()]. This results in very massing coordinates' values. I'll see if I'll sniff user agent to accommodate IE. My policy in respect to free modules is I don't bother with IE )

Screenshot

[BitPoet]

Regarding (ii) and after a cursory glance at the JS:

• Store the page numbers in an attribute in the pager's spans in paginateTable
• In the marker's click event, calculate the row position through row.prevAll('tr').length
• Calculate the matching page number from the position and limit
• Find the matching pager item through the attribute in the first step and fire a click event on it

[kongondo]

Update: Version 6 (on dev branch only for now)

Changes

Thanks to @BitPoet, on a paginated coordinates' table, clicking on a marker will, where necessary, bring its page into view

---------------------------------

@BitPoet, thanks! Following your ideas, I did it like this:

1. Server-side, add a data-row='n' to each marker specifying its row in the coordinates' table (same number you see on the markers )
2. In the pagination function (js) for each page, get the number of the first row and add that to a data-first-row='n' attribute for each respective span
3. Created a function that, on clicking a marker, it finds the first span (#2 above) whose data-fist-row is greater than the marker's data-row. If found, our marker's page is the immediate previous page, so we click on that if it's not already in view (!class='active'). If span 'is out of bounds', it means we are on the last page so we click on that instead. If selector returned nothing, it means there's no pagination in place, so we do nothing.

Demo

[tpr]

Looks great, thanks! Those preview images always remembers me of pox

[Lenz]

Hello all,

 

this is not only my first post here but at the same time my first use of processwire cms.

From what i see so far this is an amazing piece of software. Big thank you for that and for the great community.

 

Now my question regarding this module FieldtypeImageMarker, which i want to use to add markers with info-text to the product-images of my product pages.

 

i am on processwire 3.0.9 and have installed the module (newest dev branche) manually as is described officially in the processwire modules section  (created a new directory under site/modules named exactly the same as the .module file, there i unzipped the content of the module.zip, went into PW admin backend, there i went to modules, checked for new modules, found it in the modules list, installed it, during installation there appeared some file compilation messages on the top with status ok (green background), so i thought all went fine.)

 

After reading about compiled modules i thought the module could well be compatible with the 3.x branche of PW. During installation i didn't see any errors showing up in my admin backend.

 

i added the field to my (product-)page template, but when i open a concrete product-page where i expect a ImageMarkerField i can only see the label of the field and the description, which i added during field-setup. Additionally i get this error-message:

 

 Field: The specified file field does not exist!

But in Setup -> templates -> product-page template the field is set.

Have i perhaps overseen something? Or is the module perhaps not compatible with PW 3.x? 

Help is much appreciated. Thanks in advance