Well, I drew the short straw on this one, and have been goaded into writing this one up by my cohort. Both of us have developed several sites with Joomla, and so we know a little about Joomla, which is why this bug surprised us.  It took both of us working together, and for a good part independently, about three hours to find the answer to this bug.

What I thought I’d do is walk you through the process, like a mystery, and see if we can save, at least, one of our readers a couple of hours in the future, and while were doing that we’ll talk about the operation of some of Joomla’s internals.

Let’s set the scene, one of the sites we maintain is a Joomla site with a Section Blog Layout front page.  The center of the page has three article snippets, each with a “read more” link to the full article on another page.

Normal operation: when you click on a “read more” link in each one of the three article snippets, a new page comes up with the full article in the center and a picture in the right sidebar.

The problem: When you click the “read more” link on one of the articles, the new page comes up with the entire article, however there is no picture in the right sidebar.  What made the problem more interesting was of the three articles, only one article did not bring up the picture, the other two articles operated normally, and brought up the picture in the right sidebar.

There you have it, pause number one. What’s your first guess of what could cause this problem?

Answer: something is different in the one article without the picture, than the articles with the pictures in the right sidebar.

Looking at each article in the editor, the html was identical, except for the actual article content, in each or the articles, no, not the problem. And when you think of it, it didn’t matter if the article html structure was different or not.

Let’s go over how the screen populates.  You click on the “read more.” This is a hidden menu with a link to the template page and article number of the full “read more” page.  When the template loads it goes to the database with the article number, retrieves the page, and inserts it into the center component section of the page.  The template then loads the module for the right sidebar, which goes to the media library, gets the correct picture, and places the picture in the module in the right sidebar, that’s the normal flow.  The module controls the picture load, not the component which loads the article.  The article load has nothing to do with the right picture problem.

Let’s move on. Pause number two, your next guess of what could be the cause of the problem?

Well, something in the module. The module’s job is to place the picture in the right sidebar, true, but, two of the articles work properly, so the module is working properly.

Next guess, the menu link is not hooked up properly, or is bringing up the wrong template. We checked. No not the problem, the menu hook ups were identical to those of the two good articles, as were the section and category.  As a matter of fact, all the parameters you can configure by clicking on menus, the media library, modules, templates, and the articles were identical in all three articles, hmmm.

We started going through the modules and plug ins and wondering if there wasn’t a conflict, yes, we were starting to pull at straws. Each time we’re shot down, by the fact, that two articles are working properly.

Then we came to the “AceSEF” component.  For those not familiar with this component, it has the same functionality as “sh404SEF,” and “JoomSEF.”  Let’s talk about what an SEF component does and how it works.

SEF stands for Search Engine Friendly. An SEF component’s job is to make easy URL’s for pages on your web site.  Instead of having a long URL with numbers and strange long cryptic text, you can call a page something like, “/the_cat_page,” which will show up in the top of the browser in the address window.  The easy URL is easy to remember, and makes it easy for Google to list your site higher up in their ratings.

How does AceSEF or any SEF component work?  When you create a menu item to bring up an article, Joomla assigns it a Joomla URL with the article id number, category id number, and section id number.  This is the sites “Real URL”.  The “Real URL” is usually cryptic, and hard to type.

In the case of a Section Blog Layout, actually three Real URL’s are created for each article.  One for the Section Blog page with the article snippet and the “read more,” one for the full length article page after you click “read more,” and one for the edit page you use when you bring the page up in the article editor.

AceSEF automatically picks up these three menu items and allows you to give each a SEF friendly URL.  SEF programs, including sh404SEF, will allow you to designate one of these three pages as the main page to load, at the exclusion of the other two pages.

The answer to our riddle was in the SEF component.  The “Real URL” of the page with the module to load,  has a picture id included in the Real URL,  which identifies the picture to load into the module.  If the wrong “SEF URL” is assigned to the wrong “Real URL,” then the wrong page loads.  The article will still load in it entirety as it is stored as a blob in the database, but the module will not be able to load the picture, since no picture is identified, so no module will load.  You’ll end up with a blank space, while the other two articles will have the correct SEF link with the picture module and load correctly.

Bottom line, if you find a page where the module is not loading, while other pages with the same module work correctly.  Check your SEF component, and save yourself a lot of the time, we wasted, tracking this one down.

The MySQL Developer Tools Team have just released their Release Candidate 3 of MySQL Workbench. This release fixed another 70 “issues” they missed in the last release candidate 5.2.22 RC 2, where they fixed 76 bugs, and follows the previous release, RC 1, where they fixed 62 bugs.  MySQL  Workbench is an open source project running on Windows, Linux, and Mac.

The older MySQL Administrator and the accompanying MySQL Query Browser were tools that were much beloved, that you kept going back to, and using over and over again,  like a nice fitting driving gloves, comfortable, useful, and empowering.  Since I started working with MySQL, I can’t remember not having them on my desktop, ready at a moments notice.

Because of that, I have looked upon MySQL Workbench with much suspicion and doubt. And indeed before this release, I would say the MySQL Workbench could not replace the previous Administrator and Query Browser. Now, I’m not too sure. With this release that has changed. Workbench includes the integration of MySQL Administrator, and MySQL Query Browser into an integrated environment, with much potential for growth through plug-ins, much like Eclipse, although don’t get me started on the integration of Eclipse plug-ins, another topic.

Workbench is like the French three-pronged fleur-de-lis, three separate tool areas open from a central core, Workbench Central.

Workbench Central

Workbench makes heavy use of “breadcrumb” like menus without tabs. Menus run horizontally across different windows in the Workbench, and clicking on the name brings you to the next screen. It took a second to get use to, but once I did, I liked the layout and the way workbench integrated.

You go back to Workbench Central by clicking “Home” in the upper left. If you click on any of your db connections, or menus across the top,  you enter into one of the three program areas: SQL Development with Query Browser, Data Modeling, and Server Administrator. It is obvious that each of these three sections is its own program, as they each take awhile to open at first.

Before MySQL Workbench folks were using DBDesigner to model their databases and do their EER diagrams. The Data Modeling section probably needs a little clean up and streamlining, as it opens rather “clunkily,” but once open works well.

Workbench Data Modeling

The administrator works well, but needs a little configuring as it checks your connections, and let’s you know if your missing an ini file or config setting.     You can configure multiple database connections to multiple servers, and reach each database with a click of the mouse.  The Administrator includes a series of graphs along the top of the window, which look nice, but I’m not sure are that useful.   The Administrator is laid out horizontally in keeping with the overall layout template of the Workbench, but I think I like the original Administrators vertical menus a little better.

Workbench Administrator

You can tell the Development Team has put some time into the Query Browser, and it shows.  You’ll find that the Query Browser is an improvement over the previous independent version. A red error x pops up as you type a query if you have the syntax wrong, this is immediate, instead of waiting until after you execute the query, very nice.  Query’s form a horizontal s menu along the top of the window as you make them, yes, the older version had this, but this is more automatic. Errors are reported when you execute the query, the same as the old version, with an obtuse error number.  My only gripe, which has nothing to do with the current Workbench, as the same was true of the previous version, is I wish the error messages were a tad more verbose.

Workbench Query Browser

MySQL Workbench is coming into its own and is starting to show the promise in its developer’s eyes.  The Developers Tools Team should be applauded for their dedication and persistence to get it right, and the outcome of this dedication is that MySQL Workbench is getting better and better.   I would look for the official release to follow closely after this RC 3 release.  I recommend you not wait for the official release,  go ahead, and get this release now, and start using it.  There is much to discover as you integrate Workbench into your databases, and begin working with it.  Enjoy.

I was knee deep in work the other day and accidentally overwrote a file that I had spent some time working on a couple of days ago.

I was not happy. However, since I commit my work often with git, I knew all my previous work was not lost. I just needed to recover that one file.

I was surprised to find that posts on recovering just a file in Git were a little harder to find on the Internet than I expected. Everyone was very helpful when it came to resetting all your files from a previous commit, but not just one file. And when this happens, I usually write a post about it. We’ll limit ourselves to recovering one file, and if you “grok” that, you’ll know by extrapolation how to get any files you want from previous commits in Git.

First, if your good file, that you committed previously, is still in your index (the files in your last commit), and you haven’t committed the new bad file yet, all you need to do overwrite the bad file in your working directory with the good file in your index using git checkout.  Like so:

git checkout  ( path/good file name )

For example, to recover a records_db.php file in my models subdirectory, I would type:

git checkout  models/records_db.php

Easy no. Your previously committed file will overwrite your bad new file in your working directory, and your all set.  Here’s an example using the file test.txt.

Backing up test.txt before committing the fifth revision change

Be careful, if you just do a “git checkout” without being specific about the file, you’ll get all the previously committed files back, which will overwrite your current work, that you haven’t committed yet, which you may not want to do.

Second, if you’ve committed the bad new file before you discovered your error, you need to tell git which committed file you want to retrieve, and its just a tad more complicated.  Git can’t guess which file you want from which commit.

What your trying to do is bring into your current working directory, an older file.  “git checkout” alone brings your last committed file, which is, after you committed, now the bad file.

We need to find the good file in your commits. There’s a couple of ways to do this. Let’s digress a bit, and talk about how Git labels commits. There’s the absolute method, and the relative method.

The absolute method is the SHA1 encryption number. You can see all your commits with the absolute SHA1 number by running:

git log

The number opposite the word commit is that commits absolute address. If you get a “:” after git log runs, you can quit out of git log by typing a “q”. The SHA1 numbers are long, but you only need the first three or four characters and Git will know which commit you mean.

Most folks, however, like to use the commit relative names. You can see the relative names by typing:

git show-branch –more=10

Now that we know how to label our commits, let’s get back to the subject at hand.  We need to find the good file.  By looking at the “git log” or the “git show-branch” you may not be able to determine which commit has the good file.  We may want to see the contents of the file.  For that, let’s use the gitk history gui, like so:

gitk –all

That’s with two dashes – -, as is, the more above in the show-branch command.

Using gitk to look at file four.txt contents in the fourth commit

This is a graphical record of all your commits, and the files that were committed.  If you click on the file in the lower right window, you’ll see the contents on the left.  This is the quick way to look at the file contents in each commit to find the commit you need.

OK, you know the commit you need. You can double check the relative name of the commit with the “git show-branch –more=10″ command and we’re all set.

Back to what we started with “git checkout.”  We will tell git to checkout the “four.txt” file from the “master~2″ commit, a previous commit, like so:

git checkout master~2 four.txt

Here’s an actual example of the command.

Recovering four.txt from the fourth commit labeled "master~2"

Now that wasn’t bad.  You should now feel confident you can recover any file you want in Git, that is, as long as you use Git the way it was designed to be used, commit your work often, and let Git take care of all the remembering.  Enjoy!

One aspect of CSS styling that some times can be confusing is styling links. This is because they are governed by both pseudo elements and specificity. Let’s take a closer look.

Pseudo elements are tags that CSS recognizes, that attach to HTML tags, but are not put directly into the HTML markup. We see this most often used with hyperlinks and anchor tags.

CSS uses four pseudo elements to style links:

:link The link pseudo tag is used for all links on the page that point to other locations that have NOT been visited. Here’s an example

a:link {
color: blue;
text-decoration: none;
}

Normally a link is underlined by your browser. If you don’t want your link underlined you can shut the underline off with the text-decoration: none;.

The next tag is “:visited.” These are sites that you have clicked on, visited, and then have returned to your page.

a:visited {
color: orchid;
}

Note the pseudo classes, ” a:visited” for example,  is attached directly to the html tag with a colon, no spaces.

“:hover” This styling will happen when your pointing device, or mouse, moves over the tag.  You do not have to actually click on the tag for hover to work.  This tags is used with the “img” tag to swap images when your mouse rolls over a picture. You can use this with other tags, like a table row.

tr:hover {
background-color: yellow;
}

Finally, we have “:active”   This styling is applied when an element has focus. Typically this is used with forms when you click in a form input box, or tab to it,  to type your name for example.

input:active { background-color: orange; }

Those are the basics, now let’s get a little more specific, pun intended, and why some people’s pseudo styling doesn’t work the way they thought they had styled their tags. It turns out that pseudo tags all have the same specificity in CSS. That means that:

 a:link {color: blue;}
 a:active {color: orange;}
 a:hover {color: yellow;}
 a:visited {color:orchid;}

All are equal in terms of specificity in CSS. And according to the Cascade Styling rules, if specificity is equal, the last styling gets the nod. In the above order, if any of your links become visited, then, from then on, your link will show only the orchid color. Not quite what you want, so visited needs to be listed higher up, first or second.

In order for your links to perform properly, like you expect, they need to be listed in the correct order which is:

 a:link {color: blue;}
 a:visited {color: orchid;}
 a:hover {color: yellow;}
 a:active {color: orange;}

Link and Visited are mutually exclusive, in terms of which applies, so they can be listed in either first or second order interchangeably. Again: visited, link, then hover, and finally active: vlha, or “Very Lean Hungry Apes” as a memory aid. Enjoy, and good CSSing to you.

This is a follow up article to the earlier post, regarding exact, any, and all word search support for the Phoca Gallery Search Plugin. If you read the earlier post, you are aware that my three main concerns regarding the Phoca Gallery Search Plugin are the support of exact, any, and all (resolved in the previous post); the lack of a preview image, and the support for showing the correct image (not merely the category) when you select a search result item.

The Problem
Search results that pertain to an image should show the user a thumbnail of the image. When selecting the search result link, the user should see the full image information, not an category page.

To demonstrate these concerns notice the search results when I search for “green normal” (the green normal image is from the earlier post):

Search result with no thumbnail image.

Now notice the resulting screen when I click on the search result link “fonts and colors: normal and green”. The page does not include the image for which I searched.

Resulting category display without target image.

The resulting page is always the first page of the category. In my example, this isn’t a major concern, as there are only 10 images. But it is still an issue, as a user could select an result item from a search and be taken to a page that does not include that target result. For a real site implementation, it is reasonable for a category to have 60, 80, or 100s of images. The image for which the user searched might be far enough away to steer them from your site entirely.

The Solution
Since these both require modifications to the same files, we will address them together. This issue must be resolved in two areas. The first area is the Phoca Gallery Search Plugin, specifically the JOOMLA_ROOT/plugins/search/phocagallery.php file (This is the same file we modified to update the exact/any/all words support.). In this file we need to modify the SQL queries to retrieve more data from the database, and then we need to be sure that the additional data is formatted appropriately and passed along with the search results.

The SQL query modification requires additional column values. Simply modify the following line under the “// Images” comment (the line is 161 in my file, which is modified to support exact, any, all searching per the earlier post):

. ' "2" AS browsernav, b.id as catid, b.alias as catalias'

Update the line so it includes the additional columns below:

. ' "2" AS browsernav, b.id as catid, b.alias as catalias, a.filename, a.alias AS photoalias, a.ordering AS photoordering'

We also want to construct a thumbnail path, and add a flag so that we can easily identify a result item as a phoca image. Update the foreach loop that traverse the $listImages. I am including the entire loop for reference (should be near line 175).

foreach($listImages as $key => $value) {
	$listImages[$key]->href = JRoute::_(PhocaGalleryRoute::getCategoryRoute($value->catid, $value->catalias));

	// Phoca Gallery Search Updates For Thumbnails -- BEGIN

        // Store the filename, so we can generate a path to the thumbnail
        $phoca_filename = $listImages[$key]->filename;

	// Scrub the filename, which is a relative path, if there are sub-directories,
        // we only want the final filename,
	// then append that to the thumbs directory and prefix.
	if(strrpos($phoca_filename,'/') === false){
             $path = 'thumbs/phoca_thumb_s_'.$phoca_filename;
        }else{
             $path = substr($phoca_filename, 0, (strrpos($phoca_filename, '/')+1)).'thumbs/phoca_thumb_s_'.substr($phoca_filename, (strrpos($phoca_filename, '/'))+1);
        }

	// Update the filename with the full path to the thumbnail
        $listImages[$key]->filename = 'images/phocagallery/'.$path;

	//Add ordering info to the URL
	$listImages[$key]->href.='&limitstart='.($listImages[$key]->photoordering-1);

	// Phoca Gallery Search Updates for Thumbnails -- END
}

Now we have access to the image alias and the ordering information. With this data, we can proceed to change the way that the Joomla! Search Component displays its results. This is controlled by the JOOMLA_ROOT/components/com_search/views/search/tmpl/default_results.php file.

It is worth noting that you should override this file within your template directory instead of editing the actual component tmpl file. I will not go over reasons for this in detail, because this is not a Joomla! best practices post. If you want more info on this, search for something to the effect of “Joomla 1.5 template layout override” and you should find more than enough information.

So, instead of editing the current file that controls this behavior, we are going to override it in our template directory. Create a JOOMLA_ROOT/templates/rhuk_milkyway/html/com_search/search/default_results.php file. Note that “rhuk_milkyway” is my active template, and the directory must reflect your active template. If this is your introduction to layout overrides in Joomla!, I would also note that the two paths (the overriding and the overridden) are not a directory for directory match.

In the new default_results.php file we need to make a check to see if the result is a Phoca Gallery Image result, this avoids searching for thumbnails when a user is returned an article result item. We then need to add some custom html to the page to rearrange the result layout, and add our image thumbnail.

[Note that the following two code sections have spaces after opening angle brackets to avoid parsing of html and php code. You can download the updated default_results.php, without the extra whitespace.]

Immediately after the first div tag (line 9), add the following:

< ?php //Phoca Gallery BEGIN ************************************ ?>
    				< ?php if (array_key_exists('phocaImage',$result)): ?>

              < span style='float: left;' class="small< ?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
  						  < ?php echo $this->pagination->limitstart + $result->count.'. ';?>
  					  < /span>

              < div id='phoca-image' style='float:left; padding:0px 4px;'>

                    < ?php echo ' alt="< ?php echo $result->title ?>"  /> 

              < /div>
              < ?php if ( $result->href ) :
                echo 'Visit this category: ';
    						if ($result->browsernav == 1 ) : ?>
    							
    						< ?php else : ?>
    							
    						< ?php endif;

    						echo $this->escape($result->title);

    						if ( $result->href ) : ?>
    							
    						< ?php endif;
    						if ( $result->section ) : ?>
    							< br />
    							< span class="small< ?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
    								(< ?php echo $this->escape($result->section); ?>)
    							< /span>
    						< ?php endif; ?>
    					< ?php endif; ?>
    				< /div>

    					< ?php echo $result->text; ?>
    				< /div>
    				< ?php
    					if ( $this->params->get( 'show_date' )) : ?>
    				< div class="small< ?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
    					< ?php echo $result->created; ?>
    				< /div>
    				< ?php endif; ?>

            < /div>
            < ?php else : ?>

            < ?php //Phoca Gallery BREAK ************************************ ?> 

And immediately before the fieldset closing tag (11-12 lines from the bottom of the file), insert:

  < ?php //Phoca Gallery RESUME ************************************ ?>
  < ?php endif; ?>
  < ?php //Phoca Gallery END *************************************** ?>

Now when we execute a search, the search results display with a thumbnail icon, and the thumbnail icon as well as the result title link to the correct page of images within the target category. Notice the search result with thumbnail (My thumbnail is merely green text, not that impressive.):

Search result with thumbnail.

And upon selecting either the thumbnail or the title of the result set item, I am taken to the correct page of the category display, as opposed to the previous links which always loaded the first page of the category:

Search result links directly to correct page within category.

A couple of caveats: This implementation requires additional updates to work properly with SEF URLs enabled, and the image paths are hardcoded as the Phoca Gallery/Joomla! defaults. There is a lot of information about the work-arounds necessary for handling SEF in the Phoca Gallery forums, I will note that you need to use the “photoalias” column that we added to the SQL query to build your SEF URL, and you will also need to make a non-displaying menu item to reference as an alias for your Phoca Gallery component.