Benefits and Drawbacks

Benefits of this technique

Drawbacks of this technique

Setting up your Content Types with CCK module

This lesson will use a sample CCK Content Type called "Article". You can create or import this Content Type to follow along (grab the import code from below ***ADD CODE***), or else simply apply the concepts to your own content types. Before beginning on your own home page, it is important that you fully develop the Content Types you will be using for your site (or at the least, those that will be involved with the home page in any way). Since your Content Types make up the bulk of what your home page will actually consist of, it's important to have them all sorted out before dealing with your home page. If you'd like some guidance on setting up your own Content Types and fields before proceeding with this lesson, please visit the following resources:
-
 -

For simplicity, our sample Article content type will have the following fields:

• title (standard Title field)
• body (standard Body field)
• teaser_title (text field, set with a maximum of 50 characters)
• teaser_text (text field, set with a maximum length of 100 characters)

(your Content Types may have considerably more fields, or additional types such as Image fields)

You might wonder why you need the teaser_title and teaser_text fields, instead of just using Drupal's own node title and automatically generated teaser text. On a more complex home page, it becomes important to ensure that certain blocks of content will always consistently fit into the specific amount of space that's been allotted to them (enforced during entry of the content with the field's "maximum length" setting). On more professional sites, a short "synopsis" of each item of content is generally preferable to an auto-generated chunk of text cropped off of the beginning of the full content's page, which is Drupal's default behavior. Having a separate teaser_title is more optional, but if you choose to have one, will allow you to set a different or shorter version of the title to more easily fit into the confines of the home page, while still allowing you to have a full length title for the actual page. Setting up dedicated text fields in CCK for the teaser and title helps to accomplish all of these purposes.

If you prefer to go "all out" with your Article content type, here are some additional field options to choose from (including these just for your reference/ideas - they are not used in the lesson):

• article_date (text or date field - if this is an online version of a printed article, this could hold the date the article was actually published - rather than the date the content was added to Drupal)
• sub_title (text field - a short sub-title, as is often seen on articles)
• author_name (text field - as this is probably a different name than the admin account publishing the content)
• article_image (imagefield - the main image for the article... using Imagecache module, it would be scaled and cropped to make the teaser image, the primary image at the top of the article page, and also could be used to create thumbnail images to display in other contexts throughout the site)

When your Article content type is fully completed, your editor/staff will just need to click Create Content -> Article, and be presented with exactly all of the fields they need to fill out and images to upload to completely and correctly produce an article (with no coding - other than maybe light HTML for the article formatting itself unless you give them a WYSIWYG editor).

Setting Up a Node Queue

I'm assuming you want to be able to select various articles/pages from the site to feature in the middle row of the home page, in a specific order (the top one being the Cover Story). The way to do that is to create a View that has its order controlled by a Node Queue. To make your Node Queue, go to admin/content/nodequeue/add/nodequeue . Enter a title (e.g. home_articles_queue), Queue size of 4, and for Type choose Article (assuming you've made the CCK type). You might also like to check "Reverse in admin view", as this will cause queue items to drop from the bottom of the list rather than the top as new items are added, which may or may not make better sense to you (if you do this, you'll also probably want to adjust the NodeQueue: Queue Position sort criteria option to "Descending" in the View you'll make in the step below). Node Queue also adds a new tab to pages of the content type you selected in the previous step (Article), and you can click that tab from any page and add the page into the queue. You can then reorder the queue as you like by going to admin/content/nodequeue and clicking on the View option of the queue you want to adjust (and you can also use the search field to add additional content directly to the Node Queue).

Making a View, sorted by Node Queue

Next comes the View that is ordered according to the Node Queue. You can make your own View and add the Node Queue "Filter" and "Sorting" options, or you can use the default nodequeue View that is generated for each nodequeue as a starting template to customize. Go to admin/build/views and look down in the "Default Views" area for a View called "nodequeue_1". Click the Add link to the far right and you'll call up a Views page containing the default options for that View. Change the name some something else (e.g. home_articles), uncheck Provide Page View. Scroll down to the Block options - ensure List View is selected, remove the title, set the # to 4, and uncheck More link. Next add the needed fields from your Article content type (e.g. at least the teaser-image, or other fields if you decide to make those as text/images/css). For Filters, add Node: Published (set to yes), and Node: Type (set to Article). When you're finished, save the View.

Making your Views accessible to Panels module

To add a View to Panels you first need to specifically tell Panels which Views you want to make available for it to use. To do this, go to: admin/panels/views, choose the name of the View you just created above from the selection menu, and press Create panel view. Copy and paste the View's name into the Panel view title field - you can leave all the other settings as default - scroll down and submit the page.

Pulling everything together for your home page with Panels

1. With Panels 2 module installed, go to admin/panels/panel-page/add and click on "Flexible". In your case you "could" just use the Single column layout, but the Flexible layout is ideal since you'll be able to easily change and adapt the layout in the future if you need to.
2. Type home for both the Panel name and Path, and press Save and Proceed.
3. If you prefer your XHTML to be as lean as possible, you should make use of Panels' ability to stack multiple content items inside a single Pane of the panel (this is especially simple in a single column layout like you have). When you have a more complex layout this may not be possible, but in your case it is. So if you'd like, go with Option 1 below for that, or else Option 2 for separate rows (more divs).
4. Option 1: Set the Rows option to 1. Change the column title for Row 1 to Home Articles. Ignore Rows 2 and 3 (setting the Rows option above to 1 will cause these extra rows to be deleted when you save this page). Click Save and Proceed.
5. Option 2: Leave Row 1 as is. For Row 2 set: 100, 1, empty, empty ... and change the name to just Middle. Leave Row 3 as is (you'll now have a layout with 3 rows in a single column). Click Save and Proceed.
6. Nothing needed in the next two screens right now, so press Save and Proceed twice to get to the Content page.
7. Note: for the following steps of adding content to the Panel, I suggest that for each you add a custom CSS ID when given the option (e.g. home-top, home-middle, home-bottom). This will make it easy as pie to style each Panel pane with easily recognizable names in your CSS.
8. Depending on your choice of Option 1 or 2 above, you now see 1 row (Option1) or 3 rows (Option 2) where you can add content using the + icon. In the Top row, choose to make New Custom Content (which is just basic content added directly into the Panel as opposed to using other preexisting data from the site), and paste in the welcome text and HTML for the home page in the Body.
9. In the Middle row, this is where to add the Nodequeue-controlled-View mentioned earlier. It should be listed when you click the Add content + button, since we made it available to Panels module earlier.
10. The bottom pane could just be another New Custom Content item if you like, with the image/link HTML pasted in... or you could get more fancy and have another CCK type to hold this image and the correct link to the latest, plus a single item View that always will show the latest item. Another alternative is to embed a node in a Panel, which you might do if you want simple HTML/image but need someone to be able to edit it without allowing them access to Panels module - make a single Page node (or other CCK type), add the content to it, and drop the node into Panels following the steps on the above-referenced link (now a person can update the content of that node and not need to use Panels to do it).