Jump to content
kongondo

Module: ImageMarker Fieldtype & Inputfield

Recommended Posts

Update: Version 010

Changelog

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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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). 

Share this post


Link to post
Share on other sites

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: hack.png

 

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.

  • Like 4

Share this post


Link to post
Share on other sites
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. :(

Share this post


Link to post
Share on other sites

As you can probably tell, I am pretty ignorant about multi-lingual features of ProcessWire :P. 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

im-version-11-pw3-only-uikit-screen1.thumb.png.96536d714239bc3d4edbf75d7bfd5c43.png

 

im-version-11-pw3-only-uikit-screen2.thumb.png.7c49ab1b9cb85a2af437c1d871e49227.png

 

im-version-11-pw3-only-uikit-screen3.thumb.png.0777797d4a409cfe0f641d6659149733.png

 

im-version-11-pw3-only-uikit-screen4.thumb.png.6a05860b7337f45d271bfc9226954ff0.png

 

 

Edited by kongondo
  • Like 3

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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?

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...