Top
Search this site:
Enterprise Search Blog
« NIE Newsletter

How do I make an easy results list template? - Ask Dr. Search

Last Updated Mar 2009

By: Mark Bennett

Ask Dr. Search

This month's question is from a reader:

Dr. Search,

I like our site's search engine because it is highly customizable. We have complete control over the header and footer of the results list, and I can put in any HTML I want.

What I'd like to do is make our results list look like the rest of our site, with all of our colors and graphics, and our standard navigation menus.

The problem is that when I add our standard template HTML code to the result list, all the images links are broken! I investigated a little further and found it's because all of our images use URLs relative to our home page, but the search engine is on a different server so none of the images show up properly.

If I edit the HTML manually and replace the <img src="images/button/gif"> with a complete reference like <img src="http://myserver.com/images/button.gif"> it does work, but we have LOTS of images. Then I discovered that, even with this fix, all the links were bad too, and it also wasn't finding our CSS files either!

Do I really have to edit ALL this stuff by hand? And when our layout changes again, I have to do this all over again? Is there some magic solution?

Help!

Dr. Search replies:

This is a very common problem. The good news there is a little known but easy fix!

As you've discovered, lots of items in HTML pages can use relative links (where there is no "http://" prefix). Web browser programs, such as Internet Explorer, add these relative links to the URL of the page the link is on to derive the complete link. Your problem is that the URL of your search results is not on the same server.

The fix is to tell your browser to use a different URL as the "base" URL. Fortunately HTML does have such a tag! And it's called the "<base>" tag. Because you probably generate your result list from an ASP or JSP script, you will need to add this base tag to your result list template script.

The base tag goes in the head section of your HTML page, preferably near the top. The "href" attribute contains the actual URL to use as the base.

<html>
<head>
	<base href="http://myserver.com/">
	<title>Search Results</title>
	… other header tags …
</head>
<body>
….
….  your main content ….
<img src="logo.gif">
….
</body>
</html>

In the IMG link above, the actual image displayed is http://myserver.com/logo.gif,

This should fix ALL the relative references in your results list, including:

  • image references
  • hyperlink references
  • form tags
  • CSS references
  • even Javascript references!

This really is an amazingly helpful tag, and it's been around for quite some time. Spread the word!

Write us with your Enterprise Search question at support@ideaeng.com.