分类:
2008-10-22 09:33:37
Step 1: Create your CCK content type
Step 2: Create a [yourcontenttype].tpl.php file
Step 3: Modify template.php
Step 4: Modify style.css
Create a CCK content type called 'event_listing' and add some fields to it. I have added contact information, location, event information fields etc.
Create at least one node (create an event listing with your new content type).
Now create a text file called 'event_listing_edit.tpl.php' and put it in the directory of your selected theme (which is somewhere under the '/theme/' directory. For example, my template.php file is found here: /theme/internet_jobs/). You could call this pretty much anything, but it will make a lot more sense and be easier to manage if you call it something like this.
Now add the following PHP code snippet to the tpl.php file - this is simply sample text to prove that your 'next step' (modifying template.php) is actually working.
print("yahoo, it works!");
?>
Now the hard part - we need to open and edit your template.php file which is again in the directory of your selected theme (in my case it is located here: /theme/internet_jobs/template.php)
You will need to add two seperate functions in this file, one to call your custom event_listing_edit.tpl.php file when the form is being edited and another one to call it when a NEW node is to be created (you only need one tpl.php file, but as the template.php file modifications are overriding default functionality, it is necessary to instruct drupal to use the custom file for each case.
At the end of the template.php file, add the following snippets which you should be able to see is two seperate override functions:
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
function phptemplate_node_form($form) {
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
// Add Form End
// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
$node = node_load(array('nid' => arg(1)));
function phptemplate_node_form($form) {
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
// Edit Form End
?>
You can see from the snippets who actually wrote them (although I have modified them slightly from their original) - thank you jghyde and Dublin Drupaller ().
Now try to edit your event_listing node you should see the text 'yahoo, it works' on the page - see screenshot. If you don't get the 'yahoo' message, there a couple of 'suspects' to look at: go check out your naming convention in the template.php file, I tripped up and referred to my tpl.php file incorrectly a few times before I got it right.
The next step is to add all the fields you want back onto the input form. You can find out what fields are available to your form by putting the following line of code in your custom tpl.php file (Tip from for outputting data into a nicer format)
print("yahoo, it works!
");
print(""
);
print_r(array_values($form));
print("");
?>
You will see a great big long list of information describing the fields available to your input form, the part you are interested in looks like this (there will be a section like this for every field and object on the form):
[field_website] => Array
(
[0] => Array
(
[value] => Array
(
[link] => [title] => Janze.com
[attributes] =>
)
)
)
In this example, if I want to refer to the website URL, I would refer to it like this:
['field_website']['0']['value']['link']
?>
(I have wrapped the line in a 'div id=' tag so I can style it using CSS)
Now if I edit my event_listing node, I will get something that looks like this:
Don't forget to delete the test line that adds 'yahoo, it works!'.
Now go ahead and add the rest of the fields you want to the form.
If you want to make a group of fields that collapse, all you have to do is wrap those particular fields with and if you want the Group to have a name add
right after the opening fieldset. Here is an example:
This will look like:
It is a bit odd, but at the end of your tpl.php file you put the
print form_render($form);
?>
So, to get rid of the fields that have now been automatically added back in, I have found two methods, one that worked for me (that I am sure is 'wrong' because it isn't very elegant) and another that is very elegant, but didnt' work for me. I would definitely try the 'elegant' route first......which is, you have to override unwanted fields explicity in your template.php file. For example, if I do not want to display the website, I put this text
$form['field_website'] = '';
?>
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
function phptemplate_node_form($form) {
$form['field_website'] = '';
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
// Add Form End
// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
$node = node_load(array('nid' => arg(1)));
if ($node->type == 'content_event_listing'){
function phptemplate_node_form($form) {
$form['field_website'] = '';
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
}
// Edit Form End
?>
Note that I had to put the code snippet into BOTH the 'Add form' and 'Edit form' sections that I newly added.
The 'not so elegant' way to do it is to add the unwanted fields to your tpl.php file, just like the wanted ones and then simply use CSS 'display: none;' to style it away (see below).
OK, now you have a form with all the fields you want on it, none of the ones you don't want and you may even have grouped some of them together into a collapsible group, now what? Now you can style each of those elements using CSS. I am no CSS guru, so I am only doing a few simple things here: 1) I am showing an example of using CSS to hide a field, and 2) I am also putting two fields side by side.
To use CSS to hide a field, simply identify the Here is an example: To use CSS to put to fields side by side, you need to wrap each field that you want side by side in
Then create styles for them to float left like this:
Now my two fields will display side by side - I leave it to you to make it look better - this is just the mechanics of getting it to work! FYI, for those playing around with Drupal 5.x; replace form_render() with drupal_render() - thanks to
#jpj10 {
display: none;
} tags instead of
print form_render($form['field_phone']); ?>
print form_render($form['field_website']['0']['value']['link']); ?>#jpj8b, #jpj8c {
float: left;
}Additional information