---
title: "How to display an image thumbnail for a document"
source: https://dev.pageseeder.com/get_started/tutorials/how_to_display_an_image_thumbnail_for_a_document.html
last_updated: 2026-08-07T17:09:54+10:00
tokens: ~491
---

# How to display an image thumbnail for a document

| Property | Value |
| --- | --- |
| Skills required: | None |
| Time required: | 15 |
| Intended audience: | Developer |
| Difficulty: | Easy |
| Category: | Document |

## Objective

PageSeeder can display a thumbnail of the first image in a [document](../../reference/glossary/document.md) in place of the usual file icon in search results and xref lookups. By the end of this tutorial, you gain the ability to configure PageSeeder so that the thumbnail is displayed instead of the standard icon.

## Configuration

To display a thumbnail in place of the icon, PageSeeder must know which document type this applies to.

This can be configured in the `project.properties`.

Go to the [developer tools](../../reference/glossary/developer_tools.md) for the [project](../../reference/glossary/project.md);

**Browse** the project files and **edit** the `project.properties`;

If it doesn’t exist, **create** a `project.properties` file in the `config` folder of the project;

**Add/edit** the property `featuredImageDocumentTypes` so that the applicable document types are listed separated by a comma.

## Example

To display the film poster cover of a document type 'movie\_information' in the 'movie' project, ensure that the file:

```text
[webapp]/WEB-INF/config/template/movie/config/project.properties
```

contains the following line:

```text
featuredImageDocumentTypes=movie_information
```

## Limitations and troubleshooting

In order for this to work, ensure that:

- The applicable documents have a document type (e.g. 'movie\_information');
- The applicable documents contain at least one graphic, that is an image document in PageSeeder (must be either PNG, JPG, or GIF);
- The graphic reference is using the permalink URL (i.e. starting with /uri/);
- Only the first image is used;
- The XSLT Cache must be reloaded (**Reload** icon in the developer actions – top left in developer perspective).