Support

Account

Register Login

Home › Forums › Add-ons › Repeater Field › Create Image Mapper/Hotspot with repeater

Solving

Create Image Mapper/Hotspot with repeater

  • Hi All,

    I hope someone can help!?

    A client would like the facility to upload an image and then add markers/hotspots to an image. You can then assign info/urls to each hotspot.

    We looked at a plugin but wasn’t very user friendly at all.

    I therefore though using a an ACF image upload then an ACF repeater could be the way forward. You could then add a row within the repeater to store the info you desire.

    The problem is, how can I marry up the repeater to the coordinates on an image?

    I see an Add-On is available for Google Maps but wonder if the above can be achieved somehow?

    Any help is very much appreciated!

  • OK,

    I’ve been giving this some thought and think I can work out the stages but need help with the code

    1) So you create a new post
    2) Upload an image to the custom field: Image
    3) Publish
    4) Ideally once published then a repeater field appears (is that easy to do?)
    5) The ACF repeater has:
    – Caption
    – URL
    – X coordinate
    – Y coordinate
    6) At the end of the repeater row you can click to open a pop up
    7) The pop up window contains this script but shows the image from the published post
    8) You click the image and to get an X and Y value
    9) These are then passed back to the repeater

    Am I over complicating this? Is there an easier solution?

    Any help is very much appreciated

  • I’d say it very much depends on how advanced you want the function to be.. and user friendly.

    I think the way you imagine it could work.. but to make it easier for you you could add a html-field at the end of the repeater row with an a -tag which you hook up your custom script to.. that way you wont have to hack anything into the repeater.

    You’ll have to do some custom javascript obviously.. do this by adding a filter to admin_head:
    http://stackoverflow.com/questions/3326967/how-to-add-custom-javascript-to-wordpress-admin

    With the script I suppose you’ll just have to be able to integrate that script you’ve linked.. then have it output the coordinates into the appropriate fields..

    I don’t think you’ll have to publish the post with the image before using the script/popup. You’ll retrieve the image when the user actually click the “add coordinates” popup-link anyway so as long as there’s an image there in the code your fine.

    I have to say this is a deucy and it’d be interesting to make it into a plugin.. I haven’t had use for a function like this myself but I’ve seen this being used on occasion.

  • Thanks Jonathan

    I’m sort of new to the ACF plugin. What does the -tag do?

    Would you not need to publish the post in order to view the image in order to have something to click to get the coordinates?

    Any code input is most welcome as I can’t work out where on earth to start. In my head it seems ok but trying to put it into code seems to be a right mare!!

  • with “a-tag” im just referring to a regular anchor.

    You could put a hmtl field at the end of the repeater-row with:

    
<a href="#" class="open-imglatlon">Set image coordinates</a>

    and then in your javascript you trigger the popup when user clicks open-imglatlon

    
$('.open-imglatlon').click(function(e){
e.preventDefault(); //this prevents regular link-click. 
});

  • Oh I see! Sorry, that makes sense now with regards to the a-tag (feeling embarrassed)

    I think this is coming together, my only concern is how to pass the X and Y value back from the pop up window to the repeater row.

    Otherwise I think this is all the pieces needed.

    Again, if anyone has any thoughts on this, please feel free to contribute. It would be good to get this available to all as I’m sure I can’t be the only one that needs this?!

  • great 🙂 No need to feel embarrassed!

    You could simply target the appropriate input fields and alter their value when user clicks on the image.. when the user first click the link, save the link object to a variable and pass that along to the function for the coordinates. then inside the function where user has clicked the image and gotten the coords you use the link-object to target the corresponding x and y inputs. The code below is just an example of how you could input the values in the right fields 🙂

    
$('.open-imglatlon').click(function(e){

	e.preventDefault(); //this prevents regular link-click. 
	var linkobject = $(this);
	openpopup(linkobject); //the function for opening the popup blabla
	
});

function openpopup(linkobject){
	
	//blablabla all the code to retrieve the image, put it in the popup and do the x-y coord script 
	
	
	var xcoords = '3213213213'; //just for show, 
	var ycoords = '3213213213'; //just for show, 
	
	// Use the linkbutton, go to the parent tr, find the parent trs siblings which are also tr, then inside those find the input with a parent element with the specific class and change the value of the input to x or y. You can find the specific class from looking in the code on your admin page with a repeater row created. 
	
	linkobject.closest('tr').siblings('tr').find('.field_key-field_4f9e754fdedc2 input').val(xcoords);
	linkobject.closest('tr').siblings('tr').find('.field_key-field_4fwdwaddfffew input').val(ycoords);
	
	// I think this could work altho its possible that since the siblings are more than one it wont work.. then you'll have to just get the tr siblings and loop through each like so:
	linkobject.closest('tr').siblings('tr').each(function(){
		$(this).find('.field_key-field_4f9e754fdedc2 input').val(xcoords);
		$(this).find('.field_key-field_4fwdwaddfffew input').val(ycoords);
	});
	
}

  • Thanks Jonathan

    Actually, this isn’t as easy I first thought.

    Is it even possible to add an A tag within the repeater? I tried using a text field and the append option

    Something is telling me this is going to be a headache 🙁

  • A headache, sure! possible, yeah!

    don’t add a textfield, add a html-field and put the a tag in the description… it’ll appear on the edit page as an anchor. 🙂

    to put your own script into the edit page you can use the admin_head hook
    http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head

  • Thanks again.

    I don’t have a html field though? Running the latest version and can’t see it. 🙁

  • My bad, its called message field 🙂

  • A-ha! Yes I have that lol

    Ok I will try again

  • Daft question!

    How can I get the uploaded image into the JS script?

    Am massively struggling so any help is very much appreciated

    Thanks

  • You can fetch the image url with javascript and print it as an img tag..

    I can’t say for sure how to get the image url since I cant see your setup in admin but try to figure out how to get it by:

    
var imgURL = $('your image object').attr('href');

//Then print it in your popup doing something like this (again, you'll have to change the target object to be correct
$('target object popup').append('<img src="' + imgURL + '" alt="" class="targetimage" />');
  • This reply has been marked as private.

  • Sorry to bring this one up again but sadly I still can’t get anywhere with it. I’ve altered my approach but still to no joy.

    Ok, for the time being I’ve created a message field with an image in it. The image has an ID of: myImgId

    I then created another message field with the following:
    <p>X:<span id="x"></span></p>
    And a Y message field:
    <p>Y:<span id="y"></span></p>

    I then have a repeater setup which has the following:
    – X (text field)
    – Y (text field)
    – Get Co-ords (message field)

    The Get Co-ords messgae field then contains:

    
<script type="text/javascript">
<!--
function FindPosition(oElement)
{
  if(typeof( oElement.offsetParent ) != "undefined")
  {
    for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
    {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
      return [ posX, posY ];
    }
    else
    {
      return [ oElement.x, oElement.y ];
    }
}
function GetCoordinates(e)
{
  var PosX = 0;
  var PosY = 0;
  var ImgPos;
  ImgPos = FindPosition(myImg);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY)
  {
    PosX = e.pageX;
    PosY = e.pageY;
  }
  else if (e.clientX || e.clientY)
    {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
    }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
  document.getElementById("x").innerHTML = PosX;
  document.getElementById("y").innerHTML = PosY;
}
//-->
</script>

<script>
function GetUrlValue(VarSearch){
    var SearchString = window.location.search.substring(1);
    var VariableArray = SearchString.split('&');
    for(var i = 0; i < VariableArray.length; i++){
        var KeyValuePair = VariableArray[i].split('=');
        if(KeyValuePair[0] == VarSearch){
            return KeyValuePair[1];
        }
    }
}
</script>

<script type="text/javascript">
<!--
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
//-->
</script>

<script type="text/javascript">
function copy()
{
	var n1 = document.getElementById("x").innerHTML = PosX;
	var n2 = document.getElementById("y").innerHTML = PosY;
	
    field_key-field_526940f87b5b1.value = n1.value;
	field_key-field_526941047b5b2.value = n2.value;
}
</script>

<input type="button" value="copy" onClick="copy();" />

    The idea is that whenever you click a point on the image, the X and Y values are shown in the 2 respective message fields. On the repeater, you simply click the Copy button that is now shown and the values are copied into the respective input fields.

    Unfortunately, it simply doesn’t do this and I can’t see why.

    Any help is much appreciated
    Thanks

  • Hello. You got resolve that problem?

  • hi @trasek

    This is a very old post so I’d recommend you to create a new topic and if this one is related link to it from the new topic 🙂

    thanks!

  • I created on my own my script what help me with creating repeater field to this. Thanks!

    P.S. i don’t like creating new posts if we got one created;)

  • Trasek… mind sharing? I’m trying to do the same thing…

  • This reply has been marked as private.

  • Hi, maybe You can show some full code about this stuff? I creating one system where must be places spliced by divisions. Each division can have several floors, to which will be assigned maps with placemarkers.

    Can You help me somehow? Will be cool, to see yours code adopted to acf fields…

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Create Image Mapper/Hotspot with repeater’ is closed to new replies.