Module: ImageMarker Fieldtype & Inputfield

[kongondo]

Hi Lenz,

Welcome to ProcessWire and the forums

I have not had a chance to test the module in ProcessWire 3.x (let alone install PW 3.x!!). For the time being, and this goes for all my modules, I have not had time to test (and hence will not be supporting) them in ProcessWire 3.x. I am just swamped with too much (other) work and might wait until PW 3 is official released to port over my modules. Not ideal for some, I know, but that's just my (current) reality

[heldercervantes]

Same here. When we built it I was testing on 2.7.2

When I started that project I began on PW3 but there were other modules misbehaving, so I went back to the master version. I suggest you do the same.

[Lenz]

Hello kongondo and heldercervantes, thank you very much for your fast reactions. ok, then i'll consider switching back to master.

Edit: One question though: Is it easily possible to add Image Markers via FieldtypeImageMarker later to a given product image, say if i first go with a normal product image and later want to add Markers via the module when it is tested against 3.x and compatible with 3.x? i actually would think so.

[BitPoet]

@Lenz: the fields works like a charm on 3.0.9. The message you get is because to work, ImageMarker needs a regular image field as well on the template.

You add the image field to the template and enter the name of that image field in the imagemarker field's settings. Then, on a page with that template, you add an image to the imagefield, save the page and imagemarker picks up the image from that field.

[kongondo]

Thanks @BitPoet. I read @Lenz post too quickly and assumed all the steps had been followed....

[Lenz]

wow astonishing the fast reaction time.  

Thanks BitPoet and Kongondo, i already had a regular image field assigned to my template, but i forgot to enter the name of that image field in the imagemarker field's settings.

Now that i did this imageMarkerfield fetched my image. So far so good.

But there are no markers available yet, even not, after i selected a page to add as marker. The selected page appears as a green row like a field in a template. But i only see an empty table header below the fetched image, saying "Marker Information Page" - "Marker X-Coordinate" - "Marker Y-Coordinate", but no input fields or information.

ok, maybe this is because i curiously add a regular product page with many content as marker although this doesn't make any sense actually because i only need a few words of infos as marker-content...

should i instead better create a (hidden)  page (somewhere in the tree) for every marker-information and add this as marker?  am i  right about this?

Thanks for your patience

arrgh, sorry  , i forgot to save. After saving all is good.   

Really fun to work with processwire. Couldn't imagine that a cms can be this flexible and letting the developer this much freedom.

Again congratulations. Ok, maybe this gratitude stems from some torture in the past using systems, which are not so flexible and easy to use...

[Lenz]

ok, my previous absent-minded actions aside now hopefully a more reasonable question regarding outputting an ImageMarkerField:

My ImageMarker Type Field is named "product_imageMarker" and i try to fetch the ImageMarker with 

$product_imageMarker = $page->get('product_imageMarker');

then i try to output the ImageMarkerField with

<?php if ($product_imageMarker){ echo '<img src="'.$product_imageMarker->url.'">';}?>

resulted in a error 

>>> Error: Exception: Class 'ImageMarkerArray' doesn't yet implement method 'makeBlankItem()' and it needs to.<<< 

 

My ImageMarker Field contains one base image and one marker on the base image.

 

According to the error message the field seems to be an array. 

 

i only managed to display the product image itself (the base image which is included in the Image Marker Field) but not both (image + markers) together.

 

So how to output the image and the marker(s)? 

 

Again thank you very much in advance.

 

 

 

Error:

[heldercervantes]

Does this still happen if you have more than 1 marker?

[Lenz]

Hello heldercervantes, thank you for your question.

Yes it still does happen if i have more than one marker.

Hm... Don't i need to iterate somehow over this array to output one or more markers, respectively their x- and y-coordinates?

E.g. in one step i output the base image, in another step the markers?

I can't find any documentation at the moment...

Edit: BitPoet obviously had success outputting this field, so i guess i miss something essential...

[heldercervantes]

This is the site that prompted making this module. It's still in development and this link will die eventually:

http://jacinto-lda.com/2016/pt/empresa/internacional/

Here's the abridged code from the template:

      <img src="<?= $page->images->first->url ?>" class="worldMapImage">
      <div class="dotsList">
        <?php

        foreach ($page->map as $dot) {
          $dotPage = $pages->get($dot->info);

          echo '<div class="dot" style="left:'.$dot->x.'%; top:'.$dot->y.'%"></div>';
        }

        ?>
      </div>

I have a few more things in there for generating the hover info, making some dots red and so on, but I cut that out to keep the example simple.

You probably need to change $page->images and/or $page->map to suit the field names you're using. And of course this needs proper CSS to display correctly, but you can inspect those from the link if you're having trouble.

Hope this helps.

[Lenz]

i really have to admit i'm quite bamboozled how amazing this community is. Thanks helldercervantes, you made my night. Really very much of a help!

I'll go over your example link and also will study your code sample. That looks reasonable indeed and seems to work exactly as i thought. First step outputting the image, second step iterate over the array and outputting the markers.

a pure CSS popup would be fine. Up to now i only managed a static popup box, that doesn't grow with the content, but let's see. I'll try a bit...

For now i think i call it a day.

[kongondo]

I can't find any documentation at the moment...

How to use the API is right there in the first post in this thread

[Lenz]

kongondo, omg, i managed to introduce me as a great scatterbrain, which is kind of typical for me btw. How could i oversee this !  Thank you very much for this hint 

[heldercervantes]

Implementing this on a new site I detected a couple of "nice to haves".

1. Sorting
2. X and Y fields would accept decimals for fine-tuning. Bigger maps get too small for precise positioning of markers, and rounded percentage can be insuficient on the front-end.

For sorting, if anyone needs it, I managed to get around to an alphabetic sorting based on the referred page's title, like this:

$dots = $page->mapDots;

foreach ($dots as $dot) {
  $dot->sortname = $pages->get($dot->info)->name;
}

$dots->sort('sortname');

Though it would be cool to manually sort markers on the list, this approach lets you sort by any field, and probably even the pages position relative to its real parent (I think, didn't try).

[kongondo]

Thanks BitPoet and Kongondo, i already had a regular image field assigned to my template, but i forgot to enter the name of that image field in the imagemarker field's settings.

Now that i did this imageMarkerfield fetched my image. So far so good.

Just to clarify to all reading this. We recommend that you use a file field instead (for your base image); otherwise, if you use an image field, you will end up with two of the same image displayed ...once in your image field and once again in ImageMarker. Can be confusing

[kongondo]

Update: Version 007

Changelog

1. As per the request by @heldercervantes , coordinates table can now be manually sorted.

[adrian]

Hey Kongondo,

Thanks for this - using it for the first time - very handy!

Just a couple of warnings that I noticed appear in the admin until you have entered data:

I also noticed that sometimes the co-ordinates weren't being populated properly - just showing "Infinity". I had to save the page again, then the next time I moved the markers, they worked correctly. I don't unfortunately have a reliable way to reproduce, but just wanted to let you know in case you can easily track it down.

[kongondo]

Update: Version 008

Changelog

1. Fixed a couple of minor bugs, thanks @adrian for reporting

+++++++++

@adrian,

Haven't seen or heard of that 'infinity' error before. Were you testing on PW 3.X btw?

[adrian]

Haven't seen or heard of that 'infinity' error before. Were you testing on PW 3.X btw?

Good question - I was testing on 3.x, but then installed on an existing site running 2.6.21. I am not positive, but I think I saw the problem on both installs. Maybe don't worry until someone else reports it. If I see it again, I'll pay more attention.

Thanks for the warning fixes.

[Macrura]

I was thinking of using this, but was wondering about the possibility of making it optional, for example in a template where you might want to make it optional to create image markers, is there anyway for the module to not show an error if there is no image in the specified image field.
If that's not really possible then we can come up with a work around (using an alternate template etc..)

Thanks!

[kongondo]

No there isn't currently but I am not getting what your use case is. Why add it to a template if you are not going to use it? Maybe elaborate more.

 

Btw, the recommendation is to use a file field to hold the image and not an image field since you'll have an image rendered twice when editing a page using the template...once in the image field and once more in ImageMarker..

[Macrura]

right - the use case is that we have a media library and that holds images that are used in various places on the site.

On any of those images in the library, the users should be allowed to use the image marker functionality, or not use it...

[kongondo]

Makes sense. I have updated the module to:

1. Show a field error (a) if base image field NOT specified, (b) if specified base image field is of WRONG type or (c) does NOT exist;
2. Render a friendly message in the output of the inputfield itself about 'a base image not found, please upload one and save page to use the field blah blah'.

Please update to version 009 and let me know if it works for you, thanks.

[kongondo]

Update: Version 009

Changelog

1. Changed behaviour if no base image found; display friendly message instead of field error. Thx @Macrura for request.

[Macrura]

@kongondo great! Thanks for the update, and for this module! Will post the the final site/use once it's done (about a month away...)