I've never been quite satisfied with how I've been displaying Flickr photos. At first, I just shot out 50 thumbnail images without any formatting. After that, I tried SimpleViewer that used Flash to display the photos. I left that up for a while, even though it bothered me that it always loaded the full images in the background even if you weren't interested in looking at them.

A couple days ago, there was an interesting Ajaxian article about iCarousel which displays small images in a "carousel". I guess the carousel name is fitting if I think of it like the old slide viewers with a wheel of slides. There never was an end to the slides, i.e. the slides would repeat endlessly, and iCarousel does the same.

Integrating iCarousel was pretty easy since I already had a Flickr library in place. Instead of writing out XML like I did for Simpleviewer, I just wrote out the HTML/CSS for the <li> elements to a $li_out variable. I'm using CodeIgniter, and so all this was part of my controller file, photos.php. I passed the $li_out variable to my view "photos/index.php," and that was enough to get the carousel to appear.

The examples didn't go anywhere when you clicked on a thumbnail, so I had to work on that part. Using a little bit of AJAX knowhow, I display a larger image below the carousel.

So, it's all working fairly well for the 25 images I load. Later, I'll add code to grab the next 25 images from Flickr. I'd like to have a list of popular or suggested tags someday too ...

Oh, here's my peave, which is probably due to my hacking code without fully understanding things .... My href is going to "#" as if there is an anchor tag somewhere. When I click a thumbnail, I'd like it to display the image without the page going to http://www.overfood.com/photos/# ....

On many web sites, there is a contact page, about us page, and other pages at the root level, ie mydomain.com/about/ or mydomain.com/about.php. With CodeIgniter, the first URI segment, assuming you're using the mode_rewrite, is supposed to be the name of the controller, and the second segment is the name of the function. I didn't want to have the name of my controller in the URL for these root level pages. I think the "main", or whatever controller name I might later choose, in overfood.com/main/about/ makes the URL longer than it needs to be. It's almost as ugly as when I see people have "html" in their URL, which is often the case when people use content management systems or some sort of template

With the help of the people on the CodeIgniter forums, I found the solution to my problem. It's not really a problem, but rather a preference, I suppose. I knew part of the solution was to use the "routes.php" file, but I wasn't using it with all the right parameters. The obvious parameter was the "default_controller", which I set to "main". What I was missing was individual settings for each root level page. Since I have an "about us" page, I needed a setting for that. I also needed a setting for the "contact us" page. With just these two extra lines, I was able to accomplish what I needed.

So, now my routes.php file looks like ...

$route['default_controller'] = "main";
$route['scaffolding_trigger'] = "I_would_be_dumb_to_leave_this_here";

$route['about'] =  'main/about';
$route['contactus'] =  'main/contactus';

Just as a side note, it got a little more complicated when trying to send messages with the contact page. I didn't want to add another line to my routes page for the "page" that handles the emailing of the message. So, I used "/contactus/send_message" as the action of my form. This made my "contactus" function a little longer since it now has to handle displaying a blank form, validating the form data, and whatever happens as a result of that, which would be sending the email or redisplaying the form with a proper error message.

The solution here was just to do some if/then checking of the "$this->uri->segment(2)" variable. I'd rather go this route than have to manage another view file and adding another line to the routes.php file. Not too bad.

Tonight's work focused on redoing my basic Flickr photo search. Rather than just doing a search on tags and slapping the results to the screen, I wanted something nicer looking. I've used SimpleViewer in the past, and I thought it would work well here. Once I found FlickrViewer, which integrates the Flickr API with SimpleViewer, then I knew I was on route that would work.

I didn't use FlickrViewer as it came, which only pulled images from your sets. I wanted to continue using a tag search, so I had to rewrite the call to use the "flickr.photos.Search" method instead of the "flickr.photosets.getPhotos". That wasn't too bad since I had originally did that the other night. The big change here was that my output string had to be in XML format for SimpleViewer to be able to read the data into the Flash object.

The XML was very basic, but what was interesting is how SimpleViewer appends the name of an image to a thumbnail URL base and a larger sized URL base. That made sense, but with FlickrViewer, the images were being pulled directly from Flickr and not from a directory on the same server. To get around that they used "flickrViewer.php?mode=img&size=large&image=", and that would in turn pull from "http://static.flickr.com/". Hmm, pretty neat, huh?

If you've played with CodeIgniter long enough, you'd know that you don't pass variables through the query string. Instead you use "URI segments". So, I had to make mine go to "/photos/load/large/" and "/photos/load/thumb/" and append the "_t.jpg" and ".jpg" for the thumbnail and larger image.

So, in the end, my code is an offshoot of FlickrViewer. One thing that it also does, which I haven't tried yet, is the caching of the XML. My page starts out with the "overfood" tag in the search box, and I should probably cache the XML for that tag. It would also be nice to put in some pagination too. Right now, I can only grab the first 50 photos for the tag, and you can't get any more. That should be easy enough to do, but that's enough for tonight!

I have been working on integrating the "dynamic lists" example from the alexajax.com site, and I can get the Ajax piece to create the secondary dropdown menus. That wasn't too bad. However, I'm having a rough time prepolulating thhe menus if some data in the form doesn't validate correctly.

Alex makes it work with xajax and codeigniter, which is my exact same set up, so I know it can be done. I just have to figure out how to integrate it with my humongous form!

I've read about AJAX for a long time, but I never dove into it. Now that this site is "live", I thought it'd be a good time to try my hand at it.

I took advantage of the Alex's Ajax site since it has examples of Ajax working within CodeIgniter. I don't have a Ajax library preference yet, so I followed along with the use of Xajax. I'll say once again that I can figure things out a lot faster with just PHP, and working things out in OOP and CI did slow me down a bit. I will just call it good experience.

Now, my restaurant search by city uses the "autosuggest" method to look up cities in the restaurant database. It makes suggestions whenever the list of cities is less than 20. I did that so that it would not suggest a crazy number of restaurants after you typed the first letter. I think I will change the code to wait a few seconds before doing a lookup so that it will only lookup when you pause. That will reduce the load on the database.

It's not the smoothest thing, but it gets the job done. It is a shame that it only fills in the city for you. I can grab the city and state together, but because I've got the city and state in separate fields, I cannot force it to put the suggestion data into both fields. With that, I wonder if it's better to just have a single field for city, state. Weather.com and Google Maps both work with that method. It would not be very difficult to split the field on a comma.

After much toil and trouble, I've finally uploaded a somewhat working version of the site. This new version of overfood.com is my first foray into using PHP frameworks. It's built with the CodeIgniter framework, which was fun to work with in the beginning.

CI is still nice, but it was tedious to move all my working code into the MVC structure. I was using the Smarty template system before, so I wasn't using a true MVC system. Add to that my sparse OOP background, and this is what you get =) I can do PHP just fine, but OOP just doesn't come naturally.

I've stripped this version down to just a few features. Only the Food Finder is done in CI. The blog and photos are using prior code. Ah, I'm trying to work in a login system too. That's been rough by itself!

Well, this is day one, just in time for April Fool's Day. I hope this site doesn't become a big joke!