Module: ImageMarker Fieldtype & Inputfield

[kongondo]

Update: Version 010

Changelog

1. Following up on the last commit, made message to show if no base image found configurable.

[kongondo]

Announcing that I've tested and can confirm that ImageMarker is compatible with ProcessWire 2.8.x and ProcessWire 3.x

[heldercervantes]

I'm doing a modded implementation on a new project using PW 3.0.41 right now. Works like a charm.

[vanderbreye]

Nice Work again, Kongondo!

still, i have a feature request:
it would be great if there would be the possibility to add an editable multilanguage-descriptions to the markers (in renderRow()), similar to the % values of x/y..
maybe even without having to "add"  a new marker via asmpageselect, but with a simple "add new marker" like in repeaters.

This would be helpful for building simple hotspot-pages where it is no need of physically linked pages.

[kongondo]

@vanderbreye,

Glad you like the module. Interesting thought. It would require a change in the database schema though, so would have to think about it carefully. Maybe add an option configurable when setting up the field indicating whether the extra descriptions input. The multi-language aspect of it is what I have no idea how to implement but it doesn't sound like a simple undertaking. Does it mean several inputs, one for each language? In that case it seems it is easier to just use pages (current setup) and have you multi-language descriptions there (text fields). 

[heldercervantes]

In my last couple of projects I've used a hacked version of this module with an extra field for inputting image map coordinates. With a little snooping around and a good dose of patience my lack of module building knowledge didn't stop me

So now this shopping centre's website has a store locator where you can hover hotspots, the marker appears in place and everything is configurable in the CMS. Before this was a Swiffy converted flash object. Here's the result in the frontend: http://www.miramaiashopping.pt/lojas/

And here's what it looks like in the CMS: 

 

Now I do have another project where I also have to add hotspots to an image for showing some text. But for that the module needs some serious work. I'm just going to make subpages of a type that only has a body field and use that. It would be cool to have this work like a repeater where you have full control of the fields for each marker and only link to pages if you need to, but that would mean rebuilding from the ground up.

[vanderbreye]

16 hours ago, kongondo said:

the multi-language aspect of it is what I have no idea how to implement but it doesn't sound like a simple undertaking. Does it mean several inputs, one for each language? In that case it seems it is easier to just use pages (current setup) and have you multi-language descriptions there (text fields). 

well, i thought it WOULD be easier to implement.  it is no problem showing the multilanguage-input on the frontend via api-forms, but i have no idea how to save the values the correct way. right now, i am implementing different things, also in the DB:

multilang headline&copy fields and also a zoom-factor field for each hotspot. for now, i having 2 fields (headline/copy) for each language, which is a terrible implementation, though. shame on me.

[kongondo]

As you can probably tell, I am pretty ignorant about multi-lingual features of ProcessWire . I don't have time to investigate right now so will appreciate any thoughts/pointers. My guess is that in a multi-lingual site, ProcessWire will automatically duplicate fields attached to templates for each language? If that's the case, then implementing your request becomes much easier.

[kongondo]

Hi all. 

I am intending to ONLY support ProcessWire 3.x starting from the next version of this module. Please have a read here and let me know what you think. Thanks.

[kongondo]

Update: Image Marker 0.1.1

As of today and this version onward, ONLY ProcessWire 3.x is supported.

Changelog

1. Support for namespaced ProcessWire only (ProcessWire 3.x).
2. Support for multiple ImageMarker inputfields in one page (using either different base images each [from different single file fields on the page] or one base image).
3. Support for use in PageTable.
4. Base Image select is now done using a pre-populated select inputfield.
5. Pagination in marker table now resembles (CSS) the MarkupPageNav styles of the Admin theme in use.
6. Improvements to marker table CSS to pick from the Admin theme (e.g. rows selected for deletion).

Available now in the modules directory.

Please note that this version does not address any PHP 7.x issues.

Repeaters: Not fully compatible yet; I run into this issue (resources not loaded).

Screens: Image Marker in UiKit

 

 

 

 

 

Edited January 2, 2018 by kongondo

[Torsten Baldes]

Thanks for this module!

I plan to use it for a map with quite a bunch of pins. For some pins the limitation to only have integer percentage values is too strict and they get placed slightly shifted from the original position?

Is there a way to have float/decimal values for the coordinates? e.g. 35.75

Thanks!

[heldercervantes]

Sorry this is going to be vague but...

I've hacked it to support floats in some projects. It's not too hard. Just had to look in the module's code where the fields are defined and it's relatively easy to find the INT and change it to float. You may have to do the same in the DB as well. Takes some fiddling.

I wish I could be more specific, but after formatting my machine I'd have to go through a bunch of backups to find actual code.

[Torsten Baldes]

Thanks!

I did just that. I changed the col types for x & y in the DB from int(11) to decimal(5,2) and replaced the (int) with (float) for x & y in the module files.

I also modified the js to output float values.

Seems to work!

[heldercervantes]

17 minutes ago, Torsten Baldes said:

I did just that. I changed the col types for x & y in the DB from int(11) to decimal(5,2) and replaced the (int) with (float) for x & y in the module files.

I have also on occasion tweaked the styles for the markers, so that the active one is opaque and the others transparent. That helps when you have a bunch of them close together.

[jploch]

This module is really nice!
I also need float values for the coordinates, to make the placement of the markers more accurate.

I did everything Torsten suggested, but my values are still int:

On 6/12/2018 at 5:33 PM, Torsten Baldes said:

I did just that. I changed the col types for x & y in the DB from int(11) to decimal(5,2) and replaced the (int) with (float) for x & y in the module files.

I also modified the js to output float values.

I changed the DB and the module files (FieldtypeImageMarker.module: line 341 + 342, InputfieldImageMarker.module: 251 + 252). And in the js I removed the "Math.floor" on line 307 and 308. 
What else is there to change?

BTW. I think floats are a better default that int, because the markers should be accurate.
Maybe this can be changed in a future update?

EDIT: I Solved it now. You also need to change ImageMarker.php on line 41 and 57.

[jploch]

Hey folks!
Here is another question:

I need the AsmSelect to use the same order as the page tree.
In the dropdown list the order is fine, but when I add a new page/marker it gets added at the bottom.
I don't need the manual sorting, because I want to use the pagetree to sort the markers.

Iam not experienced with hooks.
Can someone point me in the right direction, where/how to change the sort of the AsmSelect?

[huseyin]

Is it possible to create cinema seat reservation system based on this module?

 

[kongondo]

On 6/13/2019 at 4:19 PM, jploch said:

BTW. I think floats are a better default that int, because the markers should be accurate.
Maybe this can be changed in a future update?

I'll have a think. We'd want to preserve backward compatibility.

8 hours ago, huseyin said:

Is it possible to create cinema seat reservation system based on this module?

 

In respect of the seat mapping, yes. However, you would need to do the frontend logic yourself, i.e. the JavaScript bit of a user making selections. However, using a module for something 'as simple' as that may be an overkill?

[tires]

@kongondo Great module!!!

Just have one question or maybe feature request:

Is there a way to add a marker with a text (textfield and a title) only and without linking to a page?
I have a project where there is no page to link to and there should be only a few annotations on an image.

Thanks!

[sambadave]

Thanks for this great module.

@kongondo - When rendering out the base image on the page I tried to add a width using processwire's standard image->width($x, $options) approach however I can't seem to get the image to ender when this is applied. I tried changing the field type to be image instead of file but still no luck. Is there something different about this field to the standard image field that the above approach would usually work on and do you have any suggestions as to how I could output a resized version? The client I am working with has multiple editors and not everyone knows to resize the image before uploading. I could leave a note in the CMS next to the field temporarily I guess.

Any help would be much appreciated.

Thanks

[heldercervantes]

4 hours ago, sambadave said:

 

@kongondo - When rendering out the base image on the page I tried to add a width using processwire's standard image->width($x, $options) approach however I can't seem to get the image to ender when this is applied.

Does not passing $options produce a different result? It's weird, I've used this module a bunch of times and never had such an issue, but I usually don't specify options on resize and go with the default.

[sambadave]

It looks like our client has uplaoded CMYK 300res images into the site. Swapping this out with an RGB image and PW seems able to resise it. Maybe PW struggles to resize CMYK images?

I appreciate the help @heldercervantes

Thanks

[kongondo]

Hi @sambadave,

On 11/4/2020 at 6:48 PM, sambadave said:

When rendering out the base image on the page I tried to add a width using processwire's standard image->width($x, $options) approach however I can't seem to get the image to ender when this is applied. I tried changing the field type to be image instead of file but still no luck.

The module needs a file field (FieldtypeFile). It does not work with ProcessWire image fields (FieldtypeImage). Using image->width() should have thrown an error since Pagefile does not have such a method as compared to a Pageimage object.

On 11/4/2020 at 6:48 PM, sambadave said:

any suggestions as to how I could output a resized version?

IIRC, there is a way you can tell ImageSizer to resize custom images (e.g. in a FieldtypeFile) but I can't seem to find the relevant forums posts at the moment.

22 hours ago, sambadave said:

Swapping this out with an RGB image and PW seems able to resise it.

How did you manage to do this? Are you saying you managed to use an image field with ImageMarker? ?

[sambadave]

Apologies @kongondo I should have mentioned that I changed the settings of the file field to an image field after thinking the same thing.

Ihad no idea that this would work with other file types as well so that will be useful on other projects I'm sure. For the website I'm working on an image field was enough though.

Icould be wrong about the CMYK thing too. It turns out that the images were huge and had high 300 dpi settings so I think PW just crashed out trying to resize them. Uploading a more sensible image to start with seems to work fine now.

Hope that helps ?

It's a great module, so thanks for making it available.

[Roych]

Hello,

nice module ? can I get the URL of pages selected with asmSelect. Somehow can't figure it out.

My code looks like this:

<div class="map">
  <img src="<?= $item->marker_image->url ?>" alt="" style="width:100%;"/>
  <?php  foreach ($item->marker as $dot) :?>
 <div style="top:<?= $dot->y;?>%; left:<?= $dot->x;?>%;" class="box">
    <div class="pin-text">
      <h3><a href="<?=$pages->get((int) $dot->value->url);?>"><?= $dot->infoLabel;?></a></h3>
//link ofc. not working!!!
    </div>
  </div>
</div>

Thank you

R