CFPro - ColdFusion Developer

I think it is at a point where I can let people have a play with this plugin. I don't think it is 100% complete but it is pretty good as it is.

Download gmap.zip here

Download the plugin and activate it in Mango Blog. * Requires the jQuery Plugin!

In Posts or Pages you can use the tag [ gmap] and [/gmap ] (Without the spaces) to wrap the variables for your map.

The allowed variables are:

• Address: *REQUIRED* Can be an Address, Town, Postcode or Geocode
  • Address is the location of the marker and the centre of the map
• Zoom: Can be an integer between 1 and 20
  • Zoom is the zoom level of the map
  • Defaults to 12
• MapType: Can be ROADMAP, SATELLITE, HYBRID or TERRAIN
  • MapType is the type of map that is displayed first
  • Defaults to ROADMAP
• Label: Can be contain any text other than a |
  • Label is the Text shown in the infowindow when the user clicks on the marker (HTML cannot be used!)
  • Defaults to the Address Variable
• Height: Can be declared as px or a %
  • Height is the height of the div the map is contained in
  • Defaults to 400px
• Width: Can be declared as px or a %
  • Width is the width of the div the map is contained in
  • Defaults to 90%

Variables should be defined with a semicolon e.g. Zoom:12

Variables should be seperated with a | (pipe) e.g. Zoom:12|MapType:ROADMAP

Only the Address variable is required to display a map! An example of the simplest form the gmap tag can take would be

[ gmap]Address:SY45JD[/gmap ]

An example of the full tag could be

[ gmap]Address:SY43RR|Zoom:8|MapType:TERRAIN|Height:500px|Width:95%|Label:The office in Myddle![/gmap ]

* All examples have an additional space in the [ gmap] tag which will need to be removed to show the map!

After seeing how useful and powerful a full Google Maps plugin could be I decided to spend a bit of time on improving the code over the basic setup I had a few days ago.

I have now changed the format of the code required in the post so I could separate up all the possible variables. I have decided on a [ gmap] opening tag and a [/gmap ] closing tag. All the variables are going to be listed within these tags  in a | separated list.

So far the variables I am accepting are:

• Address: *REQUIRED* Can be an Address, Town, Postcode or Geocode
• Zoom: Can be an integer between 1 and 20
• MapType: Can be ROADMAP, SATELLITE, HYBRID or TERRAIN
• Label: Can be contain any text other than a |
• Height: Can be declared as px or a %
• Width: Can be declared as px or a %

Can anyone suggest anything else I should add to make this a very usable plugin for Mango Blog?

I have been asked to show how I have used the 960Grid CSS framework in my Mango Blog skin. If you understand the 960Grid principles then it is really quite easy.
960Grid is only a framework for laying out content, it is not going to style your site or blog for you.

Here are the basics.

You start with a container Div, give it the class of the grid columns you want. You can choose from 12, 16 or 24. For a 12 column grid (like I am using here), the class you would use is be "container_12". The container Div is always made to 960px wide which is perfect for 1024 screen or bigger. If you want a fluid design then I am afraid you are going to have to look elsewhere! I believe there are a few around but may not be as quick and easy as 960Grid.

Anything contained within the container Div can now be put into the grid format.

To get a 2 column layout you would use something like:

<div class='container_12'>
  <div class="grid_9">...</div>
  <div class="grid_3">....</div>
  <div class="clear"></div>
</div>

Where “grid_9” sits on the left and is 9 columns and 700px wide. “grid_3” is next (and last) as is 3 columns and 220px wide. Each grid has a 10px margin on the left and right.
Take a look at http://960.gs/demo.html for a better idea of how the columns work. When you reach the end of the grid row you must clear all floating elements to start the next row.

To put the framework into my Mango Blog skin I added the stylesheets that are downloadable from their site and have used the code below:

Link to the stylesheets:

<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/960.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/text.css" type="text/css" media="screen" />

Add the classes to your layout:

<mango:Event name="beforeHtmlBodyStart" />
<div id="container" class="container_12">

    <cfinclude template="header.cfm">

    <div id="content_box">
    
     <div id="content" class="posts grid_9">
        <!--- Mango Blog code for the page --->
     </div>

     <div id="sidebar" class="grid_3">
       <ul class="sidebar_list">
          <!--- Mango Blog code for the sidebar. --->
       </ul>
     </div>    


    </div>
    <!--- footer.cfm includes a <div class="clear"></div> to start a new row --->
    <cfinclude template="footer.cfm">
</div>
<mango:Event name="beforeHtmlBodyEnd" />

At some point I may release the skin, but until then I hope this helps some people start building their own skins with 960Grid.

After looking around the web I couldn't find a Google Maps plugin for Mango Blog for easily putting maps into pages and posts. So for my first Mango Blog plugin I have started putting together a basic Google maps plugin, which I will release once I have got it working how I want it.

The initial idea is to accept the command

[gmap:(latitude,longitude)]

in the content and embed the map to replace it. (Similar to the youTube Plugin)

I am using the regular expresion:

refindnocase("\[gmap:((\+|-)?[1-9][0-9]*(\.[0-9]*)?),((\+|-)?[1-9][0-9]*(\.[0-9]*)?\])", 
   data.content, 1, true)

So far it is working quite nicely to show my home town of Bridgnorth:

I have used this example to learn how some of the Mango Blog plugin architecture works. I may make this plugin more complex as and when I need it.

I would like to start off by saying that I am a coder, not a blogger. So if the content of this blog gets a bit sparse as time goes on then is it not because I have stopped coding in ColdFusion, it will either be that I got bored of blogging or I was too busy working to put any time into writing posts.

I really set up this blog for a record of what I am working on or any little tricks or bits of code I discover.

The first thing to say in the blog is how good I think Mango Blog is! It's really easy to work with, set up new themes and add/edit and create plugins. This site has been set up using lots of the existing plugins out there. This is really just to demonstrate what it can do.

I have started the skin pretty much from scratch. The theme is set up using the 960Grid CSS Framework which I have only just started getting into using and I can't believe I haven't tried it out before! 

The 960Grid layout code is so simple, this site is basically just:

<div class='container_12'>
  <div class="grid_9">...</div>
  <div class="grid_3">....</div>
  <div class="clear"></div>
</div>

And thats all there is to it!