Adding an HTML data attribute to rows in Views

Question

I've tried rewriting the row and also theming the Views row, but I'm not having any luck. Maybe I'm doing something wrong.

I have the format of my view as 'Unformatted View', and in the format settings there is an option to specify the 'Row Class', which is then added to each row. However, I need to add a data-attribute to my rows in addition to a class. The data-attribute needs to be one of the fields - the Taxonomy Term name field (in lower case).

For instance, my field is Taxonomy Term Name. Currently, the HTML markup of each row looks like this:

<div class="my-row">Term</a>

However, I need it to look like this:

<div class="my-row data-attribute=".term">Term</a>

I am finding this fairly difficult to accomplish, and can't find much about it online. Could anyone be of help?

Answer 1

The easiest way that I found to create unique attribute per views row is to override the template file to exclude the outer div and output each row using Global: Custom text in the view excluding from display all fields and including them in the custom text field.

Here is in more detail

1. go to your view and click Advanced > theme > information
2. in style output line the bolded file name is the currently used template (let assume views-view-unformatted.tpl.php)
3. get the name next to the bolded file name (could be something like this views-view-unformatted--VIEWNAME.tpl.php)
4. copy /all/modules/views/theme/views-view-unformatted.tpl.php to your THEMENAME/views-view-unformatted--VIEWNAME.tpl.php

5. edit it and modify so it does not output the outer row div. It could look like this for unformatted style

   <?php if (!empty($title)): ?>
     <h3><?php print $title; ?></h3>
   <?php endif; ?>
   <?php foreach ($rows as $id => $row): ?>
       <?php print $row; ?>
   <?php endforeach; ?>
   

6. edit all view field and check Exclude from display

7. add Global: Custom text and add all fields in the content using replacement pattern

8. your outer div in Custom text could look like this

   <div class="views-row my-row" data-attribute=".[field_FIELDNAME]">[field_FIELDNAME]</div> 
   

9. refresh the cache and make sure in steps 1,2, your new template is used

Answer 2

not seeing that your problem is views module specific. Maybe here is a solution for your problem outside of views formatting: https://www.drupal.org/node/1462436#comment-5674366

Answer 3

You can do this by overriding the field's tpl.php file .. The needed template and the proper file name can be found at view's setting page >> advanced >> information

Answer 4

I just had to do something similar; I added a lang attribute to rows in a search result. Here's what I ended up doing:

Created an override template for the rows in my View of interest. In my case the name was something like "views-view-unformatted--my-view.tpl.php" I copied the existing base "views-view-unformatted.tpl.php" code into that, and made this modification to the tag printed inside the foreach ($rows as $id => $row) loop:

<div<?php if(isset($view->result[$id]->entity->language)): ?> lang="<?php echo $view->result->entity->language; ?>"<?php endif; ?>...

If you want to use data from a field you're pulling (whether included in the display or not), you can also get the info out of $view->result[$id]->_entity_properties. (In my case I didn't need to explicitly capture that field.)