I've been doing a couple of projects with the Concrete5 CMS recently and it's a joy to use! The template I implemented was designed for the iPad (more on that in another post) so one of the UI elements I wanted to include in the template was a Back button in the header. This would provide an easy way for the user to navigate out of sub-pages within the site. 

I sought a little guidance at first and found some good advice in adding breadcrumb navigation in a Concrete5 site.

First of all, add the following lines at the top of your template default.php file right below the defined() function:

$page = Page::getByID($c->getCollectionParentID());
$parent_url = View::URL($page->getCollectionPath());
$nh=Loader::helper('navigation');
$breadcrumb = $nh->getTrailToCollection($c);

Then add the following lines in the place where you want your back button to appear.

if (count($breadcrumb)>0) {
echo 'Back';
}

This code should show a back button whenever you navigate past the home page of the site.

I had an odd bug at work the other day. In one of our data reporting systems, the text content for one report was rendering to the browser just fine.  But when the same report was exported to PDF using ABCpdf from WebSupergoo some characters were all mangled as shown in the following screenshots:

The messed up PDF output

The correct browser rendering

Well what to do?  I didn't even have any idea what the bad characters were but I suspected that they were some sort of UTF-8 abomination of double/single quotes or something of the sort.  So here's what I did...

• Copied a portion of text from the browser containing the offending character, and pasted into Notepad++. Notepad showed me immediately that the character was an odd apostrophy looking thing.
• Browsed over to a nice little Unicode Converter and pasted the odd appostraphy looking thing into the converter input field and clicked Convert.
• The conversion showed me that the decimal code for this particular character is 8217. There were a couple of other characters with decimal codes of 8221 and 8220 (UTF8 left and right double quote characters).

Ah, now we have decimal equivalents for our stange characters.  This might be good - where to next?  Well, the Replace function sounds like a good bet so I tried...

Text = Text.Replace(Chr(8217), " ' ") which should have replaced the UTF8 appostrophy with the ASCII apostrophy.  It didn't ... WTH???!?

After a little more poking around I found out that we need to use ChrW() for character codes in the range < -32768 or > 65535 as described here. Now that we have the right function, our line becomes...

Text = Text.Replace(ChrW(8217), " ' ")

Success!!!! Yeah! Our funky UTF8 apostrophy character now prints as an ASCII appostrophy in our PDF prints.

Thanks for reading!

I've been using a really nice file uploader called Plupload for a couple of years now.  It's produced by the same guys that built TinyMCE, it's licensing is cheap and easy, and standard implementation isn't too hard. 

What I wanted on my latest project however isn't easily underrstood by looking at the Plupload examples on the site.  I wanted a simple drag and drop file uploader like Gmail and Box.net are using.  Just a panel onto which you drop files from your OS file manager, then they upload - nothing too fancy but very practical. 

Before we get into the code, let's see a quick screencast of the uploader in action.

This first chunk of code initializes Pluploader.

var uploader = new plupload.Uploader({\n            runtimes : 'html5',\n           url : 'http://mysite.com/js/filemanager/uploadFileHandler',\n            max_file_size : '500MB',
            flash_swf_url : flashDir+'plupload.flash.swf',
            silverlight_xap_url : flashDir+'plupload.silverlight.xap',
            button_browse_hover : true,
            drop_element : "dropFilesHere",
            autostart : true,
            container: "fileUploadingContainer",
            chunk_size: '1mb',
            unique_names: false
        });
        uploader.init();

Runtimes specifies which runtime(s) you want Plupload to use...available runtimes are HTML4, HTML5, Flash, Silverlight, Gears. Drop_element is the id of the div that you want to be the file drop zone. Container is a div that wraps the drop_element div. Make sure that autostart = true.

This next bit of code renders the file names, sizes, and progress bars when the files are dropped onto the drop zone.

uploader.bind('FilesAdded', function(uploader, files) {
            var renderString = [];
                
            $.each(files, function(i, file) {
                renderString.push('
');
                renderString.push('
'+file.name+' '+plupload.formatSize(file.size)+'
');
                renderString.push('');
                renderString.push('');
            });
            $('#dropFilesHere').html('').append(renderString.join(''));
            uploader.refresh();
            uploader.start();
        });

This last bit changes the size of the progress bar and resets the drop zone after all files have been uploaded.

uploader.bind('UploadProgress', function(up, file) {
            var $fileWrapper = $('#' + file.id);
            $fileWrapper.find(".plupload_progress").show();
            $fileWrapper.find(".plupload_progress_bar").attr("style", "width:"+ file.percent + "%");
        });

        uploader.bind('FileUploaded', function(up, file) {
            var $fileItem = $('#' + file.id);
            $fileItem.fadeOut('fast');
            $('#dropFilesHere').html('Drop files here');
            $('#dropFilesHere').removeClass('hover');
        });

And that's it! One last thing...to make the drop zone change it's style when you drag files over it, you need a bit more stuff.

$('#dropZoneId')
        .bind('dragover drop', function(e) {
            $(this).addClass('hover');
            e.preventDefault();
        })
        .bind('dragexit', function(e) {
            $(this).removeClass('hover');
            e.preventDefault();
        });

Go download Plupload, put the files on your server and give this trick a shot.  It's been tested in Firefox, Chrome, and Safari in XP, Windows 7, and OS X.

Thanks for reading!