I have created webform with title, description and upload file fields. And I have created views to display submission data in a grid view.

For images, it just giving me the image name with URL to image but it is not displaying as an image. I tried everything, but didn't find any solution. Please give me solution for displaying images in views.

  • "I tried everything, but didn't find any solution." Why don't you tell us what you tried?
    – cilefen
    Oct 26, 2015 at 13:50
  • @cilefen - 1. Google it. 2. Rewrite the output with image tag but the output is coming as a href tag, so i can't rewrite output. 3. calling the hook function to alter the field data but failed 4. Finally tried to create a template file for this field, but don't know how to alter in that, getting a big array of data. Oct 27, 2015 at 5:34

1 Answer 1


This can not be done with webform module alone. All you need to do is get help of 2 extra modules.

  1. File Entity
  2. Views Field View

Further you need to do following things.

  1. Download and enable both of the modules and clear the cache.
  2. Webform is storing file, not only image. I am assuming here you are only uploading image files, you can further get idea to show any type of file there. So go to Image File Type Display: admin/structure/file-types/manage/image/file-display and set the preview/image style. Or if you do not want to change settings for default view mode of the file, download another module Entity View Mode. Go to it's configuration and create specific display and set image style accordingly in file display settings.
  3. Create a view of files, it should be a block. and there add contextual filter for the fid and add field "File: Rendered". You can set file view mode by this field. For your convenience I'm exporting the view below, you just need to import this.
    $view = new view();
    $view->name = 'file_view';
    $view->description = '';
    $view->tag = 'default';
    $view->base_table = 'file_managed';
    $view->human_name = 'File view';
    $view->core = 7;
    $view->api_version = '3.0';
    $view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

    /* Display: Master */
    $handler = $view->new_display('default', 'Master', 'default');
    $handler->display->display_options['title'] = 'File view';
    $handler->display->display_options['use_more_always'] = FALSE;
    $handler->display->display_options['access']['type'] = 'perm';
    $handler->display->display_options['cache']['type'] = 'none';
    $handler->display->display_options['query']['type'] = 'views_query';
    $handler->display->display_options['exposed_form']['type'] = 'basic';
    $handler->display->display_options['pager']['type'] = 'some';
    $handler->display->display_options['pager']['options']['items_per_page'] = '5';
    $handler->display->display_options['style_plugin'] = 'default';
    $handler->display->display_options['row_plugin'] = 'fields';
    /* Field: File: Name */
    $handler->display->display_options['fields']['filename']['id'] = 'filename';
    $handler->display->display_options['fields']['filename']['table'] = 'file_managed';
    $handler->display->display_options['fields']['filename']['field'] = 'filename';
    $handler->display->display_options['fields']['filename']['label'] = '';
    $handler->display->display_options['fields']['filename']['alter']['word_boundary'] = FALSE;
    $handler->display->display_options['fields']['filename']['alter']['ellipsis'] = FALSE;
    /* Field: File: Rendered */
    $handler->display->display_options['fields']['rendered']['id'] = 'rendered';
    $handler->display->display_options['fields']['rendered']['table'] = 'file_managed';
    $handler->display->display_options['fields']['rendered']['field'] = 'rendered';
    $handler->display->display_options['fields']['rendered']['label'] = '';
    $handler->display->display_options['fields']['rendered']['element_label_colon'] = FALSE;
    /* Contextual filter: File: File ID */
    $handler->display->display_options['arguments']['fid']['id'] = 'fid';
    $handler->display->display_options['arguments']['fid']['table'] = 'file_managed';
    $handler->display->display_options['arguments']['fid']['field'] = 'fid';
    $handler->display->display_options['arguments']['fid']['default_action'] = 'default';
    $handler->display->display_options['arguments']['fid']['default_argument_type'] = 'node';
    $handler->display->display_options['arguments']['fid']['summary']['number_of_records'] = '0';
    $handler->display->display_options['arguments']['fid']['summary']['format'] = 'default_summary';
    $handler->display->display_options['arguments']['fid']['summary_options']['items_per_page'] = '25';

    /* Display: Single File View */
    $handler = $view->new_display('block', 'Single File View', 'block');
  1. Now in your main view (where you are showing submissions). Add a new relationship for Webform submissions: Data. You'll need to set the nid for the webform here and select the image component.
  2. Add new field to the view submission data: Value (raw). This will give you the file_id for the associated file. Exclude it from display.
  3. Add another field Global: View. Select the view you imported and the block display. In contextual filter set [!data] from replacement patterns. It was the raw value of the field which you excluded from the display. And Here you go, save the view and rock :). Thanks for asking such good question. Still if you face any problem during this tutorial, ask me.
  • Thank you for your nice tutorial. Let me try and get back to you...once again thank you:) Oct 27, 2015 at 5:37
  • :) welcome brother Oct 27, 2015 at 6:27
  • Hi Himanshu - Its working perfectly. Thank you so much Genius...:) Oct 27, 2015 at 7:07
  • Looking for some more good questions :) Oct 27, 2015 at 7:08
  • created custom view mode too ? Oct 27, 2015 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.