Phoca Gallery Search Plugin: Display thumbnail images

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.

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.

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.

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.

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.

This entry was posted in Joomla and tagged . Bookmark the permalink.
  • zacs

    Hello imperialWicket,

    thank you so much for this article (sorry for my english, I’m italian).

    I followed your guide and now the search results redirect me to the correct page of category.

    I have a problem with thumbnails. In the search results I don’t see any thumbnail images.

    I have phocagallery 2.7.1

    Do you know what can I do?

    Excuse me for the disturb. Thank you, bye.

    • imperialWicket

      Hi zacs – The article above should work well when Search-Engine Friendly URLs are turned off, and when the PhocaGallery/Joomla directories are configured to use default locations. If you are experiencing issues with preview images it is likely due to unique PhocaGallery/Joomla configuration.
      In the interest of solving your problem, can you confirm that you are using the modified default_results.php file, and that you are at least seeing broken image links in your search results?

  • eavary

    Thank you very much for this fix… you’ve saved me a lot of time trying to sort this out for myself.

    I think that zacs problem may have to do with some odd artifacts in the code…

    your line 10:

    [code]
    <a href="href ?>">< ?php echo 'filename.'" ;="" ?=""> alt="title ?>" />
    [/code]

    should read:

    [code]
    <a href="href ?>"><?php echo 'filename.'"'; ?> alt="title ?>" />
    [/code]

  • eavary

    lol – I thought there my be some sort of bbcode enabled…

    I do have a question, though… on a normal view of the category, thumbnails are 100×100, but in the search they are 50×50, even though the paths to the assets are the same. Do you know where we set this value or where to intercept it so we can set it?

    Many thanks

  • eavary

    Sorry about this, but one more try on the code (the commenting system is stripping it down)… I think line 10 should be something like:

    <a href="href ?>”><?php echo 'filename.’”‘; ?> alt=”title ?>” />

  • eavary

    …still not working, but to those having a problem, just examine line 10 carefully :)

    • imperialWicket

      @eavary – Thanks for the careful review. I’ll investigate the code manipulation, the styling is getting tripped up in the php/html code and adding characters. You can download the sample file here: default_results.php (this is the same file referenced in the post).

      The thumbnail is hardcoded in the phocagallery.php file changes. Near line 175, in the $listImages foreach loop, we updated the text to generate a filename that includes: “thumbs/phoca_thumb_s_” in the path. This retrieves your small thumbnail. If you want the medium thumbnail, change those values to “thumbs/phoca_thumb_m_”, and you will be in business.

  • serchfx

    hello, i need help with your custom script of phoca search, in my website not display the previews, please you can send me the your file phocagallery.php and default_results.php, pleas help me :)

  • serchfx

    sry for my bad english im mexican :) thanks a lot

    • imperialWicket

      The default_results.php is available for download (see comment 7, or the article body). I can add a copy of the phocagallery.php file very soon for download. What version of PhocaGallery are you using?

  • serchfx

    hi imperialwicket thank you for respondt, my version of phoca is 2.7.5, what version you recommender?.
    i wait for your copy of the phocagallery.php :)

  • tyres

    Hi,

    I’ve got the same problem as a couple of the other guys. I implemented your fiz for displaying thumbnails in the Phoca searches, but no thumbnails appear, not even broken image links. I confirmed that the modified default_results.php was being used by adding a bit of HTML text in it, which duly showed up in the search results. But no thumbnails :-(

    Using Phoca Gallery 2.7.5, with the Phoca Search Plugin version 2.7.1. Maybe your phocagallery.php might shed some light … My Joomla version is 1.5.21 by the way.

    Thanks for sharing your work anyway. I implemented your fix for the ‘multiple keywords’ issue, and it works very well.

    I was hoping the thumbnails in the search results would act like a virtual ad hoc gallery.

  • zacs

    Hello, thank you for the answer. I’m sorry for my lately.

    I’m using the default_results.php file postes here, but I don’t see any thumbnail image. THere isn’t the box. :(

    Also, with SEF url enabled, the search results redirect me to error page, is it possible to resolve it?

    Thank you so much, sorry for my english.

    Bye.

  • tyres

    Hi,

    I think I’ve found the problem why the thumbnails aren’t appearing (for me anyway).

    In default_results.php you look for an array key ‘phocaimage’ in this line

    Well, that array key doesn’t appear to exist in the $result array in my version of the search results. As an experiment I made the test for the array key ‘phocaimage’ negative, like so;

    I then ran a search, and immediately got thumbnails showing!

    So it may be that there has been a change in the fields being used in this version (2.7.5) of Phoca, from the one you were using? Doing a var_dump of the $result array gives me this;

    object(stdClass)#156 (15) {
    ["title"]=>string(22) “test: Thames, Abingdon”
    ["text"]=>&string(120) “Thames, Abingdon: The River Thames near Abingdon  …”
    ["id"]=>string(2) “12″
    ["created"]=>string(23) “Sunday, 17 October 2010″
    ["slug"]=>string(28) “12:the-thames-above-the-weir”
    ["catslug"]=>string(6) “1:test”
    ["section"]=>string(32) “Phoca Gallery / Thames, Abingdon”
    ["browsernav"]=>string(1) “2″
    ["catid"]=>string(1) “1″
    ["catalias"]=>string(4) “test”
    ["filename"]=>string(75) “images/phocagallery/test/thumbs/phoca_thumb_s_The Thames above the weir.jpg”
    ["photoalias"]=>string(25) “the-thames-above-the-weir”
    ["photoordering"]=>string(2) “10″
    ["href"]=>string(104) “/joomla1.52/index.php?option=com_phocagallery&view=category&id=1:test&Itemid=53&limitstart=9″
    ["count"]=>int(1)
    }

    Does this show any changes from what your code would expect?

    Having said that, clicking the thumbnail takes me to the category list, which is not what I wanted. I wanted it to display the image in the ‘detail view’, but maybe that was not your intent?

  • tyres

    Ah, the PHP code lines I was referring to don’t show up, presumably stripped out by WordPress. However, I guess you know the code I’m referring to anyway! Just the bit in default_results.php that looks for the ‘phocaimage’ array key.

    • imperialWicket

      @tyres, @zacs, @serchfx – The default_results.php modifications are designed to search for a value in the search results (phocaimage – as tyres identified) that is not present by default; this keeps the default results file from trying to display thumbnails for non-phocagallery search results.

      I am working on an updated set of files for the latest Phoca Gallery, and I’ll make all of the files available shortly.

      @tyres – This tutorial details the technique for linking to the category, I’ve posted details about embedding a popup on the Phoca.cz/forum, I’ll dig for that and post a link. I usually configure the thumbnail to display the popup slideshow, and I allow the text in the search result to go to the category page. This just requires the dynamic generation of a second URL, and updating the default_results file so that it links the image to a modal popup, and links the text to the category (or any combination). If you want to use the modal popups, you also need to be sure that your search results page includes the necessary JavaScript libs.

      @zacs – As I mention at the end of the post, SEF in Joomla 1.5 causes issues with the Phoca Gallery, and this implementation alone will not work when SEF is enabled. There are a lot of good walk-throughs for SEF issues on the Phoca forums, I would recommend reviewing those first, if you have issues with that implementation, post on the forums, and I (or Jan/Benno/etc.) can assist.

  • tyres

    Hi imperialWicket,

    Thanks for the response. I figured that it should be possible to construct an URL that points at the detail view. However, I’m not that familiar with Joomla 1.5 (mostly having worked with the 1.0x versions) so I’m not immediately sure about how to do that. Need to study the 1.5 API.

    I was looking through the Phoca Plugin forum posts last night for stuff on modifying the Search plugin. I noticed a couple of posts by you in there. I probably wasn’t up to speed at that point so didn’t notice that you had posted about how to get the detail view. Probably it would make more sense to me now so I must go back and look for that.

    I’m looking to use Highslide JS popups, but I guess that’s probably just a matter of making sure the ‘class=highslide’ parameter is in there (for the search results thumbnails)… I already use that in my Phoca categories.

    Anyway, if I don’t figure it out myself I’ll look forward to your updated version! Many thanks.

  • serchfx

    Thanks @imperialWicket for you help, i will wait for u script thank you so much

  • tyres

    Ok, I’ve got it working now. The search returns thumbnails if there is a ‘phocaImage’ key in the $result array, otherwise it returns normal content.

    Took me a while to figure out how to get the images to load in Highslide JS popups. It kept loading the entire page! But I finally got it.

    I figured out that you added the ‘phocaImage’ key to the search results array (in phocagallery.php to differentiate the image results from standard content results.

    I’m sure your amended code will be much better though :-)

  • zacs

    Thak you for the answer.

    My problem with this script and SEF url is this:

    SEF url not enabled
    http://mysite.com/mymenu/mycategory/1-my-photo.html&limitstart=18

    SEF url enabled
    http://mysite.com/mymenu/mycategory/1-my-photo.html?start=18

    I have find on phocaforum but I can’t find nothing about SEF and phoca search plugin

    • imperialWicket

      @zacs, @tyres – Great work identifying and resolving my bugs and some of the features that I overlooked! I’m not sure that my code is any better, and I gloss over the Javascript loading issues using a cheat, but you can check out some updated files and new information (including SEF details) here.

  • tyres

    @imperialWicket – I get the necessary Javascript libraries for the Highslide popups in the search results by installing the Joomla Highslide extension, specifically the Highslide content plugin. I think that does a similar job to the Phoca Imageloader plugin you are using to load Javascript libraries for your SEF mod.

    I’m not using SEF at the moment, but if it becomes a requirement your SEF ‘fix’ might be useful! Thanks again for your help.

  • zacs

    @imperialWicket

    Hello.

    I have a problem with the search. The id of search result (http://………..html?limitstart=99) is not correct. It refers always to ordering of pictures (a.ordering). I would like to set it as “a.title”.
    Is it possible to change it?

    Thank you, bye.

    • imperialWicket

      @zacs – PhocaGallery looks in the get params for the image id/name (something like, “id=2:my-image-name”), and if it does not find them their (which indicates that SEF URLs are enabled), it parses the full path of the URL. During this URL parsing, it expects to find that same data at the end of the path (something like “^/menu/3-my-category-name/2-my-image-name” or “^/menu/3-my-category-name/2-my-image-name.html” – depending on your SEF configuration. PhocaGallery is not configured to search the URL for category pagination details, which is why the “?limitstart=x” is necessary at the end of the URL. Without that value, your category will always open on the first page of images. There’s really not a good way to remove the limitstart value, and still ensure that the appropriate image displays. Hope this helps, let me know if I misunderstood your request.

  • zacs

    @imperialWicket

    Thank you for explanations.
    My problem is what happens when I add (or remove) new images because it changes the alphabetical order of the images (that is not the same of the id order). I have to set manually the id of each images.

    • imperialWicket

      @zacs – I actually haven’t investigated the reordering options for images, but I can see how that might break the id and ordering logic (particularly in the code I posted here). I’ll do some troubleshooting and see if the manual id changes can be easily avoided.

  • yuzzo

    Very interesting article. I would like to implement it in version 1.6 of Joomla with the phocagallery 3.0. Your job will still work? Has anyone tried later to those listed?

    It ‘really strange that has not yet been implemented in the new versions of Phoca’s standard plugins

  • http://imperialwicket.com imperialWicket

    I need to test this with the latest release of phocagallery and joomla 1.6. I have not had much opportunity to work with Joomla 1.6 yet, but this is a good excuse to get my hands dirty.

    I know that Jan put a couple of these articles on the FAQ page, and when I originally authored them he and the Phoca team were busy with 1.6 compatibility updates. If these mods still work in PhocaGallery 3.0, I’ll repost in the forums and see about getting the feature included. There may be security or design issues that I am not considering, or fringe cases that would cause undesirable behavior; we’ll see.

  • vf

    Hi, tanks for the provided article. I would also like to implement it into phocagallery 3.0 in combination to J1.7/2.5. I managed to insert the code to the phocagallery.php (just line numbers are different). But the default_results.php looks totally different in comparison to the provided file. I think my knowledge is to less to come to a working solution.

    Any new approaches to the topic.

    • http://imperialwicket.com imperialWicket

      I’m working on this, should be ready later this week.