Access field data in views row template (views 3)

Question

So I checked Google for the past 2 hours because apparently something that was fairly simple back in the Views 2 days has changed in Views 3 (D7)... All attempts failed.

I have a view set to display as HTML list showing fields. One of those fields is an image field. I want to use the URL to the image file as inline style background-image on the LI element of the particular row.

In Views 2 I would have set the field to be excluded from display and then created a views template for the row and then used the $row variable to access the field information for the particular row. In Views 3 there only seems to be the $title and $options variable available and $row outputs only the rendered HTML for the whole row.

Long story short: How can I access the field data from inside a views-view-list--myview--page.tpl.php?

If anyone can help out, it is greatly appreciated.

Answer 1

This is pretty simple. All you need to do is go through following steps, which will let you create a same type of view which I have created on my system: The trick is to use relationship from field_image.

1. Create a simple view of articles (I created page), by default this will have a field_image. I am exporting a view below, import it.
2. In theme information override style output from "views-view-list.tpl.php". I am attaching code for both.

View:

$view = new view();
$view->name = 'article_view';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Article 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'] = 'Article 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'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '10';
$handler->display->display_options['style_plugin'] = 'list';
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['row_options']['default_field_elements'] = FALSE;
/* Relationship: Content: Image (field_image:fid) */
$handler->display->display_options['relationships']['field_image_fid']['id'] = 'field_image_fid';
$handler->display->display_options['relationships']['field_image_fid']['table'] = 'field_data_field_image';
$handler->display->display_options['relationships']['field_image_fid']['field'] = 'field_image_fid';
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = FALSE;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = FALSE;
$handler->display->display_options['fields']['title']['element_label_colon'] = FALSE;
/* Field: File: Path */
$handler->display->display_options['fields']['uri']['id'] = 'uri';
$handler->display->display_options['fields']['uri']['table'] = 'file_managed';
$handler->display->display_options['fields']['uri']['field'] = 'uri';
$handler->display->display_options['fields']['uri']['relationship'] = 'field_image_fid';
$handler->display->display_options['fields']['uri']['label'] = '';
$handler->display->display_options['fields']['uri']['element_label_colon'] = FALSE;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'article' => 'article',
);

/* Display: Article List */
$handler = $view->new_display('page', 'Article List', 'article_list');
$handler->display->display_options['path'] = 'article-view';

Now the overridden template:

<?php

/**
 * @file
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */

?>
<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
    <?php foreach ($rows as $id => $row): ?>
      <li class="<?php print $classes_array[$id]; ?>" style="background-image:url(<?php print file_create_url($view->result[$id]->file_managed_field_data_field_image_uri); ?>);"><?php print $row; ?></li>
    <?php endforeach; ?>
  <?php print $list_type_suffix; ?>
<?php print $wrapper_suffix; ?>

This will do the trick for you. Let me know if you face some issues.

Answer 2

You can do this in views 3 without needing a template file.

1. Use Image URL Formatter then create a field in your view for the image, and format it as the image URL, and "exclude from display".

2. Create another field below the first, and go to the "rewrite results" field set, you can now use a token like [image:url] to print the result of the hidden field.

3. In that re-write results area, create your div and set the URL token as background.

<div class="myfield" style="background:url('[image:url]')">
 <p> Your Value </p>
</div>

OR, without the Image URL Formatter module, I have just found another example here where you can..

1. Add a "File Usage: File" relationship (Advanced->Relationsips)

2. Add a "File: Path" field, NOT "Content: Image" (Block details->Fields)

3. You will have limitless options on image path output. Click to Display download path instead of URI.

EDIT:

I didn't know that views stripped inline styles. I use the field template, which is not actually used in views, but you can find a template in the theme folder of the views module. Rename views-view-field.tpl.php to views-view-field--yourfield.tpl.php and place the file in your themes template folder.

The hidden field you created for a formatted URL should now be available, and you can get it by...

$imageurl = $view->style_plugin->rendered_fields[$view->row_index]['yourimageurlfield']; 
echo $imageurl;