V5 development progress - Image indexing and thumbnails

**wrensoft** · 10-24-2006, 11:03 PM

There are several ways to add an image or icon next to each search result.

1) Add ZOOMIMAGE meta data to each page which tells Zoom which image to use with the page.

2) Display the same icon for every page of a particular type. e.g. a PDF icon

3) Link pages and image using the page file name. For example you can create a series of image files that have the same name as the page. So if your file was dog.html the image file could be dog.jpg.

In each instance Zoom needs to be told which image should be used. It never attempts to guess if an image might be appropriate for the page in question. These options can be selected from the "Scan options" tab in the Zoom configuration window.

**MikeR** · 10-25-2006, 09:31 AM

Any chance possible to assign a thumbnail based on the category?

I have many documents that have the PDF, DOC, TXT, etc... in different categories. I think it is a great feature now to be able to show a thumbnail to identify the file type.

I suppose I could do it by having an thumbnail for each file in the category but with over 150,000 files that's a lot of thumbnails to have to generate.

For example every file in the /docs/productguide/ folder could have a particular thumbnail and every file in the /docs/releasenotes/ could have a thumbnail, etc...

My categories follow my directory structure and would be nice to have a global thumbnail for each directory instead of file.

Thanks

**wrensoft** · 10-25-2006, 12:54 PM

We don't support assigning an image per directory. Only per file or per file type.

But if you are a web server expert, you could do something tricky. Like do some some URL rewriting to map all HTTP requests for image files in a particular directory to a single image file. We don't have a script to do this but it should be possible.

**MikeR** · 10-26-2006, 01:14 AM

Originally Posted by wrensoft

We don't support assigning an image per directory. Only per file or per file type.

But if you are a web server expert, you could do something tricky. Like do some some URL rewriting to map all HTTP requests for image files in a particular directory to a single image file. We don't have a script to do this but it should be possible.

It's easier to just create a individual thumbnails

. Here is a very quick command that could probably use refinement...but it works.

find productguides | awk -F"/" ' NR>1 { gsub("\\.(pdf|xls|doc|txt|htm|html)$",".jpg",$NF); print "cp /home/images/pgthumb.jpg \"/web/images/" $NF "\"" }' |sh

This command will find any file in the /productguides folder and create a thumbnail from a single JPG file you specify, for each of those files.

That way if you have a special icon you want to use for a category of documents no matter what the extension is, you can do it this way.

**samuelmaxton** · 08-15-2011, 06:01 PM

I added the code "display: inline;" for both .result_block and .result_altblock but there was no change in results format, still displayed vertically instead of flowing from left to right.

Anything I'm missing or any reason why that would not change the way the results are displayed?

Thanks,
Sam T

**Ray** · 08-15-2011, 11:51 PM

It would depend also on the width of the elements, or if the containing element has enough room for it (within its margins, paddings, etc.). It might be easier for us to say what's wrong if you can show us the actual page.

**samuelmaxton** · 08-18-2011, 11:29 PM

Hey, here's my search_template. What I'm looking for is to have the images flow horizontally and down and for the title and description of each image to be under the image. I'm really confused as to what should be "inline" or "block" or floating left.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />

<style type="text/css">
.highlight { font-weight: bold; }
.searchheading { font-size: 130%; font-weight: bold; text-align: center;}
.summary { font-size: 80%; font-style: italic; }
.suggestion { font-size: 100%; }
.results { font-size: 100%; }
.category { color: #999999; }
.sorting { text-align: right; }

.result_title { font-size: 100%; text-align: center; display: block; }
.description { font-size: 100%; color: #008000; text-align: center; display: inline;}
.context { font-size: 100%; }
.infoline { font-size: 80%; font-style: normal; color: #808080;}

.zoom_searchform { font-size: 100%; display: block; }
.zoom_results_per_page { font-size: 80%; margin-left: 10px; }
.zoom_match { font-size: 80%; margin-left: 10px;}
.zoom_categories { font-size: 80%; }
.zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
.zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }

.cat_summary ul { margin: 0px; padding: 0px; display: inline; }
.cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }

input.zoom_button { background: #CC9900; }
input.zoom_searchbox { background: #99FFCC; }

.result_image { margin: 5px; width: 200px; float: left; }
.result_image img { margin: 5px; width: 200px; border: 0px; }

.result_block { margin-top: 15px; margin-bottom: 15px; display: inline; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; display: inline; }

.result_pages { font-size: 100%; clear: left;}
.result_pagescount { font-size: 100%; }

.searchtime { font-size: 80%; }

.recommended
{
background: #DFFFBF;
border-top: 1px dotted #808080;
border-bottom: 1px dotted #808080;
margin-top: 15px;
margin-bottom: 15px;
}
.recommended_heading { float: right; font-weight: bold; }
.recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.recommend_title { font-size: 100%; }
.recommend_description { font-size: 100%; color: #008000; }
.recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
.recommend_image { float: left; display: block; }
.recommend_image img { margin: 10px; width: 80px; border: 0px; }
</style>
</head>

<body style = "background: #CCCCFF;" onload="if (document.getElementById('zoom_searchbox')) {document.getElementById('zoom_searchbox').focus() ;}">








</body>
</html>

**Ray** · 08-19-2011, 01:59 AM

The earlier instructions were for disabling all the text results (titles, descriptions) and only using images. You have no images however, and have purely text results, so its different.

I presume you want a grid of boxes for the search results. In which case, you need to define some specific width and height for each result (previous example relied on the images having set dimensions).

So something like this:

Code:

.result_block { margin: 15px; display: block; float: left; width: 200px; height: 400px;}
.result_altblock { margin: 15px; display: block; float: left; width: 200px; height: 400px; }

Change the width and height to fit the results. Hope that helps.

**samuelmaxton** · 08-19-2011, 05:42 PM

Hey - a little confused. I am searching by image and Zoom is currently finding image files in my .php pages and is finding images linked to pages via meta data. My results page using the search template above does deliver images in the results page.

I need to know how to group images like in the previous example mentioned but with the title and description below the image. If this is possible I haven't figured out a way to do it by only modifying the template. Please help!

Thanks,
Sam T

**laptrinhwebqq** · 07-09-2012, 07:28 AM

Thanks Admin ... would it be possible to include it in the RSS output?

Thread: V5 development progress - Image indexing and thumbnails

Thread Tools

Display

images flowing left to right in results

images flowing left to right in results with title and description under each image

I do have images!

Similar Threads

Zoom Seach V5 - XML/RSS output for A9 & Opensearch

V5 development progress - Recommended links

V5 development progress - Indexing enormous sites

V5 development progress - Charset by page

V5 development progress - Content filtering

Posting Permissions