Phoca Gallery: Enable SEF URLs and Better Searching (Joomla 1.5.x)

Posted on October 19, 2010 by imperialWicket

Make sure you have a working Joomla 1.5.x (I'm using 1.5.21) installation and the Phoca Gallery Component (I'm using 2.7.5) and Phoca Gallery Search Plugin (I'm using 2.7.1) are installed and enabled.

Enable SEF - this is tricky because your Phoca Gallery Images do not exist in proper Joomla categories, so Joomla does not really know how to build the SEF URL (Joomla uses the category alias to build the SEF URL). The way around this is to generate a phony menu item that will serve as a shell for housing all of your Phoca Gallery content.

1. Go to Menus - Menu Manager.
2. Select "New" from the Menu Manager toolbar.
3. Let's call the menu "hidden" (Unique Name = hidden, Title = hidden).
4. Go to Extensions - Module Manager.
5. Select "New" from the Module Manager toolbar.
6. Select Module Type "Menu", then "Next" from the Module: [New] toolbar.
7. Provide a Title - Something like, "PhocaGallery Utility" will do.
8. Set "Enabled" to "No", and choose the "Menu Name" option for "hidden" - the menu item we just created.
9. Go to Menus - hidden.
10. Select "New" from the Menu Item Manager: [hidden] toolbar.
11. Choose Menu Item Type Internal Link - Phoca Gallery - All Categories - Phoca Gallery Category List Layout
12. Provide a meaningful title, this alias will be in present in your SEF URLs to categories, I usually use "gallery" or "photos" ("gallery" is hard-coded in the downloadable files).

Now, enable SEF URLs and configure a Phoca Gallery instance. In order to get what I am dubbing "Better Searching" (support for any, exact, all options; thumbnail with modal popup; and categories that load to the correct location), you must replace two files:

JOOMLA_ROOT/components/com_search/views/search/tmpl/default_results.php
JOOMLA_ROOT/plugins/phocagallery.php

Files available for download here: phocaGallerySearchMods

The phocagallery.php file is accessed when users initiate a search, and handles retrieving a search result dataset for the provided search criteria. It then passes the search result dataset to the Search Component, which uses default_results.php to display the results. The updated phocagallery.php file pulls slightly different data from the Phoca Gallery database tables, and then the updated default_results.php file checks to see if that data is included in the resultset. If default_results.php finds the Phoca-Gallery-specific data, it assumes the search result is an image and loads a different search result template.

One final update, in order to get the modal popup slideshow working, you need to be sure that the appropriate JavaScript libraries are displaying on your page. There are alternative ways to do this, but the easiest is to add the Phoca Gallery Image Module (use the latest 2.7.1 release) to your Search component page. The image module will check for your current configuration, and make sure that all of the appropriate JavaScript libraries are loaded, and this will ensure that your modal overlays are working as expected. If you want this benefit but without the module, try styling it to be hidden on this screen (I'm not sure if this works, but it would be a nice little hack!).

Note that the files here will require modification to work properly if:
1. SEF is disabled.
2. You upload images to a custom directory (not images/phocagallery/).
3. You named the hidden menu item something other than "gallery"

This is working in a basic Joomla 1.5.21 install in Apache on XP, Win7, and Linux for me. I don't think I skipped any steps or left anything out, but if you encounter issues, hit the comments with any questions - it is entirely possible that I glossed over something that deserved more attention. If you are looking for a lot of help, or need heavy customization, don't forget about the Phoca Forums.

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

mikac

Great tip. I haven’t tried it though, because I’m using sh404SEF for Joomla. Do you have any suggestions for it? URL’s are generally fine, except I have a number in front of every category and subcategory link : /category/8-salads.html /68-cheese-salad.html – this is a subcategory, /category/5-fish-and-seafood.html… ans so on…

Another thing…Google doesn’t see my pictures. I have like 1750 pictures in Phoca Gallery but non is seen by Google? Any idea why? Thanks

p.s. I’m using Joomla 1.5.21, Phoca 2.7.5 with latest plugins.
- imperialWicket
  
  @mikac – I’m not sure about the intricacies of sh404SEF, I always seem to run into errors when I try to use that extension. It does great things on its own, it just doesn’t seem to play well with others in my experience. Regarding Google and site-mapping, the only way to get Google to see your pictures effectively is to have the single picture display on an html page (this would be the “No Popup” option). You can configure an XMap extension and get Google to see your pages, but your photo won’t appear in Google. See the forums for some insight.
  
  @zacs, @serchfx – Glad this helped you along the way, and allowed you to customize to meet your needs.
  
  @zacs – The modal popup html/css references are hard-coded in the default_results.php file. If you have a category set up in your Joomla site, and configure Jak Lightbox for your detail window, just load the category page, and view its source. Each div with class “phocagallery-box-file” will include an anchor tag that can be used to generate the Jak Lightbox. Carefully replace line 20 of the page_results.php file with the Jak Lightbox html/css (just pay attention to replacing the title, image url, and filename values correctly), and it will launch from your search results.
  
  Good luck!
zacs

imperialWicket, thank you so much! it work with SEF very well!

Is it possible to use “Jak lightbox” preview in the search results page?

Thak you, bye.
serchfx

thank you so much, finally i can configure your script only change this

//*******************************************************
// The SEF URL alias is hard-coded below “gallery”
//*******************************************************
$listImages[$key]->phocaImage = ‘gallery/’.$value->catid.’-’.$value->catalias.’/detail/’.$value->id.’-’.$value->photoalias.’?tmpl=component’;

for this

//*******************************************************
// The SEF URL alias is hard-coded below “gallery”
//*******************************************************
$listImages[$key]->phocaImage = ‘images/phocagallery/’.substr($listImages[$key]->filename,0,(strrpos($listImages[$key]->filename,’/'))).”.substr($listImages[$key]->filename,(strrpos($listImages[$key]->filename,’/')));

for read files of original folder (images/phocagallery), only i have a problem with the popup because the image have a diferent to size of popup, but thank you man
zacs

@imperialWicket

Thank you for the answer.

Is it normal that, using your default_results.php there isn’t the preview box in the result search? There is a link like this:

http://mysite.com/gallery/1-mycategory/detail/119-imgp4327?tmpl=component
- imperialWicket
  
  @zacs – I’m not sure I understand what you mean by ‘preview box’. Is that the thumbnail image itself, or the popup overlay that should launch when you click on the thumbnail? Or something else?
  Line 20 in the default_results.php file handles displaying a preview thumbnail, and triggers the modal popup when clicked. This thumbnail, and it’s anchor tag for launching the popup overlay, will only display if the returned search result is a Phoca Gallery Image. I would note that if a search result is a Phoca Gallery Category it will fall through to the default Joomla search result treatment.
  Also, if the JavaScript libraries are not loaded, the browser will throw a JavaScript error (likely this will be silent) upon clicking on the preview thumbnail. If this happens, the browser usually loads the image itself in an otherwise empty window. If this is happening, see tyres’s comment 22 here. His note is particular to the Highslide libraries. You can also use the Phoca Image Module to load the appropriate JavaScript as I detail in that same post. You just need to be sure that the popup style you hard-code in default-results.php is the same popup style that Phoca Gallery’s parameters have set for the detail window. Those are the libraries that the PG Image Module will load.
  Neither of those techniques are very clean, IMO. But loading custom JavaScript libraries and other head tag updates in Joomla is its own topic (which I’ll try to post about soon).
zacs

@imperialWicket

Thank you so much for explanations.

I don’t view the thumbnail image in the result page, there is a link like this:

http://mysite.com/gallery/2-mycategory/detail/mypicture?tmpl=component

If I click on this link, the popup opens up with the correct image.
- imperialWicket
  
  @zacs – If the link is present and is using the appropriate css class for the overlay to work, and the img tag is also on the page, but no image displays, then the img tag is probably using an invalid image path. Can you confirm that the img src value actually points to an image? If not some troubleshooting in the phocagallery.php file in the search plugin may be necessary to get a valid path to your image.
zacs

@imperialWicket

I have checked the img src value in the result page.
The img src link is:

http://mysite.com/images/phocagallery/mycategorythumbs/phoca_thumb_s_/mypicture.JPG

that is a not valid link

If I edit it in:

http://mysite.com/images/phocagallery/mycategory/thumbs/phoca_thumb_s_mypicture.JPG

I can see the link in the browser, it’s a valid link.

Maybe I have to edit the phocagallery.php to remove the “/” between phoca_sthumb_s_ and the name of picture.
- imperialWicket
  
  @zacs – It looks like you are using an older version of either PhocaGallery or Joomla. I didn’t troubleshoot why the parsing technique needed to change, but in my older instance the filename that is stored includes the preceding “/”, whereas it is ignored in the newer versions.
  
  Short answer – change line 229 to include:
  
  $listImages[$key]->filename = ‘images/phocagallery/’.substr($listImages[$key]->filename,0,(strrpos($listImages[$key]->filename,’/'))+1).’thumbs/phoca_thumb_s_’.substr($listImages[$key]->filename,(strrpos($listImages[$key]->filename,’/'))+1);
  
  Note the two additional “+1″ values, these update the substrings to include the slash between “mycategory” and “thumbs” and to avoid the slash between “phoca_thumb_s_”and your image name.
zacs

@imperialWicket

Thank you very much for your help.

Now the img src url is correct and the thumbnails appears correctly.

Many thanks.

I do not know why I had this problem. I have Phocagallery 2.7.5 (but updated from 2.7.1, maybe this has caused the error) and phocagallery search plugin 2.7.1.
mikac

Well…imperialWicket, I have a few questions before I undergo your solution…

Can you maybe make a plugin that does what you described automatically? It would be much appreciated!

The other thing is again about sh404sef…do you think it will work with it like with core Joomla SEF?

And finally, do You have any idea how can I “disable” ID to show in Phoca Gallery URL’s?

Thanks very much.
- imperialWicket
  
  @mikac – I’m holding off until the Joomla! 1.6 release for any complete plugin integration. I’m hoping the built in search component gets a little attention.
  
  The SEF functionality for supporting search *should* work fine whether sh404SEF is enabled or not. That said, there are a lot of things you can do in your sh404SEF (or ACEsef, JoomSEF, etc.) that can cause issues with components that rely on GET params to load correctly. In ideal cases, everything will work fine, but if you try to replace complex URLs with simple URLs, components end up trying to launch without the required parameters detailing the intended content to load.
  
  I saw your ID inquiry on the forums (assuming the username is consistent…) and am looking through the code. Right now, I don’t think Phoca Gallery enforces unique alias values, so the ID ensures that there isn’t a conflict when investigating the category name. This would be an interesting update to the Phoca Code, I’ll investigate a little, but it seems like a substantial amount of work.
mikac

Thank You imperialWicket

I already changed Detail view to “No popup” option, and I think it’s much better for SEO. Yes, that’s my username you saw on a couple of Forums…

I think if I resolve this URL ID issue with Phoca, I’ll be perfectly fine. It’s really important for me to have all the pictures indexed by search engines, and Phoca just needs a little more tuning.
Is it so hard that each category is listed in url and each subcatgeory with category name, and the name of itself… ex. myname.com/food and myname.com/food/chicken

If you manage to find some solution for this I’ll be glad to know.. Just tell me where to look …

Regards
capo

Thanks imperialWicket. Your effort on getting the image thumbnails in search results is just what I am looking for.

Have you seen the ijoomla search and archive product yet? It can generate and return the thumbnails images automatically for images in an article. It can’t however work the same magic when the image path only appears in a Phoca plugin, arizoom plug-in or the like.

Here is a demo site using the ijoomla product:
http://thebbse.com

If you search the term 3530 you will see 3 articles returned. The second one is the one with the arizoom plug in.

The ijoomla “PHP code portions are distributed under the GPL license”. Here is the code for pulling the image paths out of the articles:

<?php

//function to extract first image from txt
//and display it as thumbnails
function extract_first_image($left_str){

//see if we have image in txt
$photo = stristr($left_str, '<img');
if($photo != ""){
//get a array with all images on txt
$search = explode("/’,$search);
$array_first = array_values($array_first);
$array_first[0] = str_replace(“\n”,” “,$array_first[0]);
$array_second = explode(” “, $array_first[0]);
//if user has blank spaces in photo name
//verify each array value (photo name array)
//and put toghether photo name, split by explode() after blank spaces
/* $nr_array_second = count($array_second);
foreach($array_second as $array_second_row => $array_second_value){
if((stristr($array_second_value, ‘SRC’)||stristr($array_second_value, ‘src’)) && (!stristr($array_second_value, ‘jpg’) && !stristr($array_second_value, ‘png’) && !stristr($array_second_value, ‘gif’))){
for($i = $array_second_row; $i++; $i<=$nr_array_second){
if((stristr($array_second[$i], 'jpg') || stristr($array_second[$i], 'png') || stristr($array_second[$i], 'gif'))){
$array_second[$array_second_row] .= " ".$array_second[$i];
break;
}else{
$array_second[$array_second_row] .= " ".$array_second[$i];
unset($array_second[$i]);
}
}
}
}*/
$array = preg_grep('/(SRC=("|\')|src=("|\'))(.*)(jpg|png|gif|JPG|PNG|GIF)("|\')/',$array_second);
$array = array_values($array);
if(is_array($array)){
$array[0] = str_replace("'","",$array[0]);
$array[0] = str_replace('"',"",$array[0]);
$array[0] = str_replace('SRC=',"",$array[0]);
$array[0] = str_replace('src=',"",$array[0]);
if(strstr($array[0], 'http') && !strstr($array[0], JURI::base())){//
//remote photo get width & height
$width = array_values(preg_grep('/(width=("|\'))(.*)("|\')/',$array_second));
$height = array_values(preg_grep('/(height=("|\'))(.*)("|\')/',$array_second));
$poz = array($array[0],$width[0],$height[0]);
//}elseif(!strstr($array[0], 'images/stories/')){
//remote photo get width & height
// $width = array_values(preg_grep('/(width=("|\'))(.*)("|\')/',$array_second));
// $height = array_values(preg_grep('/(height=("|\'))(.*)("|\')/',$array_second));
// $poz = array($array[0],$width[0],$height[0]);
}else{
//local photo
$array[0] = str_replace(JURI::base(),"",$array[0]);
$poz = $array[0];
}
}
return $poz;
}else{
return FALSE;
}
}

Seems like some tweaking there would allow for peaking into the image path defined in the plug-in. Way past my ability though.

Appreciate any insight you can give.

Thanks.
- imperialWicket
  
  @capo – I will check out the ijoomla extension, and see if I can help, but I’ll likely post to a new article, as the code here will only work for the Phoca Gallery extensions.
hockey2112

Hello,

I implemented this add-on on this website: http://tinyurl.com/26zx3dt

However, I can’t get the modal pop-up to work correctly. Whenever you click a thumbnail in the search results, it opens the larger image in a new window; I want it to open in the “lightbox” type of window that is the default behavior of the phoca gallery, allowing the searcher to remain on their search results page with the larger image overlaid.

I did add the Phoca Gallery Image Module to the page via the Content – Load Module plugin, but this did not make any difference. In fact, if you click the image produced by the inclusion of this plugin, the larger image opens in the same window (not even in a new window). It seems to have zero effect on the search results images.

Any ideas?

Thanks for a great add-on!
- imperialWicket
  
  @hockey2112 – The modal and squeezebox javascripts need to be present on the page to get the modal popups to work. The PhocaGallery Module should be adding this automatically; I’ll have to troubleshoot why it isn’t. If you want to manually add them, just check your gallery pages (where the modal popup is working). There is a modal.js included and an inline squeezebox launcher script. There is also a PhocaGallery css file and a modal.css file that will be necessary for styling the modal popup. Once these scripts are included on your search results page, the modal popup will work.
  
  What versions of Joomla and PhocaGallery (Image module, Search plugin, and component) are you using?
hockey2112

Adding those items worked perfectly! Thanks for your help!
sapo

Hi
first thanks a lot for the post and the files.
I’m using Joomla 1.5.22; PhocaGallery 2.7.7; Phoca Gallery Search Plugin 2.7.1
My site is [url]http://www.natur-fotograf.ch/[/url]
I’m trying since 6 hours to bring up some Picture on search module, unsuccessfully
File to replaceJOOMLA_ROOT/plugins/phocagallery.php is on my joomla version on
JOOMLA_ROOT/plugins/search/phocagallery.php

on search no thumbnail available on my site
Can you help me?
- http://imperialwicket.com imperialWicket
  
  In the phocagallery.php file, around line 229, there is a parsing issue. For some reason these strings change subtly from version to version of Phoca Gallery. The problem is that your ‘filename’ value (set around line 229) is losing the ‘/’ before the ‘thumbs’ text, and it is keeping the slash before the actual filename.
  
  I believe something like this should work:
  
  $listImages[$key]->filename = ‘images/phocagallery/’.substr($listImages[$key]->filename,0,(strrpos($listImages[$key]->filename,’/'))).’thumbs/phoca_thumb_s_’.substr($listImages[$key]->filename,(strrpos($listImages[$key]->filename,’/')+1));
  
  The only changes are to manually add a ‘/’ before the hard-coded ‘thumbs’ text, and add a ‘+1′ to the substring starting position (to remove the ‘/’ before the filename).
  
  Hope this helps, good luck!
  - sapo
    
    Thanks a lot, it works with
    $listImages[$key]->filename =
    ‘images/phocagallery/’.substr($listImages[$key]->filename,0,(strrpos($listImages[$key]->filename,’/'))).’/thumbs/phoca_thumb_s_’.substr($listImages[$key]->filename,(strrpos($listImages[$key]->filename,’/')+1));
    
    Great. Thanks
- sapo
  
  Thanks for helping
  i compared the line 229 with your text and i only found the difference ‘+1′
  
  What do you mean with:
  The only changes are to manually add a ‘/’ before the hard-coded ‘thumbs’ text
  
  Thanks a lot
http://www.garretbohl.com Garret Bohl

Hi,
Great post, I’m working on implementing these things now on my site, really disappointed with the way the urls work by default. So does this make it so (I have them set to open in a different page), would this make the image page url something like index/category/imagename? thats what i’m trying to achieve. Also i had another question, I notice you talk about the image thumbnails in phocagallery and making them appear in search, for me what I want is the main images to show up in search. My phocagallery image thumbnails currently do but I would like the main larger size images to appear in search instead and it doesn’t seem like they do. Any advice? Thanks, my site is http://www.garretbohl.com . Also i’m on joomla 1.6, will it likely work the same?
- http://imperialwicket.com imperialWicket
  
  One note – I still haven’t had the opportunity to spend much time with 1.6 and the latest PG release. I am meaning to do it, but it keeps getting offset by maintenance work.
  
  That said, 1.6 changed the native SEF URLs implementation, and it may be easier to implement the search (as in, not necessary to create a dummy menu item). I’m also not sure I understand your target functionality, are you trying to use phocagallery to display a single image, but you want it to display on a page, and not in a modal popup? As I recall (again, in older PG releases), this is a bit tricky since PG really centers its efforts on paging through galleries. Since this tends to be a lot cleaner with a modal javascript overlay, that is the focus of a lot of its options.
  
  Regarding search results, if you used the technique I outlined (and the phocagallery.php file in the attachment here), the resulting search result link includes the image located at ‘images/phocagallery/thumbs/phoca_thumb_s_’. If you change this reference to be ‘images/phocagallery//’, you will get the raw file. It may be prudent to consider using the largest phoca thumb, in the thumbs directory, since this will give you a larger image, but all images will be of a consistent size. With varying sizes, your css will need to be very cautiously generated to avoid strange positioning behavior in your search results.
  
  Hope this is helpful, feel free to post follow ups. Also, the Phoca Forums can be helpful for tips/tricks when it comes to configs and customizing Phoca behavior. I hang out there from time to time.
Alan

Hi, the thumbnail image isnt appearing. when i click on it this message apperars:

requested URL /gallery/11-color-block/detail/417-mg1669-1 was not found on this server.

I think the problem is that the images are inside different folders. One of the paths is this:

/home/botoesec/public_html/images/phocagallery/Color_Block/

How can i fix that to make the thumbnail image appear in the search?
- http://imperialwicket.com imperialWicket
  
  @Alan – The path is definitely important, and it looks like your image path will need to include ‘phocagallery’ instead of ‘gallery’ in the code. However, rather than troubleshooting the URL that is present when you click on the image, can you provide the relative URL that Joomla is using to attempt to display the image? It sound like you really have two problems, the first is that your thumbnail image is not displaying, and the second is that the thumbnail image links to an inappropriate location. I think it’s worth getting the thumbnail to display as a first measure.
sapo

Hi, I used this great workaround already on joomla 1.5. Now, i have Joomla 2.5 and need a new workaround. I now you are very busy, therefore I will spend 20 € for a new workaround to make it more attractive. Maybe others like to make a donation also? Please, Please, help us.
- http://imperialwicket.com imperialWicket
  
  I’ll take a look, stay tuned.
  - http://imperialwicket.com imperialWicket
    
    I installed the following:
    Joomla 2.5.8
    Phoca Gallery Component 3.2.3
    Phoca Gallery Search Plugin 3.0.1
    
    Then in the Joomla administrator area (Site -> Global Configuration) I made sure that SEF URLs were enabled, and that Use URL rewriting was also enabled. After changing either of these options, you may need to restart Apache.
    
    After this, I created categories and images within the Phoca Gallery component. At this point, SEF urls were working properly for Phoca content, and search was working as I would expect it (Any/All/Exact are all queried successfully).
    
    At this point it seems to me that Joomla and Phoca enhancements have resolved any concerns I had with SEF URL support and/or support for proper search behavior given conditional constraints in a search request. Let me know if you see distinct behavior in similar versions and I’ll try to assist.

Phoca Gallery: Enable SEF URLs and Better Searching (Joomla 1.5.x)

Pages

Recent Posts

Categories

Links

Meta