By lunk rat on

How do I customize the output of a CCK date field (from and to dates) so that it outputs the following html:

<div class="from-date">
<div class="month>Jun</div>
<div class="day">24</div>
<div class="year">2010</div>
</div>

<div class="to">To</div>

<div class="to-date">
<div class="month>Jun</div>
<div class="day">26</div>
<div class="year">2010</div>
</div>

Do I use the node-type.tpl.php file? What do I put in there?

Do I use contemplate? What do I tell it?

Thanks,

Link

⋅ Categories: Drupal 6.x

Comments

zbricoleur’s picture

zbricoleur commented

Look in the CCK directory. In the cck/theme directory, you'll find a file named content-field.tpl.php. Copy that file into your theme folder. Flush your database cache. Now you can style any CCK field by altering that template file.

lunk rat’s picture

lunk rat commented

Thanks! I got the file in my themes templates directory. Not too sure how to go about editing it to achieve the above.

lunk_rat is Acquia Certified Grand Master

Bill Bostick’s picture

Bill Bostick commented

There are a few different ways to do this... you can add code to the node template, or you can (as zbricoleur points out) override the CCK field template. Either way, you're going to want to extract the date/time value, parse it using php, and then generate your html. For example, I have a node type called event that has a CCK date field called 'Date'. I've used the following code in a node-event.tpl.php file to do something similar to what you're attempting:

  $parsed_date = date_parse($node->field_date[0]['value']);
  $unix_date = strtotime($node->field_date[0]['value']);
  $monthstr = strftime("%b", $unix_date);
  print '<div class="event-date-month">' . $monthstr . '</div>';
  print '<div class="event-date-day">' . $parsed_date['day'] . '</div>';
  print '<div class="event-date-year">' . $parsed_date['year'] . '</div>';

Use the devel module to determine the field name on your own content type, and to discover how the to and from dates are being stored.

lunk rat’s picture

lunk rat commented

This should get me started. This is exactly what I knew I had to do but did not know where to begin. Thank you.

lunk_rat is Acquia Certified Grand Master

lunk rat’s picture

lunk rat commented

How do I use the devel module to find my field names?

lunk_rat is Acquia Certified Grand Master

Bill Bostick’s picture

Bill Bostick commented

If the module is installed and enabled, you'll see an extra devel tab on every node page (next to the edit tab.) On this tab, you'll see the krumo-formatted structure for the $node object.

lunk rat’s picture

lunk rat commented

I used the devel tab to look at the array for my field and also figured out how to add the "to" date value in my code as well (which I learned is [value2]).

So for anyone following this who wants to accomplish fancy calendar-looking dates, this is what I placed in my content-field-field_date.tpl.php file:

<?php if (!$field_empty) : ?>
<div class="dateblock">
	<?php
  $parsed_date = date_parse($node->field_course_date[0]['value']);
  $unix_date = strtotime($node->field_course_date[0]['value']);
  $monthstr = strftime("%B", $unix_date);
  print '<div class="event-date-month">' . $monthstr . '</div>';
  print '<div class="event-date-day">' . $parsed_date['day'] . '</div>';
  print '<div class="event-date-year">' . $parsed_date['year'] . '</div>';
?>
</div>
<?php endif; ?>

<?php if (!$field_empty) : ?>
<div class="event-date-to">to</div>
<div class="dateblock">
	<?php
  $parsed_date = date_parse($node->field_course_date[0]['value2']);
  $unix_date = strtotime($node->field_course_date[0]['value2']);
  $monthstr = strftime("%B", $unix_date);
  print '<div class="event-date-month">' . $monthstr . '</div>';
  print '<div class="event-date-day">' . $parsed_date['day'] . '</div>';
  print '<div class="event-date-year">' . $parsed_date['year'] . '</div>';
?>
</div>
<?php endif; ?>

I had success placing variations of the above code in node-[NODE_TYPE].tpl.php, content-field-[FIELD_NAME].tpl.php and even in the Contemplate module template generator.

Here is the CSS that I placed in my theme's style.css to get the fancy look:

/* Calendar-style dates */ 
div.dateblock {
line-height:1;
float:left;
margin:6px 10px 0 8px;
background:#F3F3F3;
border-top:1px solid #084885;
border-left:1px solid #084885;
border-bottom:2px solid #084885;
border-right:2px solid #084885;
color:#084885;
text-align:center;
font-family:Georgia,Arial,Verdana,sans;
}
.event-date-to {
line-height:1;
float:left;
font-size:2em;
margin-top:40px;
color:#084885;
text-align:center;
font-family:Georgia,Arial,Verdana,sans;
}

div.dateblock span {
display:block;
text-align:center;
}

div.dateblock .event-date-month {
font-size:1.5em;
background-color:#084885;
color:white;
padding:2px 6px 2px 6px;
text-transform:uppercase;
}

div.dateblock .event-date-day {
font-weight:bold;
font-size:3em;
}

div.dateblock .event-date-year {
font-size:1.5em;padding:2px;
}

?My question?:

How do I get this custom CCK field theme override to show up in my views? Seems that views continue to display my date fields the standard way even though I have content-field-field_name.tpl.php doing the desired overrides.

Do I need to do something different for views?

Thanks a bunch! I have been wondering how to do this for years.

lunk_rat is Acquia Certified Grand Master

lunk rat’s picture

lunk rat commented

Also,

How would I go about adding the time of day to the parsed date output above?

Thanks!

lunk_rat is Acquia Certified Grand Master

Bill Bostick’s picture

Bill Bostick commented

The time fields are extracted by the parse_date function, just as the date fields are. Thus, you can:

  print '<div class="event-date-hour">' . $parsed_date['hour'] . ':' . $parsed_date['minute'] . '</div>';

>> How do I get this custom CCK field theme override to show up in my views?

They should just show up, assuming you're using a row style of 'fields'. If you're using a row style of 'node', then you'll have to move the logic to one of the node-tpl-php templates.

lunk rat’s picture

lunk rat commented

I got the time to show up per your suggestions - Is there any way to make it use 12 hour time with am/pm?

I have a view that uses fields but the fields are not displayed according to my override in content-field-field_name.tpl.php like they are in the node view.

Hmmm . . . I'm so new to this deep theming stuff . . .

lunk_rat is Acquia Certified Grand Master

zbricoleur’s picture

zbricoleur commented

You're going to need to do the same thing, more or less, with views-view-field.tpl.php (found in views/theme). I believe Views builds its fields straight out of the database, without using the CCK templates.

lunk rat’s picture

lunk rat commented

Thanks zbricoleur; I must need to modify the code a bit because when I place the same code from content-field-field_name.tpl.php into views-view-field--field-name.tpl.php, I get only a month value, and it is "December" not the month of the value in the field.

Not too sure what to put in view-field--field-name.tpl.php

Link

lunk_rat is Acquia Certified Grand Master

Bill Bostick’s picture

Bill Bostick commented

>> Is there any way to make it use 12 hour time with am/pm?

One way:

  $twelvehourtimestr = date("g:ia", $node->field_course_date[0]['value']);

>> I have a view that uses fields but the fields are not displayed according to my override in content-field-field_name.tpl.php like they are in the node view.

Is drupal picking up on your template file? When you look at the 'theming info' for the view in question, your template file name should be displayed in bold, indicating that it is the 'active' template file.

lunk rat’s picture

lunk rat commented

Awesome! Thanks again - I'm starting to learn a bit of PHP logic from this process: I picked apart the last snippet you gave me and added the $twelvehourtimestr variable to the correct place and then called it in a print statement below that--all by myself! ;)

Views is definitely picking up the template file (views-view-field--field-name.tpl.php (it is bolded under theme:information) and it modifies the output of that field in the view; however, it does not pull the correct values for the nodes being displayed by the view. The whole thing just says "December" instead of the CCK date field value.

lunk_rat is Acquia Certified Grand Master

Bill Bostick’s picture

Bill Bostick commented

The views field template file won't have the full node context... in fact, the default field template file simply does a

print $output;

where $output is the rendered contents of the field. You can convert this to a timestamp:

  $parsed_date = date_parse($output);
  $unix_date = strtotime($output);

and manipulate that value, but you'll need to ditch the references to the node object.

lunk rat’s picture

lunk rat commented

Ok, I followed your pointers on the views $output in the views-field-field.tpl.php and I am able to manipulate the date with this code in the template:

<?php if (!$field_empty) : ?>
<div class="dateblock">
	<?php
  $parsed_date = date_parse($output);
  $unix_date = strtotime($output);
  $monthstr = strftime("%B", $unix_date);
  print '<div class="event-date-month">' . $monthstr . '</div>';
  print '<div class="event-date-day">' . $parsed_date['day'] . '</div>';
  print '<div class="event-date-year">' . $parsed_date['year'] . '</div>';
?>
</div>
<?php endif; ?>

It displays the correct day number from the cck date value; however it just says "DECEMBER" in the month, no matter what the cck date value is.

Can you give me a hint what I am doing wrong with the above views template code so that I can get the proper date value to print?

Thanks!

lunk_rat is Acquia Certified Grand Master

Bill Bostick’s picture

Bill Bostick commented

Just guessing, but what format are you applying to the date field in the view? Are you using one of the standard date formats (long, medium, etc.)? What do you get if you just print $output from the view template?

In a node template file, it's easy to talk about because we know what the value of $node->field_course_date[0]['value']. But in the views field template file, we just have a string whose format can vary based on several views settings. You need to make sure that the value of $output is parsable by the php date_parse and/or strtofime functions. If it's not, then adjust your views settings to make it so. HTH.

lunk rat’s picture

lunk rat commented

It doesn't seem to matter which format I choose in the view (default, long, medium, short, etc.); it all outputs the same.

Perhaps I can create a custom date format in Drupal (under Site Configuration > Date > Formats) that strtotime or strftime can understand?

Or is there a magic way to have date_parse display the FULL month name? Because I can get it to display the correct month NUMBER value with this 

  $parsed_date = date_parse($output);
  print '<div class="event-date-month">' . $parsed_date['month'] . '</div>';

lunk_rat is Acquia Certified Grand Master

lunk rat’s picture

lunk rat commented

Hey thanks that worked great. How to I get it to display the site's time zone? It currently displays GMT.

Thanks

lunk_rat is Acquia Certified Grand Master

zbricoleur’s picture

zbricoleur commented

Site Configuration > Date and Time

lunk rat’s picture

lunk rat commented

Site time is already configured, and all other dates and times are displayed correctly within the site-configured time zone, it's just the time that prints from this snippet:


<?php
  $twelvehourtimestr = date("g:ia", $node->field_course_date[0]['value']);
?>

prints in GMT time zone instead of the sites time zone configured at Site Configuration > Date and Time

lunk_rat is Acquia Certified Grand Master

zbricoleur’s picture

zbricoleur commented

There are timezone parameters for the date function: http://php.net/manual/en/function.date.php

lunk rat’s picture

lunk rat commented

Here is what I have so far in content-field-field_course_date.tpl.php

<?php if (!$field_empty) : ?>
<div class="dateblock">
	<?php
  $parsed_date = date_parse($node->field_course_date[0]['value']);
  $unix_date = strtotime($node->field_course_date[0]['value']);
  $monthstr = strftime("%B", $unix_date);
  $twelvehourtimestr = date("g:ia", $unix_date);
  print '<div class="event-date-month">' . $monthstr . '</div>';
  print '<div class="event-date-day">' . $parsed_date['day'] . '</div>';
  print '<div class="event-date-year">' . $parsed_date['year'] . '</div>';
  print '<div class="event-date-time">' . $twelvehourtimestr . '</div>';
?>
<?php
  
?>
</div>
<?php endif; ?>

It's outputting the CCK date field value just how I want - like this:

June
30
2010
1:30pm

But the time is still in GMT; I tried using 

date_default_timezone_set('CST');

But I don't know how to use this to tell the above PHP to use CST time zone. Can you help?

lunk_rat is Acquia Certified Grand Master

zbricoleur’s picture

zbricoleur commented

Try

$offset = 5; // where offset == number of hours behind
$twelvehourtimestr = date("g:i a", $unix_date-($offset*60*60));
lunk rat’s picture

lunk rat commented

Beautiful. Thank you zbricoleur!

Any input on this question? http://drupal.org/node/836936#comment-3232948

lunk_rat is Acquia Certified Grand Master

zbricoleur’s picture

zbricoleur commented

Maybe try

$monthstr = date("F", $unix_date);