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 [!!!!!! As eavary points out in the comments, there are a couple of issues in the text below resulting from style issues and php code parsing; either use this as a guide to make your own edits, or download the finished file using the link above. For those who like to live dangerously, cut and paste out of the sample below with caution !!!!!!]:
< ?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.
UPDATE: After some troubleshooting and a few questions, I posted an updated version of this information here. Check it out.