Help Center

Menu

Presenting images in search results

Introduction

Funnelback includes several tools for assisting in the presentation of images within search results. Most scenarios requiring images to appear in search results fall into one of two categories:

  1. Generating a scaled-down thumbnail of an image associated with a result (scale)

  2. Generating a preview of how a result would appear in a user’s browser (preview)

Adding large amounts of images to a search results interface can significantly increase page weight and load time - cautious use is advised.

  • Image scaling is limited to source images with a maximum size of 800kB.

  • JPEG/JPG files using the CMYK color space are not supported.

  • Web fonts are not supported by the web page previewer. Generic font-family replacements are used instead.

Resizing images using /s/scale

Images available for presentation within search results are often sized inconsistently, making it difficult to create a consistent result presentation. To assist with this problem Funnelback includes tools for easily resizing and cropping images to a desired size.

Funnelback’s scale tool is presented simply as a URL which will return an appropriately transformed image based on a set of parameters. The tool is available at the following URL in the modern UI.

http://search-server.example.com/s/scale

The following parameters must be provided:

  • url: The URL of the source image. This may be created based on the URL of the search result, extracted from metadata, or determined in any other way as required.

  • width: The desired width of the resulting image in pixels.

  • height: The desired height of the resulting image in pixels.The following additional parameters may be provided:

  • format: The image format to be produced. PNG images are produced by default, other supported values are jpeg and gif.

Scaling Type

Several scaling methods are supported. Available options are listed below.

  • type=keep_aspect: Retain the image’s aspect ratio and treat width and height as maximum rather than exact values.

  • type=ignore_aspect: Resize the image to the exact size specified by width and height, even if it must be stretched/squashed to do so.

  • type=crop_(vertical)_(horizontal): Crop the image, retaining only one section of the image to ensure the image does not need to be stretched. (vertical) and (horizontal) determine which part of the image to retain. Possible values: crop_top_left, crop_top_center, crop_top_right, crop_center_left, crop_center, crop_center_right, crop_bottom_left, crop_bottom_center, crop_bottom_right

Example usage of image scaling

<img src="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg &width=80&height=60&format=png&type=keep_aspect" alt="Thumbnail of Funnelback Logo" />

Example of image scaling for different screen sizes / resolutions

For use with <picture> and srcset. Width and height of scaled image change depending on screen width and resolution.

<picture>
<source srcset="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=800&height=154&format=png&type=keep_aspect" media="(min-width: 1200px)">
<source srcset="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=400&height=77&format=png&type=keep_aspect 1x,
	http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=800&height=154&format=png&type=keep_aspect 2x"
	media="(min-width: 768px)">
<source srcset="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=200&height=39&format=png&type=keep_aspect 1x,
	http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=400&height=77&format=png&type=keep_aspect 2x"
	media="(min-width: 460px)">
<source srcset="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=100&height=19&format=png&type=keep_aspect 1x,
	http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=200&height=39&format=png&type=keep_aspect 2x"
	media="(max-width: 459px)">
<img src="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=800&height=154&format=png&type=keep_aspect"
	srcset="http://search-server.example.com/s/scale?url=http://www.funnelback.com/logo.jpg&width=200&height=39&format=png&type=keep_aspect" alt="New Funnelback Logo">
</picture>

Rendering image previews of web pages using /s/preview

In multi-domain search services it is useful to present a preview of the web page behind each search result to allow users to visually recognise sites. To allow this, Funnelback provides a system for rendering previews of web pages which can be presented alongside search results.

Funnelback’s URL preview tool is presented simply as a URL which will return an image preview of a given web page URL based on a set of parameters. The tool is available at the following URL in the modern UI:

http://search-server.example.com/s/preview

The following parameters must be provided:

  • url: The URL of the web page to preview. This would normally be the URL of the current search result, but may be any other HTML page as required. Note that only web pages (and not binary documents such as Word or PDF documents) are supported.

  • width: The desired width of the resulting preview in pixels.

  • height: The desired height of the resulting preview in pixels.The following parameters may be provided:

  • format: The image format to be produced. PNG images are produced by default, other supported values are jpeg and gif.

  • render_width: Sets the width of the web browser window to render with before scaling to width (defaults to 1024 pixels).

  • render_height: Sets the height of the web browser window to render with before scaling to height (defaults to 768 pixels).

Scaling Options

The scaling options described in the image scaling section above are also supported.

Example image preview usage

<img src="http://search-server.example.com/s/preview?url=http://www.funnelback.com&width=80 &height=60&render_width=1024&render_height=768&type=keep_aspect" alt="Thumbnail of Funnelback Homepage" />

Restricting permitted web page URLs

A search administrator may wish to ensure only certain URLs are processed by Funnelback. To do so a setting is available in the global.cfg configuration file.

default_url_renderer.permitted_url_pattern=.*

This setting may be changed to any regular expression, and only URLs which match the given expression will be processed by Funnelback.

Caveats: preview

  • Web fonts are not supported. Generic font-family replacements will be used by the previewer instead.

Clearing caches

Funnelback automatically caches copies of scaled images and URL preview images to avoid the need to process them repeatedly. When the underlying image is changed, the cache must be cleared to cause the new version of the image to be displayed.

The cache can be cleared either for a specific scaled image or for all scaled images with the following requests:

Clear cached image for the given URL and scaling settings:

http://search-server.example.com/s/scale/clear-cache?url=URL&width=##&height=##

Clear all cached images:

http://search-server.example.com/s/scale/clear-all-cache

Avoiding image processing during search queries

Funnelback automatically caches copies of scaled images and URL preview images to avoid the need to process them repeatedly, however the first request for a given image will take some time and add load to the search server, slowing other operations. If desired, images may be created during the collection update by fetching and storing them in a filtering step, then directing users to these stored copies rather than accessing the scale/preview URLs directly.

See Groovy filters for further details on creating additional filtering steps.