Adding permalink, comment counter, and "add new comment" link to a field view
If you set up a content view in Teaser format, Views will provide you with a posted date, a permalink, and a comment counter link. If you need more granular control over the fields that are shown, this format may not work for you, and you'll have to recreate the extra features yourself.*
Here's a screenshot of a sample post from WebbyKat showing the components of the view that this post will cover. It's more detailed than usual and written for people who are new to Views.
Step 1: Create/change your view and add fields.
- If you already have a Content view to work from, open it and make a note of the classes and markup around the default "Read more" and comment counters. In Omega, it's .node-links ul li a. If you want to be consistent with the default styling, you can match these later. If you're getting rid of the theme's default styling anyway, this isn't important.
- Either change your content view to a field view, or create a new field view. To change an existing view, edit the view and look under Format in the left column. Click Content and change it to Fields. To create a new view in field format, add the view and set the display format to fields.
- Add the following fields: Title, Body, Path, Comment Count, Post Date, Nid. Remove the labels from each field. These are just the fields to add to replicate what's in a content view by default; toss in any extras you want to show, too.
Step 2: Adjust the display of the title and body.
- By default, the title will get generic div markup. To be more semantic, you can make it a second-level heading. Click the Title field and expand Style Settings. Check "Customize field and label wrapper HTML" and set the HTML element to an H2. Above Style Settings, make sure that "Link this field to the original piece of content" is checked.
- You can choose whether to show the entire body, or only a teaser-length version. If you want to show just a teaser, click the Body field and, in the Formatter dropdown, pick "Summary or trimmed."
Step 3: Add the posted date.
A content view will give you a line like "Submitted by [username] on Thu, 2012-10-25 06:33" by default. To recreate this in the new view, and to make it more readable, you can do some rewriting on the Post Date field you added.
- Move the Post Date field underneath the Body field, so the order is Title - Body - Post Date and then the remaining fields.
- Click the field to open up its settings. If you already have a date format defined that you want to use, choose it from the date format dropdown. If not, pick Custom. You can check the PHP manual to get the syntax you want. I set my view to "F j, Y, \a\t g:ia" which produces "October 25, 2012, at 6:33am" (I caught the missing comma after the year after I took the above screenshot, but pretend it's also there).
- Under Rewrite Results, I checked "Rewrite the output of this field" and entered "Posted on [created]"; this produces "Posted on October 25, 2012, at 6:33am" for the final product.
- If you want to add a class for styling purposes, go to Style Settings and check "Customize field and label wrapper HTML." Check "Create a CSS class" and enter your class in the box.
Step 4: Add a permalink.
- Rewrite the Path field -- something along the lines of <a href="[path]">Permalink</a>. If you're displaying the Body field as a teaser rather than the full text, you may want to say "Read more" instead of "Permalink" so users know there's more after the click.
- If you'd like to display the permalink, comment counter, and new comment link as list items (to match the Omega styling, for example), you can adjust that code to <li><a href="[path]">Permalink</a></li> and exclude this field from view for now.
Step 5: Add a comment counter.
- Open the Comment Count field. To make it so 2 comments gets the plural and 1 comment gets the singular, check "Format plural." For the singular form, put "1 comment"; "@count comments" is for plural form.
- To keep "0 comments" from showing if an entry has no comments, expand the No Results Behavior property. Check "Count the number 0 as empty" and "Hide if empty."
- To link the comment count to the comments area of the post, we need to add a second Path field. The first Path field is being rewritten, so linking the counter using it wouldn't work. Add another Path field, make sure it's positioned above the Comment Count field, and exclude it from display. Under the Path field's Rewrite Results settings, check "Use absolute link (begins with 'http://')"; otherwise, you'll end up with double slashes in your links after the domain.
- To avoid confusion, you may want to expand the More property on the original Path field and give it a name like "Permalink." This will help you differentiate them when looking at the replacement patterns list.
- Open the Comment Count field again. Under Rewrite Results, click "Output this field as a link," and enter the token in the associated box, followed by #comments to jump to the comment area. Since this is the second Path field you added, it's probably [path_1]#comments instead of [path]#comments.
- If you'd like to go the list item route, this will need to be adjusted a bit; instead of using the "Output this field as a link" box, you can rewrite the field as <li><a href="[path_1]#comments">[comment_count]</a></li>. If you try to leave it output as a link and just rewrite it as <li>[comment_count]</li>, the <li> will end up inside the link. Exclude the field from view.
Step 6: Add an "add new comment" link.
- A comment form's link is usually in the format comment/reply/[nid]#comment-form, so open the Nid field and rewrite accordingly: <a href="/comment/reply/[nid]#comment-form">Add new comment</a>
- If you're going the list item route, your rewriting will be more complex on this field, since this is where the other two excluded fields will be output. Assuming you're using the .node-links class mentioned earlier, your rewriting will look like this:
<ul class="node-links">
[path]
[comment_count]
<li><a href="/comment/reply/[nid]#comment-form">Add new comment</a></li>
</ul>
*If you only need to add a field to the teaser, and you're okay with that field appearing in all places that use the teaser, you can add it under Structure > Content types > [type] > Manage display > Teaser (it's right under the tabs and is pretty easy to miss). ↩