A recent Drupal project involved capturing personal profile info and a photo for use in a directory page. Building the form was simple enough using the Webform module. I was able to restrict the size and types of files the user could upload (we once received a company logo in a Word document). The catch was how to display the information to the public.
Instead of a copy/paste maneuver or manually re-keying everything I decided to try and create my directory page directly from the submitted data. Seemed simple enough… until I tried it!
First off, to make this work you’ll want to include a couple of “private” fields in your submission forms. Marking them as private means only users with access to form submissions will see these fields. These fields will be used for back-end management only and the user will never see them. I created the fields active and public so we could display/hide the entry, etc.
Once the form was created I worked on displaying the results. I used the Views module to create a new view based on submissions to my Webform. This requires you set the criteria for the view to your Webform’s node. Otherwise you’ll see all sorts of data! I displayed it as an HTML List and added fields. Everything was great until I tried to display the user’s uploaded photo. All I got was the image filename linked to the image. Doh!
After some trial and error I found a way to get just the image file name. From there it’s a simple matter to append the path to your uploads folder. Here’s how:
Add your field that contains your webform submitted image from Webform Submitted Data. Even as counter-intuitive as this might sound, you want to tick the “Exclude from Display” checkbox. Next look under Rewrite Results and tick the “Strip HTML tags” checkbox.
Next I added the field that contained the profile text. This is where I wanted my image to appear. For this field I turned off the label then edited the Rewrite Results. If you expand the Replacement Patterns you should be able to add a token for your image and profile fields. For my example (below) they were value_3 and value_2 respectively. I added the HTML image tag with some formatting to float the picture to the right of the text with a little padding.
The end result displays the image aligned to the right of the bio text. Of course the formatting possibilities are endless.