How can I show an image in a view using the Search API Views integration?

Question

I am using the Search API Views module; I have created an index of users, and on this site, there is an image field on the user profile with a single value (not a user picture, just a standard image field).

I am now making a view and trying to show the image from each user in a field of the view. I added the Index User: Picture field, but when I do so, I have three choices for the display:

• Show entity label (gives me the filename (image.jpg) with a link to the image)
• Show entity ID (gives me the number of the entity)
• Show complete entity (doesn't display anything)

I read this issue on images in Search API, which is marked as a duplicate of a fixed issue, but I don't understand how it is fixed or what I am supposed to display the image.

I want to show the image as a thumbnail in the view. What's the easiest way to do this? (Given the filename, I imagine I could write a custom views template to print the thumbnail image as suggested in this question on Apache Solr Views, but it seems like there is probably an easier way (the linked Search API issue was fixed four years ago).

Answer 1

You're on the right track. To achieve this in Views:

1. Add the indexed image field to the View Fields list
2. Set 'Display' to 'Show entity label'
3. Untick 'Link to entity' - this adds additional HTML in the token used below that will stuff things up

4. Select 'Rewrite output of this field', and use this code:

   <img src="/sites/default/files/[field_files_file]" />

Check the token is right, under 'Replacement tokens', but this should allow you to render the image into the View output.

From here, you can specify any inline attributes you want, e.g. width, height and so on.

You could achieve a thumbnail look this way, or alternately you could use image styles to generate a thumbnail of the image your users upload, then index that field instead. Note that image styles will save your new image under a different directory, so sites/default/files won't work.

Answer 2

Doing this in a views template

Add the image field.

Set the value of Display to Show entity ID.

Use the theme information to look up the name for the relevant template file and make the file.

Put the following code into the template file (based on the answer here)

$file = file_load($output);
$image = image_load($file->uri);
$content = array(
  'file' => array(
    '#theme' => 'image_style',
    '#style_name' => 'CHANGE_TO_YOUR_IMAGE_STYLE',
    '#path' => $image->source,
    '#width' => $image->info['width'],
    '#height' => $image->info['height'],
  ),
);
echo drupal_render($content);

But I feel there must be a better way to do this...