I have a view with the first row of it being designed differently from the rest. What is the best way to theme the first row. Should I attach one view (First Row view) with a second view ? If so, how? Or should I theme using the template files and if so How can I know the row I am currently in?

The attached image may better explain what I am talking about:

enter image description here


In this specific situation, the issue can be easily solved by simply using CSS to target .views-row-1 differently than the other rows, as Jimajamma mentioned.

However, if you had a situation where the content in that first row was much more different than in the other rows, there is a solution natively in Views to create this sort of layout.

Create two displays in your View using the same filter criteria. Display A would be a block that shows only one node (the top, larger item in your mockup) and has a larger image format and different order for the fields to be displayed. Display B would be the display that you use as the page that your users see. You would attach Display A to the header of Display B and set Display B to be offset by 1 result, so that it does not duplicate the first node.

Here is a screenshot of the Views 3 UI, showing where to find these settings. Earlier versions of Views support the same type of set-up, but the naming and placement of the settings in the UI is different: https://skitch.com/sheenad/gqdmm/archive-content-shop.

| improve this answer | |

The Views nodes split module allows site administrators or builders to have a different view mode for the first nodes of a view result.

| improve this answer | |

If the field content in the first row is the same as the rest of the view, and the only thing you want done is it displayed differently, eg, bigger picture, text in a different spot, etc, you can do it all with CSS.

Just look at the html generated by views and you will see something along the lines of:

<div class="views-row views-row-1 views-row-odd views-row-first">

wrapping the first row. So just theme ".views-row-first" differently than the rest of your ".views-row"s and you should be all set. You can theme even and odd rows differently, too, and even individual rows.

| improve this answer | |

As has been said, it really depends what you're trying to do. If you simply want to style them differently then css is the way to go. However, if you want to actually have different content in row 1 then you might consider using Display Suite.

Using this you can configure a view to use the Display Suite display (in place of fields, content, etc) and then set up which content display mode you want to use for each row.

Check out a tutorial I found about this here: http://clikfocus.com/blog/changing-views-output-based-row for information on how to do this.

| improve this answer | |

I've suffered through this problem numerous times since our graphic designer likes to make image style of the first row different from the rest. Because of some display reasons I couldn't put the first row in a separate view block. Here's how I solved my problem.

1) In my view I added field Global: View rows counter. Set it to start at 0. It cannot be hidden, otherwise it won't work. This is to pass row number to views-view-fields.tpl.php

2) I've created custom views-view-fields.tpl.php template. Inside at the beginning of the first foreach loop I added

if($id == 'counter'){

  if(strip_tags ($field->content) == '0'){ 

   //alter your display for that row here


  continue; // this is to hide the counter from view


3) In my case to alter image style of the first row I added

if(isset($fields['field_name']) && !empty($fields['field_name'])){

  $row->field_field_name[0]['rendered']['#image_style']= 'image_style_name';

  $fields['field_name']->content = '<div class="field-content">' . render($row->field_field_name[0]['rendered']) . '</div>';


This can be also done in views-view-field.tpl. I wish there was a less heavy-handed way to alter and render the field, like field_view_field for entities. I couldn't find any, though.

| improve this answer | |
  • Please note the formatting change I applied to your answer, so that the code you posted gets correctly formatted. FYI: the way I formatted your 3-bullets list is a trick I discovered to get around some markup-issue for formatted code inside a bulleted list (so my trick is to avoid such bulleted list). If you don't like my edit at all, just perfrm a rollback to the previous version of your answer. BTW: merci for sharing your answer! – Pierre.Vriens Feb 21 '17 at 11:20

You can add display of type "Block" that for the first item only and add another display of type "Attachment" and set it to be attached to the first display.

| improve this answer | |

Another way to do this is

  1. setup 2 content type view modes (lets say teaser and teaser alternate)
  2. add https://www.drupal.org/project/views_parity_row and in the setup use frequency 0, start 0, end 1 which will mean teaser alternate will be the first row and all other row will have teaser view mode

    enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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