So last week I was working on my CMS and it can time to sort out images. Like any good CMS I need to give people the ability to add images to their content. In order to do this I had to use a bit more than some jQuery, so having dabbled with some PHP I decided to go for that.
So I had a little hunt about for some basic tutorials and managed to find one over at dreamweaverclub.com. The code was pretty straight forward.
First of all I had to set up my form:
<form enctype="multipart/form-data" action="uploader.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input type="file" name="uploadedfile" />
<input type="submit" value="Upload" />
</form>
This form basically posts back to itself and has a standard file input and a hidden 'max file size' input.
Now for the PHP
$target_path = "Images/".$_FILES['uploadedfile']['name'];
move_uploaded_file($_FILES['uploadedfile']['tmp_name'],$target_path);
So in the PHP code we set the path of where we want the image to be uploaded to. Then we move the uploaded image and there you have it!
So this is a pretty simple file uploader and is pretty unsecure as it stands, but it has given me the basics of what I need to integrate image uploads into my CMS.
Next week I will be having a bash at getting this working properly so it uploads the image then adds it to the content. Stay tuned.
Ok so last week I talked about how I created the control panel for my CMS. This week I'm going to talk about how to wire it up to add elements to the page. I will also cover how to make those elements editable, re-ordeable and deletable.
So first off, I need to wire up the button functions so when you click say H! on the control panel, it adds an editable H1 tag to the page, so here goes.
Using the magic of jQuery, firstly I target the button I want to attach the action to. The code below creates a click function, so when a link with the class of 'heading' is clicked, do something.
$("a.heading").click(function(){
//Do something
});
Next I need it to add and editable H1 tag to the div with the ID of 'post'
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contentditable="true" class="editMe">Heading
</div>
');
});
The code above selects the div with the ID of 'post', then appends to it a div with a class of 'edit' which contains an H1 tag with the attribute contenteditable and another two divs which will act as the 'move' and 'delete' buttons. In essence, that's it, once I repeat the same code for the different tags I want to provide the user with I have the bare basics of a CMS. Obviously this on it's own would never be pratical in the real world so there is more work that needs doing to make it into a viable application.
So lets finish this function up. There are now two things I need to do to finish of this bit of code, first of all I need to add a return false statement because when the link is clicked, I want it to execute the javascript then do nothing else.
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contenteditable="true" class="editMe">Heading
</div>
');
return false;
});
Secondly I need to attach the events to the move and delete buttons so I add in a call to another function called attachEvents
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contenteditable="true" class="editMe">Heading
</div>
');
attachEvents();
return false;
});
Ok so now I am calling that function I need to write it. The code below simply states that when the delete div is clicked, remove it's parent.
$("div.delete").click(function () {
$(this).parent().remove();
})
As for making the items sortable using the simplicity of jQuery I select the 'post' container and make it sortable like so:
$("#post").sortable({handle:'.move', containment:'parent'});
Again, I've given it a handle, the move button and I've contained it to the 'post' div. I hope this hasn't been to confusing, tune in next week to see how I'm getting on.
Ok, so my last post involved me stating I was going to have a bash at making my own CMS system which enables users to create their own content but limits what they can do so all their content stays consistent and beautiful.
So, first of all I had to decide what language(s)/technologies I was going to use to build such a platform and after a quick hunt around on the interweb I came across this HTML5 demo which uses 'contenteditable' http://html5demos.com/contenteditable. After having a quick read, this seemed like a good way forward.
However just using 'contenteditable' wouldn't cut it as I wanted users to be able to add, edit, move and delete content. With this in mind the choice was clear, I would look to use jQuery and jQueryUI, handy javacript libraries which enable you to do cool things like drag and drop with a single line of code.
So I got to setting up my page; first of all I had to give the user a way to add elements to the page, such as Titles, paragraphs, images etc. To do this I created a draggable toolbar which had buttons for each element I want the user to be able to add.
The tool bar has been completley styled with CSS3 to acheive rounded corners, gradients and drop shadows. I'm trying to see if I can do as much of the UI with out using images, so far it's going to plan.
Next I Wanted to let the toolbar be draggable so the user can move it about. Through the magic of jQuery UI this was pretty easy to implement using the following code:
$("#newPost #controls").draggable({handle:'.dragBar'});
So all this code does is targets my controls div and makes it draggable, the 'handle' bit targets a div inside my controls and makes that the drag handle, simple eh?
So next I had to make the buttons in my control toolbar do something, mainly, add an element to the page.
Stay tuned and next week I will reveal how to get editable elements on the page and how to make them re-orderble, editable and deletable.
In our industry more often than not, a client needs to be able to manage the content of their website, cue the CMS (Content management system), a great application giving people the ability to mange and edit their website with needing to have any knowledge of code.
On the surface this is a powerful tool for anyone to have, however there can be drawbacks. Imagine, you wish to create a new page on your website, you use the CMS to create the page, the navigation item for that page and it then comes time o add your content. Most CMS' come with a WYSIWYG editor (What you see is what you get) which gives users control over Fonts, colours, layout, spacing etc. all very high tech and easy to use. The problem is, most people tasked with editing and managing content are not designers, hence they came to an agency to design their site in the first place.
So having all this control over your site can be valuable on the one hand, but on the other when it comes to laying out a content page, many sites, especially over time, can start losing their aesthetic and polish.
This got me thinking if their is a solution to this problem, a new WYSIWYG editor allows users to add content to a page but limits the control they have over these elements and users pre defined styles, spacing and layouts.
A great example of and editor which solves this problem is the Behance Project editor, although they give you control over fonts and colours as this is a tool aimed at designers, it is a very powerful, simple and easy to use editor that anyone would be able to achieve great results with.
So taking all this into account I have decided to try and come up with my own editor which allows users to easily create a blog post but sticks to set style and layout rules ensuring they create a visually beautiful post with no design or technical knowledge.
Keep checking back to see how I get on...
So I bought a nice A5 graphics tablet off of one of our developers Ben the other day and after the novelty of writing my name over and over again in photoshop finally wore off I decided to see what it could really do and think about how it could improve our work flow.
To kick things off I got myself a trial copy of Autodesk’s Sketchbook Pro and started to have a play around. SBP is a basic program for sketching and although it isn't nearly as advanced as photoshop, it is very simple and easy to use and it makes it incredibly easy to just start sketching using your tablet and produces some nice results. I drew the Koi Fish in about 2 minutes, and best of all I didn't have to scan it in and use PS Levels to get it looking alright!
This got me thinking about possible uses for this technology in the studio. At CJ when we get animations in we do storyboards to illustrate how the animation will play out and what will happen. When we do these storyboards they are done by hand, normally by Greg and then scanned in and e-mailed over to the client.
This led me on to thinking if we did use this technology for storyboards, perhaps eliminating the need for scanning would encourage us to do a lot more sketching, and in my view this is no bad thing, as someone from Tricky Business once said at a user group, it's a lot easier to change a sketch than it is to change a photoshop file!
So I figure if we were all to do far more sketching at the early stages of a project and get everything laid out on paper (so to speak) before we even start designing then we could save ourselves a lot of back and forth between us and the clients and save ourselves a lot of time spent tweaking PS files here and there.
My thoughts - Get ya tablets on and start sketching!
we scored another seminar for early next year with the guys from NxtGenUG
Simon and I will do another whirlwind tour of the Blend tools, wiring up the C# to make it all dynamic
Sign up and come see us in action
http://www.nxtgenug.net/ViewEvent.aspx?EventID=176
Hope to see you there, we're booked for Janurary 19th so plenty of time to get signed up
So, IE6 is a pretty out dated browser and amongst other things doesn't support PNGs. Unfortunately there is still a percentage of people using IE6 so we still need to support it which can be a real bummer when the only way to successfully execute your design is to use PNGs for transparency.
Well there are a few solutions out there which will do the trick, however the one we have recently been using has a few issues which limits it;s abilities, mainly the lack of being able to repeat background PNGs, and a few issues with Z-Index of links.
Today Rob pointed me in the direction of a new PNG fix which is real easy to implement. You can download the script here.
All you have to do is put the JS file somewhere in your solution along with a blank GIF file and then call the script from any page using PNGs using the following bit of code:
<!--[if lt IE 7]><script type="text/javascript" src="unitpngfix.js"></script><![endif]-->
As long as all your paths are set correctly you should be up and running!
I stumbled across an issue today when using this script but Rob managed to fix them up pretty easily. The problem I discovered today was as soon as I put a link on an image, the image wouldn't render, but as discovered by Rob all you need to do to fix this is on all your PNGs simply put display:block and everything is back to normal!