CCK - Content Construction Kit

CCK or Content Contsruction Kit allows you to create types of content on your site and add your own fields.  For example, if you are selling CDs, you would want a CD title, artist name, tracks and cover art.  You can choose how these fields are output, or even completely customise the output if you use some basic HTML and CSS. 

Since CCK is such a fundamental module we will be taking an in depth look at it now.

  1. Download the ‎Content Construction Kit (CCK)‎ module
  2. Upload it to your site
  3. Go to: Administer > Site building > Modules

On the module page you will see a 'CCK' fieldset.  Within this you must enable 'Content' and any types of field you would like to have, most likely 'Text'.  If you install other CCK field modules, they will appear here.  Popular ones are ‎Date‎, ‎FileField‎ and ‎ImageField‎ and you can find more by going to http://drupal.org/project/modules and selecting 'Content Construction Kit (CCK)' under Projects on the right.

 Adding fields to a content type

  1.  Go to: Administer > Content management > Content types

Here you will see the existing content types on your site.  You can add new content types, edit the existing ones and manage fields.  Click on manage fields for 'Page'.

You wll now see a table consisting of the default fields which are grey showing you can't edit them but you can rearrange them to change the order they appear both on the edit screen and when being displayed.  At the top you will also see 'Display fields' which you can use to hide field labels, and choose which ones to display in a teaser or on a full page view.

So back to the 'Manage fields' table.  At the bottom you will see the section to add your own fields.  The label appears on your edit screen and optionally when the node is being displayed, the field name is used internally but it's a good idea to give it a descriptive name.  'Type' is the actual type of field you want and 'Widget' or 'Form element' is what you use to actually manipulate the field e.g. for the 'Text' type this can be text field for a short, plain piece of text, or text area for longer text and where you may want to use a rich text editor.  Let's add one now:

  • Label: Subtitle
  • Field: subtitle
  • Type: Text
  • Widget: Text field

Click save

You will now see several options:

  1. Size of text field - this is the size of the form element on the edit screen
  2. Help text - any description you want to be shown under the field
  3. Default value - set a value that should  be displayed unless it is changed or deleted
  4. Required - a value must be entered.  The node cannot be saved without completing the field
  5. Number of values - you can have one or more fields of this type or even unlimited where you can keep adding any number of values
  6. Text processing - whether the text should be filtered, e.g. remove HTML or special characters or just keep the text exactly as you enter it
  7. Maximum length - This is different from 'Size of text field' because it actually restricts the number of characters entered rather than just changing the form element size
  8. Allowed values - allows you to restrict the possible values to a list you define

You can just hit 'Save' at the bottom and you will see the field has been added to the table.  Now drag it under 'Title' using the cross icon and click 'Save'.  Click on 'Display fields' and you can remove 'Label' if you wish and let's set the field to Hidden for the Full node.

Great! We're done here, let's go and try it out...

Go to Create content > Page, you will see your Subtitle field.  Enter some text for the Title, subtitle and body.  Now we're going to see what happens with the teaser and full node view.  Scroll down to Publishing options, open it up and check 'Promoted to front page', save the page. 

Because we selected 'Promoted to front page' this node will now show on the homepage.  Click your Drupal icon to go there and you'll see your subtitle with its label.  Let's remove the label now and set the subtitle to only display on the full page view:

  1. Go to: Administer > Content management > Content types
  2. Click 'manage fields' for Page
  3. Click 'Display fields' and change Label to 'Hidden'
  4. Change 'Teaser' to hidden
  5. Save and then go back to the homepage.

You'll now see the 'Subtitle' label has gone and the subtitle doesn't appear when you're on the homepage. I bet you're wondering how you can change how your subtitle looks.  Well, there are lots of options, but there's one in particular which is a very quick way to do it using the ‎CSS Injector‎ module.

  1. Download and install the ‎CSS Injector‎ module
  2. Go to: Site configuration > CSS injector
  3. Click on Create a new rule
  4. Give it a title something like 'My CD'
  5. In CSS code put: div.field-field-YOURFIELDNAME {font-weight:bold}
  6. Save and view the page you created

Replace YOURFIELDNAME with the name you gave the field.  For example: div.field-field-subtitle {font-weight:bold;}

Here we introduced a bit of CSS.  CSS is a huge subject but if you're just formatting some text you may find the folloiwng useful: