Displaying similar images on preview pages

You can configure your website to display similar images on preview pages (or modal previews). This function is based on keyword commonality, i.e. images that have a certain percentage of the same keywords are considered to be similar. The more keywords are the same, the higher images score as similar.

Recommended reading

• Custom preview pages and modal previews
• Adding keywords from similar files
• Unique tag processing
• Tag clouds and tag lists

About similar images

The keywords of files are automatically processed as part of the ingestion process (loading of new files) and as part of the update process – i.e. every time you save the metadata of a file. The software extracts unique keywords and stores the keywords in a separate database table, with each word having links to the files in which the word occurs. Once this is done, the system looks for files with the same keywords and it then scores the images based on the percentage of keywords being the same.

Displaying similar images on preview pages

The id’s of similar images are retrieved by the API. To enable this, you’ll first have to go to Site configuration, Search settings and then General settings. Check the setting “Enable keyword commonality similars” and then click Save at the bottom. Next, click Preview page in the side bar and then click on Similar files to open the configuration settings. This is where you configure where to display the thumbnails of similar images and how many images to display. Note that this affects standard preview pages only. The next paragraph explains how you can display similar images if you are using custom templates.

Displaying similar images on custom preview pages and modal previews

In the code editor, open you custom template and then add the following code where you want the images to appear:

<div class="similarscontainer">
     <div><?xs print('1:Similar files','2:Soortgelijke bestanden') ?></div> <!-- outputs localised title -->
     <div class="similarthumbnails">
          <?xs media('similars',9,0) ?> // this inserts html for max 9 thumbnails
     </div>
</div>

You can style the container and the HTML that’s generated by the tag. It outputs divs with class name “thumbnail” and links with class name “similarthumb”. The thumbnails are output as background images for the links. The number 9 in this example is used to list a maximum of 9 thumbnails. You can change this number as required. The second parameter (0 in this example) selects the template to use. Currently this parameter must be 0.