benjaminsterling.com

One of the features I am being asked for lately from clients is to have an events manager created for them.  The requirements vary from project to project but there are quite a few items that they seem want.  Since I mainly deal with WordPress for these project I figured that there must be a plugin already create that will fit the bill and I have search the web and found many versions of a events manager, but none of them seem to just work.

With that said, I am looking to build one, I already have a decent footprint down but I know there are many features that should be included.  Mind you, they should not all be turned on at first, but the end user should be able to turn some on and some off to fit their needs.

So my question to you is, what features would you like to see in a WordPress Events Manager plugin?  I have quite a few ideas myself but I don’t want to taint your opinion.  Leave your comment below and lets discuss.

If you are interested in helping in anyway, let me know and maybe we can sync up.

I am pleased to another WordPress plugin geared toward improving the functionality and usability of WordPress’ admin area. This plugin will extend the functionality of the richtext editor to include the ability to browse thru all your images that have been uploaded to your WordPress install.

Feel free to check it out at Image Browser Extenders page and download it from the WordPress extend site.

Some screen shots to hold you over:

Today I present to you my newest release, a WordPress plugin that adds/extends the functionality of the richtext editor for editing post and pages call Editor Extender.  Fancy name huh?  I am not very creative with my names but I am however creative with my code.  I’ve been using this plugin in probably about half of the websites I have built using WordPress as its CMS.  Most of my clients needed the table feature or they wanted a button to click to give a line break, enter in dates and so on.

With this plugin adding functionality has become a simple as clicking a few check boxes, no need to fuss with code.  Go ahead and check out the plugins page or download it from WordPress.org.

Lately I have been do a ton of development with WordPress for use in a few websites as CMS - which I will be doing a few post on at some point - and I found using the Media Library to be a bit lacking. Not to bash anyone but there just seemed to be some very basics things that were over looked.

One of which was the ability to update the files you posted, you can edit the titles and captions, you can event delete the file but you can’t upload a new version of the file. You would need to delete and repost the file which is a process not easily communicated to a customer or a wife using WordPress. So I create the Attachment Manager to fill that void. What it gives you is the ability to re-upload a new version of a photo or a pdf or what ever you are trying to update without cause a bunch of hardships.

You can grab yourself a copy over at http://wordpress.org/extend/pl.....-extender/ and checkout http://benjaminsterling.com/wo.....-extender/ for instructions and feedback.

Well ladies and gents, it is finally here! Mark June 9th, 2008 as the day the web got better, jQuery’s long awaited release of it’s UI library update is here. Flushed with many bug fixes, a bunch of really good examples, many new features and a theme builder.

When jQuery UI first came out it was huge, but with as huge as it was the list of issues with it were also pretty big. The months since it’s initial release the UI developers have been working tirelessly to squash these bugs and add better cross browser support for IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+.

The problem I have had in the past is envisioning just what a library can do and now with the new release you can see some really good examples of what jQuery UI can do. You need the initial structure to build an image cropper? How about an image manager with drag and drop capabilities? You like the Apple slider gallery and you want it for yourself? All these and more are now available for your consumption.

At the same time they were able to merge in the jQuery Enchant library which was a library to compete with Scriptaculous. Scriptaculous has always provided great effects to Prototype users; something jQuery was lacking and consistently was one of the issues brought up about jQuery. With having Enchant merged into jQuery UI the proverbial playing field is now level.

But since jQuery is not one to sit on its hands, they took it a bit further - with the help of Filament Group in Boston - and developed a theme builder. If you are like me this is huge; trying to got thru the code to make changes to a component to get it to look like the design I am working on can be a pain. With the theme build you simple select the colors and style you want, click the “Download This Theme” link and you are on your way.

All in all the jQuery UI team have been very very busy and have really done a great job with this release. I want to send out a personal thank you to the jQuery and jQuery UI developments teams for the hard work they put in to the jQuery and jQuery UI libraries. I also want to put a thank you out there for the Filament Group in Boston and LIFERAY for their support and contributions to the jQuery community. It is really great that they stepped up and helped make something good great!

Full release notes can be found at the jQuery blog.

Today I had a need to get all posts between to dates in WordPress, between now and a year ago. After searching and searching I could find the answer I needed. So I decided to just write the query myself which I have done many times before but not with WordPress' database scheme.

Below is the code that I used, basically I need to grab all posts from a particular category, in this case category 3, and I also needed the posts to be between today's date and this date last year. Some help came from this post here.

Well, here it is:

On April 9th I had given a jQuery Presentation on the basics of using jQuery and how to punch up your site with some minor animations. All in all the presentation went over well and I got a lot of good questions. Since my days at UPS I've never been real good at creating Power Points to give my presentations. I've always been better at just showing, planning what I want to talk about and then just letting the presentation flow. Which can be good and bad depending on if the crowd asks questions. With that said, I did not create any Power Points slided, but since a got a good amount of emails asking me to post them, I decided to just create a screencast that covers everything we went over, answering the questions that were asked during the presentation.

So without rambling on anymore, here is the presentation screencast.

As you very well know by now, I have created quite a few and the ultimate goal was to allow them to be as unobtrusive as possible. Well, the other day I got into a discussion with a co-worker and the questions he asked were, "How is that unobtrusive?", referring to my , "The images are in list elements?" My answer to that was, "They can be styled to have each list element float and punched up a bit." His rebuttal, "But what if styles were off also?" I hesitated for a second and he knew he had won this conversation and silently walked away.

The purpose

So the purpose of this post is a) show you how to build an unobtrusive image gallery or photo gallery, how ever you want to say it, and b) show you have to create a jQuery plugin.

Step 1

So what I am going to do here is show you have to create an unobtrusive image / using a, "gasp," table. Why a table? Tables are so 1.0? Well, the definition of basically breaks down to, if the user has JavaScript AND CSS off, the gallery should still work and be laid out as planned.

Below is the structure we are going to start of with; nothing fancy, just old fashion html. Each image sites in a cell of the table which we can control the basic look by adjusting the cellpadding or cellspacing attributes.

Current progress

I am using the caption element to give the gallery a title, you could have simply done the below as well:

Step 3: The Style

Since we are planning for this gallery to still look good if JavaScript is turned off, we are going to need to give it some style, make it pretty. At this point, you are only limited by your imagination and, well IE 6, but that should never hold you back. That is another topic for another day.

We are going to keep it simple and just add some very basic styles:

Current progress

As it stands now, you can leave well enough alone and for the most part, people will be happy with your creation. They have a simply style, low bandwidth, accessible and functional photogallery that will do exactly what you want, display images and open an image when clicked.

But lets, kick it up an notch and add in the JavaScript; enter jQuery and the beauty of plugins.

Step 4: The JavaScript and the framework that we love, jQuery

For those who don't know what jQuery is, it is a JavaScript framework that helps you "write less, do more." Have a look over at http://jquery.com for more info.

We are going to create our plugin now that will take our current gallery and spice it up.

The basic pattern for a jQuery plugin is as followed:

Here we are using closures, I am not an expert, so I'll post some links at the bottom to other resources to help you understand why we are using this structure. But this is the structure we will be using for our plugin. What I can tell you is that the return this part of the code makes this plugin chainable.

We are going to keep this very simple, so we will not be passing any options or are we going to be creating any really complex situations.

What we are going to do is create some structure, get some data, and add some functionality.

The Variables

We will start out with creating some variables for use through-out our plugin:

The purpose of "var element = this;" is to keep us from getting confused when using this in other parts of the code.

The purpose of "element.index = index;" is for if we have more then one gallery on a page we will be able to reference the correct one if needed.

The purpose of "var $this = $(this);" is so that we don't have to do $(this) multiple times slowing down our plugin. This way, we can do $this.Method() and jQuery will not have to keep looking for what this is.

The purpose of "var $img = $('img', $this);" is to create a reference to all the images that are within our element.

The Structure

Our structure is going to be very simple and will look like:

With the DIV of "imageItem" having the same count as the images in your default gallery.

Why not just use the structure that is already created with the table? I personally feel you get more flexibly to style the Gallery and really punch it up by restructuring the gallery.

Lets get to building this structure:

The Thumbnails

Next up is getting our images and their respective links and then add our click event:

Ok, what do we have here, line 1 we start to loop through our images, line 2 setting a reference to the jQuery object for the image.

Line 3 is a reference to this.
Line 4 is our index
Line 5 is our reference to the link url

Line 6 and 7 is the height and width, this could be done a different way by create a new Image and creating a onload event where you grab the height and width and have the option to have a "loader" animated gif or notice text. I did nether to keep this as simple as possible.

You will notice starting at line 9 that I am using what is called chaining, this is a process of linking one method to another. But also notice that I put the new methods on separate lines. Why would I do this when I could have chained the one right after another? Because you actually need to be able to read your code. Although chaining is great and you can chain a ton of methods one right after another after another, if you can't follow what is going on, it is pointless.

You will see at line 9 I am using the clone(), this allows me to quick duplicate the DIV that I created in my structure code.

Line 10 I am appending the image to the newly cloned DIV and at line 11 I am appending both to the container that is housing our thumbnails.

At line 13 I bind a click event, which can also be done by doing $(SELECTOR).bind('click',function(){});, to the thumbnail.

Inside that click event at line 14 I take the reference to the larger image and set the src to the full url that I collected at line 5. But notice that I am using the .get(0) method with the .src attribute and not doing $(SELECTOR).attr('src',img.fullurl);. Why did I do it this way? To show you another example of the flexibility of
jQuery. JavaScript has a ton of built in attributes for each DOM element and using $(SELECTOR).get(0) is more or less the equivalent of getElementById. The 0 is referencing the first element found, so if you want to get the fifth element found, you can do .get(4).

Lets take a look at our Current progress. (note: this is unstyled and will just be a single column of thumbnails with the larger showing up at the bottom when a thumbnail is clicked. We will cover the styling in another post because there will be more then style that will need to be done.)

What you will see in the final example is just a list of thumbnails and once clicked you will see the full size image appear.

The Follow-up

I know I covered a lot and I was trying to keep it as simple as possible, so let review what we did. We create a basic photogallery using basic (x)Html and styles that will work fine if JavaScript is turned off or if a Screen-reader was used to view the photogallery. We then took that gallery and with the help of JavaScript and jQuery we created a very basic photogallery and a reusable jQuery plugin. We learned how to use some of jQuery's basic methods to grab an element and do something with it.

What we did not do is actually quite a lot. We did not add styles. We did not add any indicators that an image is loading. We did not resize the large image to fit with in a confined area. We did not create any preloading code that will preload the next large image in our list.

The Closing

I will be writing another post that will take care of our "We did not do" items. The purpose of the post was to show you how to build your own plugin and even how to build an effective photogallery.

The may be some items that you don't understand or would like me to elaborate on, feel free to let me know what those items are and I will try to clarify.