0

Happy holidays everyone.

Hope someone can help me in thinking about a problem I've run into.

I have a plugin Im building that allows the user to pull address data from the maps API - ie it validates an address and if it is a business, pulls the marker icon, address details, web link etc. and builds a shortcode to render the map on the front end. At the moment the shortcode is being built and result previewed via a tinyMCE modal window.

Creating the map marker content (marker info bubble) is what is causing me greif. I wanted the user to be able to add or manipulate the content of this block, but the net result is a fair amount of markup.

So far I've tried to pass the generated markup though one of the shortcode attributes like so:

[my_gmaps id="map" z="11" w="100%" h="300" scrollwheel="false" maptype="ROADMAP" address="Southampton, United Kingdom" marker="true" markerimage="http://anachronistic.local:9102/wp-content/plugins/_TomRush/inc/js/TinyMCE_additions/modal/../img/icons/music_folk_map.png" infowindow="<div class="marker inside"><img class="marker icon" alt="" src="http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png" /><strong>Southampton</strong><br>Southampton, UK<br><span class="marker extras">Some User Note</span></div><a class="marker jumplink" href="https://maps.google.com/maps/place?q=Southampton&amp;ftid=0x48738957be152909:0xa78c5a6a4cda71f0" target="_blank">external map</a>" ]

What I've found (probably no surprise to you all) is that the visual editor wreaks havoc on the shortcode, especially the infowindow atribute, adding line breaks and stripping the <br> tags for starters. I want the user to be able manipulate the marker content but this isn't a tenable solution.

How can I pass this information without the editor mangling it? Is this where I need to learn the transients API or should I consider another approach?

Many thanks in advance for your experience.

|improve this question
1

You have quite a bit of markup for that shortcode. Trying to pass all of that as a shortcode is going to be trouble. I pulled it apart to look at it.

  1. id="map"
  2. z="11"
  3. w="100%"
  4. h="300"
  5. scrollwheel="false"
  6. maptype="ROADMAP"
  7. address="Southampton, United Kingdom"
  8. marker="true"
  9. markerimage="http://anachronistic.local:9102/wp-content/plugins/_TomRush/inc/js/TinyMCE_additions/modal/../img/icons/music_folk_map.png"
  10. infowindow="<div class="marker inside"><img class="marker icon" alt="" src="http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png" /><strong>Southampton</strong><br>Southampton, UK<br><span class="marker extras">Some User Note</span></div><a class="marker jumplink" href="https://maps.google.com/maps/place?q=Southampton&amp;ftid=0x48738957be152909:0xa78c5a6a4cda71f0" target="_blank">external map</a>"

Here is how I would approach it. Of your features, it should be possible to dynamically generate #1, so it can go. I can't remember what 'z' does so we'll skip it. #4 and #5 could be a single value, say 'size', and take the "150x150" format designers are familiar with, but that is minor. If a plugin is building it it probably doesn't matter much. If people were expected to write this stuff in it would. You can allow percentage sized by checking for a "%". #9, markerimage, can be hard-coded. You aren't expecting users to pick that file path, right? Hence I assume it doesn't change. Just toggle it based on #8, marker. Any other static items should be hard-coded as well. Most of #10 looks to me like it can be hard-coded. I don't see the need to try to pass all of that markup. In fact, the only changeable part looks like maybe the location part-- the references to Southhampton, which can be pulled from #7 and filled in. With that in mind, your shortcode looks like:

[my_gmaps z="11" size="100%x300" scrollwheel="false" maptype="ROADMAP" address="Southampton, United Kingdom" marker="true" ]

Maybe you need a way to have the user edit "Some User Note". Put that in the shortcode "content".

[my_gmaps z="11" size="100%x300" scrollwheel="false" maptype="ROADMAP" address="Southampton, United Kingdom" marker="true" ] User notes [/my_gmaps]

The rest can be handled when the shortcode is processed, or so it looks to me. If you do need additional configuration than I have allowed try to pass key elements. This 0x48738957be152909:0xa78c5a6a4cda71f0, instead of this https://maps.google.com/maps/place?q=Southampton&amp;ftid=0x48738957be152909:0xa78c5a6a4cda71f0. You know part of that is going to stay the same-- at least this part, https://maps.google.com/-- no need to pass that around.

Basically, the idea is to pass only the parts that change and strip out/hard code the rest, like passing parameters to a function. You pass the necessary parts and let the function build/do the rest. You wouldn't pass everything to a function and have the function essentially just concatenate the parameters, right? It is easier to just concatenate the parameters.

I don't think the right approach is to try to protect the markup as it goes through the shortcode, but instead rethink how the shortcode works so that it doesn't have that problem in the first place.

I am curious, if your plugin is building this shortcode, why build the shortcode at all? Why not have to plugin just build the working map markup instead?

|improve this answer
  • s_ha_dum, fabulous write up. – orionrush Jan 8 '13 at 20:48
  • Sorry for the late reply - Holidays took me by storm (literally in some respects). I'll follow your advice and break up the parameters as you've suggested. I was just hoping that there might be another way to go about it. Basically the maps API can grab a bunch of unknown items like ratings etc if they exist for the location in question. I just hoped I could get the output at the preview stage, without the plugin having to make another request later (or each time it was called). – orionrush Jan 8 '13 at 20:54
  • I don't understand. A shortcode runs on display so it is pretty much always "when it is called". – s_ha_dum Jan 8 '13 at 20:57
  • Yes in some ways but it need not call the google API for marker data each time. Consider: a) at the preview stage we ping the API and pull associated address, content, images, ratings etc. and store that content/markup in the database for later use (ie we just add that content to a marker in the map - no api call needed) or B) only store the address and make a new api call each time the page is loaded. Option 'B' will, I believe be significantly slower. This is why Im still considering the WP transients API to store the details rather then shoving them explicitly as parameters in the shortcode – orionrush Jan 9 '13 at 23:27
  • I don't know what the "preview" stage is that you are talking about but you should be able to store most of the data as a transient the first time it is called. I don't know why breaking up the parameters prevents that. – s_ha_dum Jan 9 '13 at 23:32
1

Probably safest to put HTML content in as the "content" of an enclosing shortcode, not one of the "attributes":

[my_gmaps ...] HTML here [/my_gmaps]

Then access that block as the second parameter to the shortcode function:

function my_shortcode($attrs, $content) {}
|improve this answer
0

Another possibilty that I ultimatly came to in my situation is to md5 hash to content to be passed through the shortcode, and have the plugin itself can decode it. I have a gui that is generating markup from users, which I cant really know in advance. By hashing it first, I dont run into that markup breaking wordpresses text entry feild. Of course you wouldn't expect people to do this mannually. To be nice, I offer an alternative parameter that allows easy direct entry, but strips any markup.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.