My first stop, Google, yielded no fruit, but persistence paid off.  So, thanks to GD-Star Ratings and Shadowbox-JS, I finally figured it out!

And now, for your coding pleasure, here’s the step-by-step:

Steps for Showing Settings Link

1. Add a function that injects your link into the links array.  The array_unshift adds your link to the front of the array.  The $this_plugin wizardry is determining whether this instance of the filter is being called for your plugin or another one.  You only want to add the link to your plugin .  Here’s the code:

/**
 * Add Settings link to plugins - code from GD Star Ratings
 */
 function add_settings_link($links, $file) {
static $this_plugin;
if (!$this_plugin) $this_plugin = plugin_basename(__FILE__);

if ($file == $this_plugin){
$settings_link = '<a href="admin.php?page=bwb-photosmash.php">'.__("Settings", "photosmash-galleries").'</a>';
 array_unshift($links, $settings_link);
}
return $links;
 }

Of course, you’ll need to change the page link as appropriate.  The easiest way to get that is to go to your plugin’s settings page and copy it from the URL.  You want everything after the last forward slash “/”. Screenshot!

2. Add a filter for the plugin_action_links filter. When the Plugins page is displayed in Admin, this filter will pass your function the links array.  Here’s the code:

add_filter('plugin_action_links', array(&$bwbPS, 'add_settings_link'), 10, 2 );

Note this part:  array(&$bwbPS, ‘add_settings_link’)

If you’re putting your function inside a class, you need to use an array as a parameter, with your plugin’s instance variable…mine is $bwbPS.  The “&” in front of the instance variable tells it to use the instance by reference (which I believe is automatic for objects anyway, but just do it ).  The part after the ‘,’ is the function name we’re calling.  You can name it whatever you like.

If you’re not placing your function inside a class, then you’re code will look like:

add_filter('plugin_action_links', 'add_settings_link', 10, 2 );

But you’re going to want to make sure your function name is totally unique in the whole WordPress world.  Otherwise, POW!  Namespace collision.

Hope that helps!  It’s easy, and it’s so very helpful to have that link there.  I just love a plugin that has it because I don’t have to search for it in the sidebar, and secondly, I figure that the coder must know what he/she’s doing

Cheers,

Byron

The problem we often run into is that not everyone plays by the rules, and so you get plugin conflicts and fatal errors!

In this tip, I’ll show you how easy it is load scripts the right way with wp_enqueue_script and also, how to load them on only the pages you want.

Load Scripts the Right Way with wp_enqueue_script()

I have a couple of plugins out there that use jQuery and Thickbox, and probably 30% of my support questions are related to themes and/or plugins that load jQuery by hardcoding the link into the header!  This is a major sin by developers, because it assumes that your theme or your plugin is the only one in the whole wide world that your users will be using that rely on jQuery.  

When the jQuery (or really any other script) is hardcoded by a theme or plugin and it is loaded by another plugin (right way or wrong way), jQuery stops working!

WordPress, thankfully makes it amazingly simple to load jQuery and a ton of other scripts.  Here’s how:

<?php
//To load a script that isn't already registered with WordPress (it has a ton of pre-registered scripts like jQuery, Thickbox, etc)
wp_enqueue_script( $handle, $source, $deps, $ver, $in_footer );

//Here's one loading a script that's in my template folder
wp_enqueue_script('stlouie',get_bloginfo('template_url') . '/js/stl.js');

//Here's one loading a pre-registered script
wp_enqueue_script('jquery');
?>

Check out the WP Codex page for a full description of how to use wp_enqueue_script and a list of the pre-registered javascripts that you can easily use.

Note: I was trying to use wp_enqueue_script with TinyMCE outside of the Admin, and it didn’t work.  So, some scripts might be Admin Only…not sure

Where to Use wp_enqueue_script()

If you want to use wp_enqueue_script() in your posts and pages, and you want to limit it to certain pages or posts, you can put the following in your theme’s functions.php file:

<?php
add_action('wp_print_scripts', 'enqueueMyScripts');

function enqueueMyScripts(){
  // To load a script only on a Page with ID = 23, follow this format:
    if( is_page('23') ) {
         wp_enqueue_script( 'myscript', get_bloginfo('template_url') . '/js/myscript.js');
   }

  //To load for any page/post that's not Admin
   if( !is_admin() ){
        wp_enqueue_script( 'myscript', get_bloginfo('template_url') . '/js/myscript.js');
   }

  //You can use pretty much any of the WP conditional tags to determine whether to enqueue or not
}
?>

Here’s the link to the WP Conditional Tags.

Notice that you need to tap into the wp_print_scripts action instead of the ‘init’ action since is_page() is not available yet in the init action.

I’ve recorded this because it took me a good bit of time to figure out to use wp_print_scripts instead of init…Placing the add_action() inside header.php didn’t work either. Vladimir Prelovac’s helpful post put me on the right track…He also has a great book,WordPress Plugin Development (Beginner’s Guide)*! This book was very helpful to me with several techniques, particularly around adding images to the WordPress media library.

Cheers,
Byron

* Note: the link to Vladimir’s book is my affiliate link, and I’ll receive a small commission should you click and buy.

Finally, I have my new plugin working, I think!  It gives you an interface in the Admin for setting up your ReWrite Rules and then handles all the rest behind the scenes.  I’m not sure how robust it is, but it meets my needs.

I had 2 humongous problems that ate up 10 hours or more of my time.  Hope this helps you if you decide not to go the easy route and just you Smashly ReWriter (coming soon to a download near you!).

Page ID, ID, Post ID, PageName, P

The aliases for getting a page to come up in WP are nearly endless.  But when using $wp_rewrite rules, you have to be careful.  While index.php?page_id=245 might work for a post if you type it into a browser, save yourself, oh, about 6 hours and make sure you match up Pages with ?page_id= and Posts with ?p= when creating rewrite rules.

& or & ?

Save yourself another 4 hours and don’t try to get fancy and write your urls the way you think they ought to be to be XHTML compliant…that is, using & to join multiple query variables.  Sometimes it doesn’t pay to be too proper.

A good xhtml url would have parameters inserted like:  state=NC&city=CLT

WP Rewriter wants it just plain ole:  state=NC&city=CLT

Well, I hope the new plugin will help somebody out there.  I’m planning to release in the next few days over on Smashly.net.  It makes this business about as simple as I can possibly come up with.  Hopefully some RegEx wizards will contribute some common match rules to help people along.

Cheers,

Byron

Radio Buttons not Showing Checked – a FireFox Bug

So, why????  And why does it do it sometimes and not other times.  Well, I thought I knew the answer.  I thought that if the names of your radio button groups are similar up to a point, FireFox doesn’t differentiate between them in it’s initial rendering.  So I changed the names a little bit (see below) and that appeared to fix it.  Then I refreshed the screen…and WHAM!!!! broke again.

Here’s the HTML I had:

<!--Group 1 -->
<input style="width: auto;" checked="checked" name="sppl_tr_country" type="radio" value="US" tabindex="55" />US<br />
<input style="width: auto;" name="sppl_tr_country" type="radio" value="UK" tabindex="55" />UK<br />
<input style="width: auto;" name="sppl_tr_country" type="radio" value="CA" tabindex="55" />CA
<!--Group 2 -->
<input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$" tabindex="56" />$$<br />
<input style="width: auto;" checked="checked" name="sppl_tr_cost" type="radio" value="$$$" tabindex="56" />$$$<br />
<input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$$$" tabindex="56" />$$$$<br />
<input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$$$$" tabindex="56" />$$$$$

In IE 6 and Chrome, it was rendering:

In FireFox, it rendered:

The exact same HTML across 3 browsers, and weirdly enough, IE6 got it right.  There were occassions when FF got it right too, but sometimes if you refreshed the screen, it would be wrong again.

For the love of Pete!  What’s going on?

I thought the trouble was how close my Radio Button names were to each other:

• Group 1:   sppl_tr_country
• Group 2:   sppl_tr_cost

The first 10 characters were the same.  Change the first character (or presumably something near the front) so that the names are different early on seemed to work, until I refreshed the screen.  Here’s how I changed the screen:

• Group 1:   1_sppl_tr_country
• Group 2:  2_sppl_tr_country

Ah well, if anyone knows what’s up, pleeeeeeeeease let us know!

Cheers!

Byron

If you want to give the manual version of SVN a go, check out the WordPress instructions here.

A Word on SVN

SVN is a code repository that provides superb versioning and access controls for development teams. These types of tools are particularly necessary in large development groups where many developers might be working on the same code. If you’re like me, you may have only the faintest idea as to what SVN does. Well, not to fear. These next two videos are going to tell you exactly what you need to do in order to get your plugin’s code into the repository.

Configuring Aptana for Subversion Integration

Aptana is an IDE that is based on the open source Eclipse IDE project. The following video shows you how to download and configure Aptana for connecting to your repository.

You probably noticed that the sound was cut off there at the end.  ScreenToaster was having some problems and it was cutting off recording audio at 4:00 mins.  And I’m so bad at doing these videos that I couldn’t bear trying it yet again for 10 seconds more sound.  Basically I said, “The Subclipse box will show up in the bottom right.  And check out part 3, which brings it home!”

Once you’ve configured Aptana and SVN (Subclipse), you’re now ready to make the connection to your remote WordPress plugin repository.  So, check out video 3 which demonstrates the steps for getting your plugin files into the repository.

Cheers!

Byron

I like to think of myself as a geek/nerd, but dipping into SVN, I quickly realized that there are several standard deviations of geekdom between me (what I now understand to be Geek Light) and the people who speak SVN (Geek Core).  So for those of you who are geeky enough to write plugins for WordPress, but do not fall into Geek Core, I offer you this video series, holding your hand, like I wish someone had done for me, through the whole process…well, after you’ve got your plugin written anyway.

3 Easy Steps to Hosting a Plugin on WordPress

There are 3 easy steps for hosting your plugin on WordPress. At least they should be easy after you watch these videos.

1) Request a Subversion (SVN) Repository for Your Plugin at WordPress

This step basically asks WordPress for a place to host your plugin. Here’s the video:

After you’re done with that, it may take several hours (or even longer) to get your email back from WordPress. Somebody has to review your request and then set up your repository, so get on with life and come back and check your email in the morning.

After you get your Repository notification email, your now ready for step 2. Check out video #2!
Cheers!
Byron

Release Candidate 2 version 0.2.996 (RC3 for 0.3.00) now available at WordPress.

Final Release Candidate before going public with 0.3.00!

I need to do some documentation.  Launch the new home for PhotoSmash.

Note!  This version has Sorting (only 2 choices right now – Date Uploaded – Ascending or Descending…more to come).

Going live very soon!!! I hope…

Beta Testers of 0.2.99?:

First: after uploading this version is to go to Plugin Info and run the Update Database.  If you still get a Database Warning in PhotoSmash Settings page, your database needs to be updated.

Second: note that the behavior of custom forms has changed.  Note that you no longer have to turn on Custom Form usage in PhotoSmash Settings.  You can get a custom form to work by setting it in the Gallery Settings (there is a mass update button in PhotoSmash Settings/Advanced tab/Default upload form setting – this button will update all existing galleries to use the selected custom form). Or you can use the shortcodes in your post:   [photosmash form=your_form_name]

Additional security enhancements around URL’s were made to this version.  It now utilizes WP 2.8 URL sanitizing, and remains backwards compatible with 2.7.

Beta Testers wanted! Go to the PhotoSmash Other Versions download page and download the Development version.  When you unzip, you should have version 0.2.992.  I didn’t make this 0.3.00 so you can use the automatic update feature of WP to upgrade to the Gold version.

There are tons of new features, so please beat it up and let me know what you find.  I’ve tried, kind of unsuccessfully to hide the complexity from the Plugin-n-go user of PhotoSmash, so if you have any suggestions for making the basic plugin more friendly…PLEASE let me know!

A new website, Smashly.net, is on its way also.  It’s just a shell right now, but it will ultimately house PhotoSmash, Supple Forms, and the Smashly WordPress community.  I want to have it ready for the PhotoSmash 0.3.00 official release…we shall see.

Thanks for your help!

Byron

Permanent Alert (posted 4/16/2009): Please note that using 0777 as a folder permission is highly discouraged (DESPITE MY RECOMMENDATIONS IN THE COMMENTS BELOW). Please note that I no longer recommend setting folder permissions to 0777, but rather the upload folders should have 0755. Version 0.2.55 includes the Plugin Info page in the admin section that helps you determine what your permissions are and will let you set them appropriately (unless SAFE MODE is on in your PHP config).

[Here begins the ORIGINAL Post]

I am pleased to announce the release of my first “real” WordPress plugin, PhotoSmash Galleries.  While there are at least a dozen photo gallery plugins available for WordPress, PhotoSmash adds something to the WordPress world that wasn’t there before (at least, I think so).  What could that possibly be? you ask.  Well, PhotoSmash makes it possible for your users to upload photos to galleries right from your Posts or Pages.

For directions in using the plugin, see the Usage section below.

Download:

Download at the PhotoSmash page on WordPress

View readme.txt
There is a demo at:  PMOPress.com

Features:

• Produces XHTML 1.0 Transitional markup for public facing pages
• User contributable photo galleries
• AJAX photo uploads
• Control who can upload images: admin only, authors & contributors (and higher), or registered users and higher
• Moderate images uploaded by registered users (Admins and authors are automatically approved)
• Receive email alerts for new images that need to be moderated
• Options page for setting general defaults or specific gallery settings
• Auto-adding of photo galleries
• Multiple galleries per post, added using a simple tag system
• Integrates with popular image viewing systems like Lightbox and Shadowbox
• Tweak appearance through the included css file
• Allows loading images to galleries by URL
• Option to set thumbnails to crop to size or maintain aspect raito
• Various display options for captions, including displaying the contributor’s name and website link
• Admins can set how many images per row in the galleries (can be set by gallery)
• Admins can set how many images per page ( 0 turns off pagination )
• Supports Role Manager plugin with “Upload to PhotoSmash” capability (when assigned to a subscriber, they can upload to any gallery and “Photosmash ?” capability (where ? is the gallery ID…when assigned to a subscriber, they can upload to that specific gallery, regardless of the minimum upload user)
• Option for a URL field on the upload form. Submitted URLs can be used as links for captions

Requested Features

I’ll add requested features here as people ask, so I don’t lose track:

1. Give an option to show uploader’s name and link to website
2. Allow image upload by URL.
3. RSS or subscribe for notifications by email
4. Use the on page upload to add photos to NextGen Gallery (I have no illusions about besting NextGen…I’m just aiming for fast and simple, so I don’t mind this one bit )
5. Import photos from existing library
6. Upload a zip file of photos
7. Multiple photo uploads – swf uploader
8. Need to remove the “by-reference” indicator from certain function calls in admin….causing PHP call-by-reference warning.
9. Need to reduce the final file size from 5M to a user configurable variable in the ajax-upload.php settings…it’s letting uploaded files stay huge – slow to download with little real quality gain on screen
10. Need to show Memory capabilities for server in the admin page.
11. Think about breaking up the Defaults page from the Gallery Edit page….just something to consider
12. Upload photos from Flickr or Photobucket
13. Allow admins to set how many photos per row…use table for that
14. Add paging to galleries, allowing admins to set # of photos per page
15. Add CoolIris support (that thing just blows me away)
16. Add tabs to admin pages
17. Send email to Subscribers who upload images: 1) upload successful (maybe – they’ll see it on the gallery anyway if they’re logged in – can’t send an email otherwise) 2) image was moderated (definitely), allow admin to type brief msg or use default msg.
18. Create special role that can be assigned to individual subscribers without turning on uploading for all subscribers
19. Auto-resize upload (allow admin to set maximum pixel size of final images)
20. Create watermarks from custom image.
21. Allow creating new thumbnails to replace the originals.
22. Add option for URL field on the upload form, with options to use URLs in captions.
23. Latest additions widget
24. Mashup pages by tags, contributors, latest
25. RSS
26. Photo-level Comments
27. Star ratings
28. Option for contributors to delete images
29. Sorting
30. Shortcode for Showing individual images
31. Dashboard image approval box
32. Star rating system for photos
33. Upload files other than images (mp3, videos, documents)
34. is there no end to the freaking list???

Soooooo….if anyone makes any enhancements to the code that they think other users might like, please let me know.

Most sites don’t need to let users upload photos, and PhotoSmash handles that requirement as well by letting you set a minimum role for uploading by gallery. If you’re simply looking to do photo galleries that only you or your authors can upload to, you’ve got lots of options in the WordPress cosmos. Where PhotoSmash differentiates there is that it lets you add images directly within your posts and pages without going to the Admin section.

Personally, I needed PhotoSmash for my CityTracs website which I’m porting over to WordPress.  I want to let users upload their photos to the destination galleries there, hence the origins of PhotoSmash. Hopefully, PhotoSmash will find its niche on the Web.

Screenshots

Ahhh…the screenshots:

Here’s a shot from the PhotoSmash options page in the Admin…when you’re actually in there, scroll down to work with individual galleries:

And finally a shot of the AJAX image upload box:

– How to Use PhotoSmash

Using PhotoSmash is extremely simple:

1. Download PhotoSmash and unzip…you should wind up with a folder named: bwb-photosmash
2. Upload the bwb-photosmash plugin folder to your /wp-content/plugins/ folder
3. In the Plugins page of your WordPress Admin, activate PhotoSmash
4. There are 3 ways to add new galleries to your posts:
   1. Under settings, go to the PhotoSmash options page and turn on Auto-adding of galleries.  You can auto-add galleries to the top of each post or the bottom of each post by changing the drop down to the correct selection.  Click Update Defaults button to save changes
   2. Also in the PhotoSmash options page, scroll down below the PhotoSmash defaults section and select New in the gallery drop down.  Fill in the details you want to use for the new gallery, and click the Save Gallery button to create the new gallery.  After the save is complete, select your new gallery from the Gallery drop down and click the Edit button to retrieve it.  The code (like [photosmash id=1] )for adding this specific gallery to any post or page will be in red beneath the Gallery drop down.  Cut and past the code anywhere you like in your posts or pages.  You can also specify multiple specific galleries within a single post or page by putting the tags with their ids in as needed.
   3. PhotoSmash can also create galleries on the fly for specific posts.  Simply enter the following code anywhere you like in posts or pages and a gallery will be automatically created:   [photosmash] The code should include everything in red, including the braces and the = sign.
5. To add photos to your galleries, go to the post or page and click Add Photos link.  I’m not sure what the size limit is right now.  It may vary based on your php.ini settings.
6. If you choose to let Registered users upload photos, their photos will be visible to Admins and the themselves only.  Admins will be presented with buttons for Approve or Bury.  Approve is self explanatory.  Bury simply deletes the record from the database and deletes (unlinks in PHP terms) the files from the bwbps and bwbps/thumbs/ folders in the wp-content/uploads/ folder
7. You will receive an email alert for photos requiring moderation.  These alerts use a pseudo-cron like scheduling scheme that is triggered whenever someone views one of your blog’s pages.  You can set the alert program to check every 10 minutes, 1 hour, or 1  day, or not at all.
8. To edit a photo’s caption, go to the PhotoSmash options page in wp-admin.  Select the desired gallery from the drop down and click Edit.  When the page comes back, the images for that gallery will show up at the bottom of the page.  There will be text boxes beneath image allowing you to edit captions.  Click save to save caption edits.  Approve buttons will be present for images needing moderation.  Delete will be available for all images.
9. To integrate with Lightbox or Shadowbox, simply include the correct “rel” information in the Gallery specific options on the PhotoSmash options page.  You can set your general PhotoSmash default rel in PhotoSmash Defaults section so that any newly created galleries will automatically get the rel.   For Lightbox, set the rel to lightbox.  Shadowbox can use lightbox or shadowbox.  To group a galleries images together as an album for Shadowbox, use something like:  shadowbox[album] as the gallery’s rel.
10. To prevent a post from receiving a gallery when Auto-add is activated, simply enter the following tag anywhere in the post’s content:  

    [/ps]
    

11. To use with Role Manager plugin:  the Role Manager plugin lets you give specific subscribers additional capabilities.  PhotoSmash supports these capabilities by allowing you to give users additional access to galleries that their roles do not allow (e.g. a Subscriber could upload to a gallery that is set to Admins only).  Here are the steps:
    1. Install the Role Manager Plugin (see link above)
    2. In the Users menu box in Admin, click on Capabilities
    3. Add a capability called:  Upload to PhotoSmash
    4. To assign this capability to a user, click Authors & Users
    5. Edit the user you are targeting
    6. At bottom of user profile screen, check the Upload to PhotoSmash checkbox in the Assign extra capabilities section and Save (Update) user…this user can now upload to any gallery regardless of the minimum role you have specified for those galleries.
    7. To target a specific gallery, in #3, create the capability:  Photosmash ? (where ? is the gallery ID #, e.g.  Photosmash 10 ).  You can find the gallery ID # in the Gallery Settings screen in PhotoSmash admin section.  It is the same number that is used in the shortcode that can be used to specify a gallery.  Choose this capability in #6 instead of the Upload to Photosmash capability.  Assigning both would be redundant since Upload to Photosmash gives access to all galleries.  You can assign as many specific galleries to a user as you like.
    8. To add the URL field to the upload form and use the user submitted URLs as the link for your captions, there are 2 settings needed to use feature: 1) you must turn on the field to show up in the Upload Form. Do this in PhotoSmash Settings / Gallery Defaults tab, the checkbox at the bottom of form. 2) There are 2 options in Gallery Settings and PhotoSmash Settings pages under the Viewing tab and in the Image caption style that will use the User submitted URL as the caption link…look at option #3 and the last one.
12. Whew…that’s about it….I think.

This plugin is available through WordPress.org so you will be able to upgrade it with the wonderful automatic plugin upgrade feature in WP 2.7.

If you’ve got ideas, or better yet, code to make PhotoSmash better, please let us know.  Maybe somebody has ideas on how to integrate Flash gallery viewing like NextGen gallery has, or making the upload form more attractive.   Anyway, I’d love to hear from you.

Plugin Conflicts/Recommendations

• Lightbox – there are 2 versions…one works, one doesn’t. This one does.
• Some plugins that utilize the jquery-forms javascript code may conflict. One user found that a Chat box plugin was making continual ajax calls back to the server. This caused the PhotoSmash upload form to fire indiscriminately. You could still upload an image by selecting it and clicking submit, but you would get the 400k error for no reason. If someone has a suggestion as to how I might prevent his problem, I’m all ears…it appears to stem from common use of jquery.forms.js.
• Flutter version .2.51 causes javascript errors in IE 6 when using Lightbox and possibly even other [?]box image viewers.  Haven’t tested with IE 7 or 8.  FF appears OK.  Check out Supple Forms for a Flutter alternative

The Belated Changelog

• 0.2.62 (4/29/2009) – Fixed url validation on uploading images. Fixed css to make gallery table 100% width. Added options for using user submitted url’s as the thumbnail links (option must be set in Gallery Settings to become effective).  Add option to make thumbnail and caption links target new windows (option is only under PhotoSmash Settings).
• 0.2.61 (4/27/2009) Fixed manual creation of new galleries to use PhotoSmash defaults. Now using Colin Verot’s upload class version 2.7 RC2.  Previous version had a Safe Mode “feature” that was causing 400k errors.
• New Feature: (4/26/2009) 0.2.6 URL field added to upload form. 2 options added to allow the image caption to link to those urls. See the Usage section for instructions on use.
• 0.2.55 (4/16/2009) Added Plugin Info page in admin to assist with trouble shooting. Checks folders and tables and server info. Server info code borrowed from the immanent NextGen Gallery plugin by Alex Rabe. Change in folder permission recommendations from 0777 to 0755. Plugin Info page helps with those permissions as well.
• 0.2.54 (4/6/2009) Fixed “delete gallery” error in bwbps.admin.php. Nonce security wasn’t configured properly.
• 0.2.52 & 0.2.53 (3/23/2009) Fixed implosion error in bwbps-photosmash.php on line 767.  Fixed a plugin conflict with redeclaring the JSON class when uploading.  This conflict was found with Twitter Tools.
• New Feature: (3/13/2009)  0.2.5 Added support for Role Manager plugin.  Can now grant specific subscribers access to upload to any gallery or to specific galleries regardless of the minimum roles.   See Usage notes for details.  Also, changed bwbps.js to allow IE uploads to show properly.  Were showing in a single column due to rendering of “margin: auto”
• 2 New Features + bug fixes: 0.2.4 (3/11/2009) Added Tabs to admin pages. Added pagination by gallery. Fixed use of admin defined captions for Add Photos link and Upload form upload message. Fixed CSS for IE for number of images per row.
• New Feature: 0.2.3 (3/8/2009) admins can set how many images to display per row…setting is by gallery.  Can also set default for new galleries
• 0.2.22 (3/6/2009) corrected XHTML validation error – replaced & with & in the ThickBox href on the Add Photos links.
• 0.2.21 (3/5/2009) corrected XHTML validation errors.  Corrected duplication of moderation nonce on front page.
• New Feature: 0.2.2 (3/4/2009) added options for displaying captions, including displaying contributor’s WordPress nicename and their URL
• New Feature: 0.2.1 (3/3/2009) added ability to upload images from a URL
• New Feature: 0.2.0  added the ability to choose to either maintain aspect ratio or crop when creating thumbnails.
• 0.1.99 – in bwbps-photosmash.php fixed <?= WINC to <?php echo WIND; ?>…this was causing some uses problems.  Changed bwbps.js to use standard $j(‘#bwbps_uploadfile’).val() instead of $j(‘input[@name=bwbps_uploadfile]‘).fileValue().
• 0.1.97 – now using JSON.php class in admin Photo Manager page for ajax calls….affects ajax.php. Fixed the same json_encode problem for PHP4 in admin as for the upload
• 0.1.96 – added the JSON.php class to ajax_upload.php to make json_encode compatible with PHP4.
• 0.1.95 – changed the code that handles image files to utilize WP_CONTENT_DIR and WP_CONTENT_URL. This was needed to deal with implementations of WP that did not use the root directory, or used non-standard (but perfectly acceptable) locations for their Content or Upload directories.

Acknowledgements

• Thanks to Colin Verot for making his upload class available through the GPL.  PhotoSmash uses Colin’s class.upload.php for manipulating images and making sure the correct folders exist.
• Thanks to Cory and Michal for their work on the JSON encoding class.
• Thanks to the WordPress community for sharing, inspiration, patience, and passion.
• Thanks to my alpha/beta debuggers…I won’t name names, because I don’t want to leave anyone out. But you can see much of there contributions in the first 120 comments below.
• Thanks to Alex Rabe for the immeasurable NextGEN Gallery, which has helped me figure out a few things and has provided inspiration and the occasional snippet of code…particularly in the area of the Tabs in admin pages and the styling on the pagination.

Finally, if you do end up liking PhotoSmash enough to use it, that will be a thrill for me.  If it makes your life easier in some way and you want to throw a little donation my way, that would be an even bigger thrill and much appreciated.  Either way, I hope you like P’Smash.

I have been a Prototype and Scriptaculous user for over a year now.  But I am starting the transition over to jQuery, and am loving what I see.  The learning curve is easy if you’re coming in from one of the other frameworks, so don’t sweat it.

If you’re an ASP.net programmer and you use server controls, then you know that ASP changes the control ID into something that the server will be able to understand on postbacks.  This makes it a little tricky to reference these controls with Javascript on the client.

The ASP Trick

Well, here’s a neat little trick that I picked up on one of the forums that will allow you to get the value of an ASP.net dropdownlist using jQuery.  Place the following Javascript function at the bottom of your .aspx file.  I think you’ll need to have it after your DropDownList to insure that it works properly.

<script type="text/javascript">
        function getDropDownList1Value()
        {
            var SelectedVal = $('#< %=<strong>DropDownList1.ClientID %>').val();
            return SelectedVal;
        }
</script>

The jQuery part of this function is shown in blue here:  $(‘#<%=DropDownList1.ClientID %>‘).val()

The real magic is the red part.  This is ASP code that will be processed on the server to write the control’s Client ID into the function.  Given such a small amount of jQuery, you could easily pull out the jQuery code and use it with other frameworks or plain old JScript as well.  The key after all, is getting your Javascript to know what the control’s DOM ID is.

Using the function is as simple as:

var myValue = getDropDownList1Value();

This could, of course, be used with any ASP.net server control for other purposes as well.

A jQuery Alternative: The CSS Class Selector

Another alternative with jQuery, would be to assign a css class to the control and use that class as your selector.  Here’s a jQuery example to select on a css class called mydropdown:

$(‘.mydropdown’).val();

Just assign the mydropdown class to your ASP control in Visual Studio and jQuery will find your control.  But be careful…jQuery will find every control that has that class, so give a unique class to each control you want to try this with.

Hope that helps.

Cheers!
Byron

Choosing the TinyMCE Editor & Why FCKEditor doesn’t work with AIR

There are a number of very good and free HTML editors on the web that you can use in your applications. These include Yahoo’s YUI Rich Text Editor, the FCKEditor, Dojo’s Dijit Editor, the Ext framework’s HTMLEditor, and TinyMCE among others. Unfortunately, not all editors will work within Adobe AIR. AIR uses WebKit as its HTML rendering engine. This is the same engine used by Safari, so if your chosen editor does not support Safari, it is likely that you will not be able to use it in AIR. At this point (10/19/2007) FCKEditor does not work with versions of Safari prior to version 3.0, so it probably doesn’t work in AIR either (see their compatibility list on front page – upper right corner, hover over the Safari icon).

I mention FCKEditor because I like some of the functions it has, like built in image and file uploading, and a sweet little plugin that lets you switch toolbars on the fly so you can set up tabs like on Google Docs to change the toolset. You may be able to do these with TinyMCE, but I haven’t found them yet.

Regardless of the editor you choose, this method for displaying and accessing your editor should work as long as it’s compatible with AIR. You’ll need to use your editor’s methods for instantiating itself, but the sandbox concept is all AIR.

Using TinyMCE in Adobe AIR Tutorial and Example

I spent several hours trying to get TinyMCE working in AIR and finally did! Even Google was of no help in finding the answers. Ultimately, it required reverse engineering Adobe’s Bee.AIR sample application. So I hope that this example will save you some time.

I started my journey by creating a basic HTML file that included the TinyMCE.js file just like the examples on their site showed. In this file, you would have a <textarea> tag and a couple of lines of javascript using the tinyMCE.init() function to transform the textarea into the TinyMCE editor. Running this locally in Safari worked perfectly, so at least the plumbing should work in AIR.

If you use Dreamweaver or Aptana, check out Adobe’s AIR extension for Dreamweaver (they also have a plugin for Aptana). This will save you from having to run your debug and packaging in the command line. Make sure you’ve got your site set up as a site in DW, then go to Site/Air Application Settings. The full documentation for using AIR in Dreamweaver is here.

Previewing the application (from within Dreamweaver menu path: Site/Air Application Settings), did not transform the textarea into a TinyMCE editor. Adobe’s blog editing sample application Bee.AIR came to the rescue for figuring out how to get TinyMCE to do its thing in AIR. The problem was that you have to place the editor in a remote sandbox. The example below describes how to set that up.

I have included the source code for a very simple working sample application below, as well as a packaged/installable version of the AIR application. Here goes with the steps it took to get this to work:

1. Make sure you have installed the latest version of Adobe Air Integrated Runtime on your computer (Air Beta 2 at the time of this writing). Download at the Adobe download page here.
2. You must have the Air SDK installed (available at Adobe download page). A great, and almost required, tutorial is here at Airdev.org. I use a Mac and have never monkeyed around with Terminal. So this came in very handy.
3. Install the extension for your IDE (available at Adobe download page): Dreamweaver and Aptana are provided by Adobe
4. Your app will need 2 html files plus the TinyMCE package
   1. Main application .html file representing the Application Sandbox. You can access the AIR API’s directly from this file and from script files you include here
   2. An .html file containing the TinyMCE setup and textarea. This will be placed in the remote Sandbox. To access AIR API’s here, you’ll need to use the Sandbox Bridge. Read more on the security model at the Abode AIR with HTML & AJAX Documentation. Navigate the tree to: Application Development Essentials/AIR Security/Sandboxes.
   3. The TinyMCE package…this is a big Gotcha! You can download TinyMCE from the MoxieCode website, but using this does not work when trying to install your finished application. Using the official version downloaded from MoxieCode works just fine in Preview from within Dreamweaver (which launches the ADL tool that comes with the SDK). Even using the Create AIR File option in Dreamweaver to build your AIR application package works fine. But trying to install your AIR application will give you the following error:
      

      Installation error:
      Missing digested package file: tinymce/jscripts/tiny_mce/plugins/cleanup/editor_plugin.js

      This was fixed by simply using the TinyMCE folder provided with the Bee source files. This version of the editor appears to be the current version on the Moxiecode website, but it contains several modifications, including an override of the <hr/> insert function which you may want to fix. Now the app installs and the editor is visible, but it’s disabled. This is fixed by replacing the tiny_mce_src.js file in Bee’s version with the copy of the file provided with the official version. If you do all of that, it should work. Or, you can just use the package provided in the sample application I provide below.

      If anybody figures out what the deal is with this, please…please…let share that in the comments.

   4. The other files included in the attached sample application are not required for using tinyMCE with Air. Prototype is just there to make my life easier. The AIRAliases.js file contains aliases to Air classes, shortening your code when using the AIR API. These aliases aren’t used at all in this example even though I included the file.
5. Your TinyMCE editor will need to go in an iframe in your main HTML file. This iframe sets up the remote sandbox, giving it security priviledges that are not available in the application sandbox. The markup for putting your TinyMCE editor on your page should look something like:
   

   
<div style="margin-top: 20px;">
<iframe src="http://air/tinymce.html" id="pp_content_txt" sandboxRoot="http://air/"
documentRoot="app-resource:/" scrolling="no" width="100%" height="270"
onfocus = "this.contentWindow.childSandboxBridge.focus()">
</iframe>
</div>

6. That iframe pulls in your tinymce.html file as its source. This file contains the code to include the TinyMCE javascript files and instantiate an editor. It will look like a standard html file with some key items:
   • A script tag, pulling in the tiny_mce_src.js file
   • Script in the head that initializes the TinyMCE instance: uses the tinyMCE.init() function
   • More script in the head (or potentially an included .js file) that handles the tinyMCE functions like: setContent() and getContent(), etc
   • A textarea that will be transformed into the editor by the tinyMCE.init() function

The example files are available for download below. If you haven’t already done so, you’ll need to get steps 1 through 3 done first. Just because you can run Air apps (step 1) on your computer doesn’t mean you’re configured to create them (steps 2 & 3…with 3 being optional, but recommended).

Update: I’ve learned a lot about the Sandboxes over the last couple of weeks and now have an understanding of how and why to use it. The Sandbox is definitely your friend. TinyMCE has to reside in the remote sandbox because it uses eval() and possibly other functions that are not allowed in the application sandbox (where the main app resides). If you’re doing an HTML/Javascript app, you’ll likely do most of your HTML and a good bit of your JS in the remote sandbox. You can’t reach the AIR API’s from the remote sandbox directly, so you have to build objects that expose function to both the parent and child sandboxes so they can communicate. There’s a lot to learn here. A good start is found in the Abode AIR with HTML & AJAX Documentation under: Application Development Essentials/AIR Security/Sandboxes.

Downloads for the example app:

Adobe Air: TinyMCE Example (AIR application)
Adobe Air: TinyMCE Example (Source files)

Other helpful Adobe Air tutorials and links:

• Adobe AIR downloads
• Adobe AIR sample applications
• Creating your first HTML AIR app in Dreamweaver – Adobe’s tutorial
• Creating your first HTML & Javascript app in Adobe Air – Airdev.org’s tutorial
• Installing the Adobe AIR SDK – a must read as far as I’m concerned
• more to come…make your own suggestions below!

Enter Google Gears and Adobe Air and, I’m sure, some other stuff that is out there. Well, I’m working on a web application that I need to go offline. I’m no javascript ninja or anything like that, so I’m starting the Gears learning curve by working through the sample application, Gearpad (working demo).

There is a ton of stuff out there on Gears, so I won’t rehash it here. But if you want to install Gearpad on your own website to try it out for yourself, here are the solutions to a few problems I encountered:

1. If you do not have the latest instance of the gears plugin installed, you may get a: Could not create requested object error (or some variation of that). If you install from the main gears page, you don’t get the latest version (0.1.56.0), at least as of today. Go here and download the latest greatest: gears download list. Download it and run it. If you installing on Firefox, use File/open from the firefox app. From IE, you can double click on the downloaded file on your desktop.
2. After you’ve got all the files copied over to your server, the db_config.php updated for you databsae, and your database table built, now you log it. When I did this, it gearpad got stuck syncing…This obviously wasn’t right.
   

   The Problem:

   evidently, gearpad checks the “clientid” that is inserted into your local database. The first one inserted is 0. This looks like the value FALSE to some code, so it does a check on the clientid value and thinks it’s false. Then it poops out.

   The Fix:

   • The easiest thing would be to create another login. I didn’t try that, but it should work.
   • Trouble is you may have blown your email address on the first login. If that’s the case, then you need to use the dbquery.html tool to manually update the clientid in the database. You can get the query tool from the same zip file that had the sample application (tools folder, not samples). Here’s the file.
     1. Stick the file in your gearpad folder on your webserver and call it up manually
     2. Type in sql statement: UPDATE user SET clientid = 1
     3. Now you need to update your mySQL database to reflect the change. Set last_clientid = 1 and next clientid = 2

   That should fix it!

Good luck! I anguished over that little problem. Hope to save you some headache.