I have views, og, excerpt and category modules. I wish to change the layout of a teaser view I have created. I've looked at "Theming in Views" documentation, and don't see anything that shows me specifically what I want to do.

The closest I've come are these two comments: http://drupal.org/node/42597#comment-136896 and http://drupal.org/node/42597#comment-162971, but neither one shows exactly how to construct the view layout.

Essentially, I want a teaser view that displays like this:

<b>Node Title</b> (links to content)
<b>Date Created | Group Title | # Comments</b>

I see this code in the views.module, but it doesn't give me a clue as to how the effect the changes I need:

/**
 * Display the nodes of a view as teasers.
 */
function theme_views_view_teasers($view, $nodes, $type) {
  return views_theme('views_view_nodes', $view, $nodes, $type, true);
}

Could someone give me some guidance on creating my own teaser view layout?

Thanks!

-ron

Comments

ncameron’s picture

The easiest way (only way I know how) is to create use your existing node.tpl.php for that particular node type (assuming you use CCK). Use the following layout:

<?php
	if ($page == 0): //if node is being displayed as a teaser
?>

Teaser layout goes here

<?php
	endif;
?>
<?php
	if ($page == 1): //if node is being displayed as a node
?>

Node template goes here

<?php
	endif;
?>

Your can use the same variable names as in the node.tpl.php file. For example here is one of my full node.tpl.php files:

<?php
	if ($page == 0): //if node is being displayed as a teaser
?>
<table id = "ViewsProfileDisplay" cellpadding=2>
	<tr> 
	    <td width="110" rowspan="2" valign=top><?php print $picture ?></td>
		<td width="286" ><h2><?php print $title?></h2></td>
		<td width="100" align="right" valign="top"><?php print "<b>Article</b>" ?></td>
	</tr>
	<tr>
		<td valign=top><B>Author: </B><?php print $name?></td>
		</tr>
	<tr>
		<td colspan="2"><B>Tags: </b><?php
		$termlistseperated = implode(" | ", $taxonomy);
		print "($termlistseperated)";
		?></td>
	</tr>
</table>
<br>
<?php
	endif;
?>
<?//************************* End Node Template ***********************//?>

<?php
	if ($page == 1): //if node is being displayed as a node
?>
<table>
	<tr>
		<td width="150" rowspan="2"> <?php print $picture ?> </td>	
		</td>
			<td width="500" valign=bottom> Written by <B><?php print $name ?></B><br>
		on <span class="submitted"><?php echo date("jS F Y", $created); ?></span>
	</tr>
</table>
<br>
<br>
<div class="node">
	<div class="content">
		<div class="field field-type-text field-field-description">
			<?php print $field_description[0] ['value']?>
		</div>
	</div>
	</br>
	<hr class="hr1">
	<div class="links">
		<?php print $links ?>
	</div>
	<hr class="hr1">
	<div class="terms">
		<?php
		$termlistseperated = implode(" | ", $taxonomy);
		print "Tags: ($termlistseperated)";
		?>
	</div>
	<hr class="hr1" >
	<div class="content">
		<div class="service-links">
			<?php print $service_links ?>
		</div>
	</div>
</div>
<?php 
	endif;
?>

Hope this helps,

Neil

somebodysysop’s picture

Thank you so much. What I need now is an example of a teaser layout so I know how to create a teaser for a specific view in this format:

<b>Node Title</b> (links to content)
<b>Date Created | Group Title | # Comments</b>

For example, I don't know what variable to use for Date Created, or how to get the Group Title. Perhaps if I could see how the default views layout for teasers is constructed, that would help.

Thanks!

ncameron’s picture

Have a look at this module:

  • http://drupal.org/project/contemplate
  • You can use this to create templates, but if you want something a little fancy then it is better to use a node.tpl.php file. However! It is a great, easy way of seeing what your variables are called. From what I can tell variables change from node type to node type. Below are examples of what my variables are called which might help to identify the ones for you.

    Node title: $title
    Date created: $created (note: you need some php to display it correctly)
    Group title: sorry, don't use groups! try contemplate, might help to identify this. If not good luck searching!
    # comments: $comment_count

    Once you have those variables you can then wrap them up in an HTML table to align them nicely. A quick google for html tables will show you how to create one. Your's would look a little like:

    <table>
      <tr colspan=3>
        <td>
           Node title
        </td>
      </tr>
       <tr>   
        <td>
         date
        </td>
        <td>
         Group
        </td>
        <td>
         Comments
        </td>
      </tr>
    </table>
    

    Here is another example of a teaser. Note the php for displaying the date nicely and the php for correct grammar for the comments depending if there are 1 or many comment/s. Also note that the title variable is not really a link. I created a link by using the $nid value.

    <?php
    	if ($page == 0): //if node is being displayed as a teaser
    ?>
    <table id = "NewsItem" cellpadding=2>
    	<tr> 
    		<td width="300" ><h2><?php print '<a href="http://www.huitalk.com/node/'.$nid.'">'.$title.'</a>'?></h2></td>
    		<td width="200" align="right" valign="top"><?php print "<b>News</b>" ?></td>
    	</tr>
    	<tr>
    		<td colspan="2" valign=top><B>Submitted by: </B>
    			<?php if ($comment==1){
    					$commenttext="comment";
    					} Else {
    					$commenttext="comments";
    					}
    			?>
    			<?php print 
    				$name.
    				' on '.
    					date("jS F Y", $created).
    				' | '.
    				$comment_count.
    				' '.
    				$commenttext;
    			?>
    		</td>
    	</tr>
    	<tr>
    		<td colspan="2"><?php print
    							word_trim($field_news_body[0]['value'],35).
    							'... '.
    							'<a href="http://www.huitalk.com/node/'.
    							$nid.'"><div id="readmore">read more</div></a>'
    						?>
    	</tr>
    </table>
    <br>
    <?php
    	endif;
    ?>
    <?//************************* End Node Template ***********************//?>
    

    This should get you most the way there. Getting to grips with theming and using .tpl.php files is a steep learning curve but when you get the hang of it you realise how powerful it can be.
    Good luck!
    Neil

    ------------------------------
    www.huitalk.com

    somebodysysop’s picture

    OK, thanks so much. Final question:

    I want different teasers for:

    1. custom content types (flexinode)
    2. event content type
    3. forum topic content type

    Using the example above: http://drupal.org/node/93311#comment-169813, how would I tell node.tpl.php that this teaser code is for a "page" content type as opposed to an "event" content type as opposed to a custom (flexinode) content type?

    Or, better yet, how to use teaser code for a particular view (as in views module)?

    That's it. If I can figure out how to create the code for particular content types and/or views, I'm good to to!

    ncameron’s picture

    Unfortunately I don't use any of the above content types, I am mostly a CCK man so I'm not sure about the above types however, you can probably figure them out with the eg's below. You need to create a file and name it as below (or appropriate)

    For CCK content type called 'article': node-content_article.tpl.php
    For CCK content type called 'Country Profile': node-content_Country_profile.tpl.php
    For node type 'simplenews': node-simplenews.tpl.php

    The files then need copying into the theme directory (e.g. themes/boxgrey).

    To make views display the teasers just change the option on 'page view' from list, full-node or table to teasers.

    Should do the job!

    Neil

    ----------------------------------
    www.huitalk.com

    somebodysysop’s picture

    I followed your instructions and examples and have achieved exactly what I was looking for. Can't thank you enough!

    One little, bitty, small issue I discovered:

    Since the nodes in question are actually flexinodes, I used the naming format here http://drupal.org/node/45485 to create the template files (modifying your example above). Works fine. But when I create a flexinode template, I discovered that the node view won't display unless I have a "page == 1" template code for that as well.

    Since I don't want to have to create full node templates for all my nodes and flexinodes, is there some way to say:

    a) "if page == 1, then use the system default node template", or alternatively
    b) to always use the system default template, and if the view is = "whatever", then use the custom template?

    Thanks!

    -ron

    ncameron’s picture

    Apologies for the tardy response. This might work. The trouble is all my content types have been templateified so I've forgotten what the untouched content looks like! Try:

    print $body

    That variable contains all the the text and formatting but I'm not sure if it is exactly the same as the original. If this doesn't work I think the only solution is making quick templates which you should be able to do with less 3 variables or.

    Good luck,
    Neil

    ---------------------------------------------------
    - we need to talk....
    www.huitalk.com

    somebodysysop’s picture

    Thanks for getting back to me. I ended up simply biting the bullet and learning how to create a full node view myself. For the benefit of those who follow behind looking for this info, I've included my code below (based, of course, on the code you provided). It's working.

    In addition to the info you provided, I also found help here:
    http://drupal.org/node/45485
    http://drupal.org/node/45475
    http://drupal.org/node/42597

    With respect to the last question I asked, I also made use of the Views Theming Wizard which is a standard part of the views module.

    Note: "logotool_getanongid($nodeID)" is a custom function I wrote which is designed to get the groupID of a supplied node.

    Further note: "drupaliciuos_summarise" simply would not work for me, so I ended up snipping the content using the "substr()" function.

    Again, thanks a bunch. Everything's working fine now.

    This is a flexinode content type, so the filename is: node-flexinode-3.tpl.php and it is placed in my theme directory.

    <code>
    <?php
        if ($page == 0): //this article node is being displayed as a teaser
    ?>
    <table id = "Article" cellpadding=2>
    <tr> 
    <td><?php print '<a href="/node/'.$nid.'">'.$title.'</a>'?></td>
    </tr>
    <?php 
    	$maxlen = 50;
    	$content = drupalicious_summarise($node->flexinode_3, $maxlen);
    	$content = substr($content,0,$maxlen);
    	$nodeID = $node->nid;
    	$gid = logotool_getanongid($nodeID);	  	
    	$group_node = node_load($gid);
    	$group_title = $group_node->title;
    ?>
    <tr>
    <td colspan="2"><?php 
    //							print check_markup($content, $node->flexinode_3_format, FALSE);
    							//
    							// If this snippet starts with a <p> then remove it.
    							//
    							$search = '<p>';
    							if (strncmp($content, $search, strlen($search)) == 0) {
    								$content = str_replace($search, "", $content);
    								$content = str_replace("</p>", "", $content);
    
    							}
    							print $content;
    							if (str_word_count($node->flexinode_3) > str_word_count($content)) {
    								print	'... '.
                                			'<a href="/node/'.
                                			$nid.'">read more</a>';
    							} // endif
                            ?>
    </tr>
    <tr>
    <td colspan="2" valign=top>
    <?php if ($comment==1){
                        $commenttext="comment";
                        } Else {
                        $commenttext="comments";
                        }
                ?>
    <?php print 
                    date("M d Y", $created).
                    ' | '.
                    $comment_count.
                    ' '.
                    $commenttext.
                    '<br>'.
    				'<a href="/node/'.
    				$gid.
    				'">'.
    				$group_title.
    				'</a>'
                ?>
    </td>
    </tr>
    </table>
    <br>
    <?php
        endif;
    ?>
    <?//************************* End Teaser Article Node Template ***********************//?>
    <?php
        if ($page == 1): //this article node is being displayed as full node
    ?>
    <table id = "Article" cellpadding=2>
    <?php 
    	$body = $node->flexinode_3;
    	$nodeID = $node->nid;
    	$gid = logotool_getanongid($nodeID);	  	
    	$group_node = node_load($gid);
    	$group_title = $group_node->title;
    	$statistics = statistics_get($node->nid);
    	if ($statistics) {
      		$reads = $statistics['totalcount'];
      	} else {
      		$reads = 0;
    	}
    ?>
    <tr>
    <td colspan="2"><?php 		print $body ?>
    </tr>
    <tr>
    <td colspan="2" valign=top>
    <?php print 	'<small>'.
                    '<a href="/comment/reply/'.
    				$nodeID.
    				'#comment_form">'.
                    'add comment'.
    				'</a>'.
                    ' | '.
                    '<a href="/emailpage/'.
    				$nodeID.
    				'">'.
                    'Email this page'.
    				'</a>'.
                    ' | '.
                    '<a href="/node/'.
    				$nodeID.
    				'/print">'.
                    'printer friendly version'.
    				'</a>'.
                    ' | '.
                    '<a href="/subscriptions/add/node'.
    				$nodeID.
    				'">'.
                    'subscribe post'.
    				'</a>'.
                    ' | '.
    				'<a href="/node/'.
    				$gid.
    				'">'.
    				$group_title.
    				'</a>'.
                    ' | '.
                    $reads . ' reads'.
    				'</small>'
                ?>
    </td>
    </tr>
    </table>
    <br>
    <?php
        endif;
    ?>
    <?//************************* End Page Article Node Template ***********************//?>
    

    Good Luck!