Most of our dealings with content so far have been fairly basic in that they require us only to learn which settings to enable and what text to enter. There is a fundamental difference between this and what is coming in this chapter, mainly because the content in this chapter requires us to think ahead and plan what we want ahead of time, in order to prevent things going awry at a later date.
At this point, after hearing so much about taxonomy and categorization in previous chapters, you might be wondering what all the fuss is about. The main reason for concerning ourselves with categorization is that in order to make Drupal's classification system so powerful, it must be left for us to decide how best to implement. This might sound a little strange at first, but we will see later on in the chapter why this faculty of Drupal is one of the things that distinguish it from everything else out there—it's really a good thing!
Accordingly, this chapter discusses the following subjects:
- HTML, PHP, and Content Posting
- Categorization
Don't be fooled by the fact that there are only two items listed here as they both represent a step up in complexity from all the other topics we have discussed so far. However, once these topics are under your belt, you will be more or less on the home straight in terms of the site's development—with only the topic of theming to come before we can begin looking at more administrative-type tasks.
As well as this, the skills learned during the process of honing your content creation and management techniques will prove useful not only for this website but also in other aspects of your life—whether it is creating and managing office reports for your boss, building a new website, or even writing a book. The reason for this is because, by and large, we are now going to learn how content should be managed and created rather than how to click buttons and links to enable or disable settings.
In any case, I'm sure you're eager to get on with it.
We briefly touched upon the fact that it is possible to include HTML or PHP within our posts earlier in Chapter 3, where we added some formatting and a hyperlink to some of our text—we also saw a short PHP script in the section on Adding Blocks in Chapter 4, which provided the site with nice Quote of the Day functionality. So, at this point you should be comfortable with the fact that given sufficient permissions, it is possible to post some fairly unique and interesting content.
It is likely that at some stage you will want to upgrade at least some of your content from plain text to something that looks a little out of the ordinary. If it's layout you are talking about, then HTML is what you need to know. Alternatively, if you want to create some dynamic content, which can change depending on the state of your site, or respond to user interaction, then PHP is the way forward. More than likely, you will end up using a combination of both, once you have gained a bit of experience.
Unfortunately, we can't possibly hope to give you a comprehensive introduction into either technology in the space we have here. However, there are tons of online resources available where you can learn about HTML and PHP for free and we will list a bunch of them throughout this section.
For now, we will look at how to achieve some fairly useful tasks by way of demonstrating how to create an about us page that will contain links to other useful sites, pictures of the imaginary team as well as some dynamic content.
The first thing you need to understand is that it is necessary to stipulate which type of content we will be posting, in any given post. This is done through the use of the input format setting, which is displayed when posting content to the site—assuming the user in question has sufficient permissions to post different types of content. In order to control what is and is not allowed, head on over to the input formats link under the administer main menu item. This will bring up a list of the currently defined input formats, like this:
At the moment, you might be wondering why we need to go to all this trouble to decide whether people can add certain tags to their content. The answer to this is that because both HTML and PHP are such powerful internet technologies, it is not hard to subvert even fairly simple abilities for malicious purposes. For example, you might decide you would like to allow authenticated users the ability to link to their homepages from their blogs. Using the ability to add a hyperlink to their postings, a malicious user could create a virus or some other harmful content, and link to it from an innocuous and friendly looking piece of HTML like this:
<p>Hi Friends! My <a href="link_to_virus.exe">homepage</a> is a great place to meet and learn about my interests and hobbies. </p>
This snippet simply writes out a short paragraph with a link, supposedly to the author's homepage, but in reality the hyperlink reference attribute points to a virus, link_to_virus.exe. That's just HTML; PHP can do a lot more damage—to the extent that if you don't have proper security or disaster-recovery policies in place, then it is possible that your site can be rendered useless or destroyed entirely. Security is the main reason why, as you may have noticed from the previous screenshot, anything other than Filtered HTML is unavailable for use by anyone except you as the administrator.
Again, it is important to re-iterate the tenet:
As they stand, you might not find the input formats to your liking, and so Drupal provides us with some functionality to modify them. Click on the configure link adjacent to the Filtered HTML option, and this will bring up the following page:
The view tab provides you with the option to alter the Name property of the input format; the Roles section in this case cannot be changed, but as you will see when we come round to creating our own input format, roles can be assigned however you wish. The final section provides us with a checklist of the types of Filters we would like to apply when using this input format. In this case the first two have been selected, and this causes the input format to apply the HTML filter (discussed in a moment) as well as the Line break converter, but not the PHP evaluator.
The line break converter simply makes it easier for users to format their content because it means that they do not have to explicitly enter<br> or<p> HTML tags in order to display new lines or paragraph breaks. If this is disabled, then unless the user has the ability to add the relevant HTML tags, you might end up with all your content looking like this:
The PHP evaluator simply causes posts to be sent for PHP processing, so that any code that falls between the PHP delimiters<?php and ?> gets executed properly. This should not be enabled for anyone other than yourself or a highly trusted administrator who needs it to complete his or her work. There is, however, no other work to be done for either of these options. The only additional settings we need to look at here are for the HTML filter.
Click on the configure tab at the top of the page in order to begin working with the HTML filter. You should be presented with something like this (once you have clicked on the HTML filter link to expand its content):
To start with, it is possible to decide, using the first two options, whether you would like to strip HTML tags that are disallowed, or simply ignore all tags from any posts (Escape all tags causes any tags that are present in the post to be displayed as is). Remember that if you strip all the tags from the content, you should enable the Line break converter so that users can at least paragraph their content properly. Which tags are to be stripped is decided in the following section, where you can enter a list of all the tags that are to be allowed—anything else gets removed!
In the previous screenshot you can see that there are eleven different types of tags allowed in this input format. Notice that the first one is in fact the<a> tag, which can be used to insert links into content—so be wary of this!
Following on, the next setting allows us to specify whether users are given HTML help when posting content—try enabling and disabling this option and browsing to this relative URL in each case to see the difference: filter/tips. There is quite a bit of helpful information on HTML in the long filter tips; so take a moment to read over those. The Spam link deterrent is a useful tool if you find that the site is being used to bombard members with links to products not sanctioned by you.
This is not the end of the story, because we also need to be able to create input formats in the event we require something that the default options can't cater for. In this case, let's assume that we want to add some picture files to the about us page, which we will create in due course. Now, there are several ways in which this can be done, but there are two main criteria that need to be satisfied before we can consider creating our page. We need to be able to:
- Upload image files and attach them to the post.
- Insert and display the image files within the body of the post.
We have already seen how to perform task number one when we discussed Upload in Chapter 4 on Adding Functionality. So assuming that you are able to attach files to your posts, this leaves us to deal with the second criterion. There are several methods for displaying image files within your posts. The one we will discuss here does not require us to download and install any contribution modules such as Img_assist. Instead we will use HTML directly to achieve this—specifically, we will need the<img> tag.
Take a look at the previous screenshot that shows the configure page of the Filtered HTML input format. You will notice that the<img> tag is not available for use. Let's create our own input format to cater for this instead of modifying this default option. Head on back to the main input formats page under administer and click on add input format. This will bring up the following page, from which you can build your new input format as shown:
Since we will need to make use of some PHP code a bit later on, we have enabled the PHP evaluator option, as well as prevented the use of this format for anyone but ourselves—normally you would create a format for a group of users who require the modified posting abilities, but in this case we are simply demonstrating how to create a new input format; so this is fine for now.
Clicking Save configuration adds this new format to the list, and it can now be configured by clicking on the configure link adjacent to its name in the list in order to bring up its configuration pages. Now, the only difference between this input format and the default Filtered HTML in terms of HTML is the addition of the<img> tag followed by a space in the Allowed HTML tags list, as follows:
There is one other thing we need to look at before we are done with this input format. As things stand at the moment, we will run into problems with adding PHP code to any content postings. This is because at the moment the HTML filter has its way with the content first, and mangles the code for the PHP evaluator.
Simply click on the rearrange tab when configuring your input format and give the PHP evaluator a lighter weight, as shown here:
Now, the PHP evaluator gets dibs on the content and can process the PHP properly. For the purposes of adding images to your posts, this is all that is needed for now. Once that has been done, save the changes before using this to create the about us page. Before you do, though, it is probably most useful to have a short discourse on HTML since you will find that you need to be able to work with HTML as you attempt more complex postings.
For your browser to render the neatly laid out and colorful pages that we are used to seeing everyday, it needs instructions on what goes where and what color to give everything. This is the domain of HyperText Markup Language (HTML), and Drupal is no exception in its use of HTML here.
Let's have a quick crash course on various aspects of HTML before we go any further:
- Simplicity: From tables and frames to lists and images, as well as specifying fonts and styles, HTML is a convenient and readily understandable convention for web-page creation and layout.
- Platform independence: HTML is platform independent (although not all browsers are exactly the same), which makes sense if you think about it; the last thing you would want, as the builder of a website, is to have to cater for every different type of machine that could make use of HTML.
- Tags: HTML comes in the form of opening and closing tags, which tell your browser how to display the information enclosed within them. For example, the title of a page would be enclosed within the title tags like this:
<title>My Title Page</title>. Notice that a forward slash is used to distinguish a closing tag from an opening tag. - Attributes: Tags can have attributes, which can modify or define certain aspects of a tag's behavior. For example, the
sizeattribute in the following HTML snippet defines the size of the font,<font size="2">I have a font size of 2</font>, when it is rendered in a browser. - Sections: An HTML page is enclosed within
<html></html>tags and is divided into<head></head>and<body></body>sections. The body tags enclose the bulk of the page and contain the information seen on the actual web page. In our case, we need not worry about this because all content is automatically posted between the<body>tags.
This gives us a fair overview of what HTML is and does, but for practical purposes it is important to see what can be achieved right here and now using the HTML that is available to us. Actually, all HTML tags are available for you as the administrator to use, but recall that you should only use this account during development; once your site has gone live, you should post content using an input format that you have designed for the task. Because of this you will need to know what the tags actually do.
The following table discusses each of the default allowed tags along with the<img> tag that has just been added. Bear in mind that it is not really practical to show each and every attribute for each tag here, so if you would like to learn more about each tag individually, then please take a look at http://www.w3schools.com, which is an excellent resource for all things HTML and more.
|
Tag |
Important Attributes |
Description |
|---|---|---|
|
|
|
The |
|
|
|
The anchor element facilitates the creation of hyperlinks or bookmarks, which can be navigated by users. |
|
|
The emphasis tag converts standard text to italics. | |
|
|
The strong tag renders text in bold. | |
|
|
|
The citation tag allows text to be referenced as coming from another source or author. It is often rendered in italics. |
|
|
The code tag changes the style of the enclosed text to mimic computer code's style. | |
|
|
|
The unordered list creates a list of bullet points—it requires the use of the |
|
|
The order list creates a numbered list of bullets—it requires the use of the | |
|
|
The list item tag creates a new item within either an ordered or unordered list; because of this it is contained within | |
|
|
The definition list tag creates a structured list of items that are defined by the | |
|
|
The definition term tag creates a term within a definition list. It is contained within | |
|
|
The definition description tag creates a description of its parent term—it is contained within |
This table really only lists a fraction of all the tags that are available to you to use. Most tags also have a wide variety of required, optional, or event-based attributes that you can play around with in order to achieve the desired effect. There is one other tag that we will need to make use of in order to lay out pages properly, and that is the all important<table> element. Tables are used to order and place content within a page and make use of the<tr> tag, which defines a new row in the table, and<td> tags, which define new cells within that row. As an exercise, head on back to your newly created input format, and add these tags.
This table really only lists a fraction of all the tags that are available to you to use. Most tags also have a wide variety of required, optional, or event-based attributes that you can play around with in order to achieve the desired effect. There is one other tag that we will need to make use of in order to lay out pages properly, and that is the all important<table> element. Tables are used to order and place content within a page and make use of the<tr> tag, which defines a new row in the table, and<td> tags, which define new cells within that row. As an exercise, head on back to your newly created input format, and add these tags.
With that out of the way, we are ready to begin creating a slightly more advanced posting than all the previous ones.
One of the cool things about creating a new page like this is that once it is done, you can reuse the code pretty much anywhere else, substituting in only those values or content that need to change. Obviously, you want the site to look fairly uniform and this supports the principle of code reuse—at least in terms of HTML.
It is quite likely that at some stage you will want to create more than just one standalone page. If this is the case, simply cut and paste whatever page you have created here and make whatever modification you need, before posting. Doing things in this way will lend all your pages a similar look and feel above and beyond the attributes already given to them by the current theme.
The about us page is going to have the following features:
- Well-structured content
- List of objectives
- Inline pictures of the team
- Information about the project
- List of important links
- Some dynamic, PHP-based content
- Advertising
In order to meet the requirements stated, we are going to need to make use of the following tags:
<table><ol><ul><img><a>
along with a few others, which we will use to demonstrate the various types of font styles available. In order to create a slightly more complex page like this, you should consider working with a proper code/HTML editor (something like EditPlus,http://www.editplus.com , will do— alternatively, a simple search on Google will turn up many results, some of which are free) that can indent your code automatically as well as color code the various tags and content, to make life easier.
OK; we are pretty much ready to begin. I am going to list the entire page's code piece by piece instead of all at once because there are quite a few important things that are worth discussing as we go. However, nothing here is too complicated once you have the hang of HTML and PHP. Before we begin, it is better that we look at the resulting page to get a good idea of what we are working towards. The following screenshot shows the bulk of the page:
I hope you'll agree that this page is fairly pleasing to the eye! For very little work it is quite easy to achieve a look and layout such as this. What isn't apparent from this page is that the list of names given here, along with their email links, was provided by a short PHP script that was embedded into the HTML page.
Let's get on with the code—to start with, we have the following:
<table border="0" cellpadding="5"> <tr> <td align="center" colspan="2"> <strong>The CWC</strong> </td> </tr> <tr> <td colspan="2"> The <em>Contechst Wildlife Community</em> was started by a group of individuals in <cite title="South Africa">Cape Town</cite>. Through hard work, dedication and plenty of play time, they have built a truly international community that strives to effect change with regards to all things related to our biosphere. </td> </tr> <tr> <td colspan="2"> <br> We have the following goals: </td> </tr>
This first section is used to declare the table, which will ultimately be responsible for laying out all the content in the places we want to put it. Notice that I have used two table attributes here. The first one, border, is set to 0, which means that the border is invisible. Why have I done this? It's a good idea while you are building your table to set the border to 1, so that you can see what you are doing. When you begin making complex, nested tables and so on, you will find that errors sometimes creep in. Being able to see what your table border looks like is a great help in this case. Once you are finished, simply set the border value to 0 to remove the frames from the page.
The next option, cellpadding, gives each cell in the table a bit of space (or padding, if you prefer) so that content doesn't appear all bunched up together. You can also see that we have a series of table rows and table cells declared in the form of<tr> and<td> tags. However, the first<td> tag has two attributes, which control where the content is placed within the cell (align) and how many columns this cell spans (colspan). This was necessary because at a later stage the image to be added took up a cell on the right-hand side of the table, but the rows above and below still needed to fill the whole page (the whole page being two columns in this case, hence the setting colspan="2").
To get a clearer picture of what I mean, take a look at the following screenshot with the border attribute set to 1:
Notice how the rows, above and below, all span both columns of the center rows. You will often need to play around a bit in order to get things right when working on more complicated tables.
If you look past this snippet of code in the previous listing you will notice the use of the<cite> tag, with a title attribute defined. This is here to show you a novel use for providing references. If a user hovers their cursor over the text contained within the<cite> tag (in this instance, Cape Town), the text defined in the title attribute (in this case, South Africa) will be displayed on screen. In this way you can clarify or explain important terms without cluttering up your pages.
Continuing along, we get the following ordered list of goals:
<tr> <td colspan="2"> <ol> <li> To provide an online meeting place for like-minded people </li> <li> To discuss and monitor global conservation and wildlife activities </li> <li> To influence policy and effect change in hard-hit areas </li> <li> To support front-line activists like SeaShepherd </li> <li> To raise funds for animal relief efforts and care </li> </ol> </td> </tr>
As you can see, each list item contains exactly one line of content (or one goal, in this case), and all are contained within the<ol> and</ol> tags. This is simple enough, but is fairly effective as I am sure you will agree. The next section is where we meet some PHP code as well as insert our image of the team:
<tr>
<td align="center" colspan="2">
<strong>Meet the Team</strong>
</td>
</tr>
<tr>
<td colspan="2">
In no specific order, the following people constitute the bulk of the
full-time staff here at CWC (You can email them by clicking on the names
shown below):
</td>
</tr>
<tr>
<td>
<ul>
<?php
$team = array('Tolis Welch', 'David Mercer', 'Bronagh Casey', 'Nic Malan', 'Brian Reid', 'Rochelle Reid'),
foreach($team as $item){
$name = explode(" ", $item);
echo '<li><a href="mailto:' . $name[0] . '@cwc.org">' . $item . '</a></li>';
}
?>
</ul>
</td>
<td align="center">
<img src="files/bnmv.jpg" alt="The Team" width="250">
</td>
</tr>
<tr>
In this case, we have been quite sneaky, as you will see! To summarize, in this section we:
- Created an unordered list with the
<ul>tag - Opened up a PHP script by using the
<?phptag - Created an array of team member names
- Used a
foreachloop, to iterate through each name in the array - Obtained the first name of each member by using the built-in
explodefunction - Echoed the results, replete with HTML tags to the screen
The actual email links were created using the<a> tag and the special mailto option within the href attribute. The email addresses were built from the first name of the team member so the first two addresses are<[email protected]> and<[email protected]>. This is slightly contrived as you might not have such an ordered system to your email addresses, but it serves to demonstrate how PHP can be embedded into your pages quite nicely.
Once the email addresses have all been listed, we create a table cell adjacent to them and use the image tag to insert the picture of the team. As you can see, there are three attributes used here to get things done. The first, src, gives the path to the image file to be displayed; the second gives a description of the photo so that if someone hovers their cursor over the picture, the text The Team will be displayed; finally, we picked a size for the width of the photo in order to fit it to the page properly. Take note:
The following section of HTML prints out a list of links to a few other organizations that may be of interest to users:
<td colspan="2"> At CWC we strive to do the <em>right thing</em>! Please take the time to look over the site and register in order to start interacting with the community - our natural world needs all the help it can get.<br><br> If you are interested in getting involved in any one of the number of critically important organizations around the world, then please feel free to browse any of the links given below. </td> </tr> <tr> <td align="center" colspan="2"> <strong>Our Friends</strong> </td> </tr> <tr> <td colspan="2"> <ul> <li> <a href="http://www.seashepherd.org" target="_blank">Sea Shepherd</a> </li> <li> <a href="http://www.worldwildlife.org" target="_blank">World Wildlife Fund</a> </li> <li> <a href="http://www.rspca.org.uk" target="_blank">The Royal SPCA</a> </li> </ul> </td> </tr>
This part is fairly straightforward, with the exception of the fact that we are now using a new attribute for the<a> tag. Because we would rather have people remaining on the site without moving off to visit our friends, we have set the target attribute to _blank to force the browser to open up a new window to display the target URL. Other than that, this section is pretty clear, so we move on to the last item on the page—the advertisement:
<tr> <td align="center" colspan="2"> <strong>Our Sponsors!</strong> </td> </tr> <tr> <td align="center" colspan="2"> <a href="http://www.packtpub.com" target="_blank"> <img src="files/PacktLogosmall.png" alt="Packt Publishers"> </a> </td> </tr> </table>
This makes use of both a hyperlink and an image file. In effect, we have turned the image, the Packt logo, into a hyperlink by enclosing it within<a> and</a> tags. This means that people can not only view the sponsor's logo, but if they wish, they can also visit the sponsor's site directly by clicking on the image. If your sponsors wished to track how many times people followed links from your site, they might require you to modify the target URL to provide them with some additional information. For example, you might end up making the hyperlink reference something like this:
<a href="http://www.packtpub.com?referrer=cwc" target="_blank">
Actually, things like tracking banner ads can get fairly complicated, but that is a whole other story; so we won't go into it here!
With that done, you not only have a nice, shiny new about us page, but you also have a rough template from which to make other pages with a similar look and feel. There is actually a lot more that goes into giving your pages their look and feel, but this involves the use of themes, which we have not yet discussed (these will actually be discussed in detail in the following chapter).
With the page completed, we are not quite finished yet, because it still needs to be added to the site. In order to do this, we need to look at how to actually work with the content we are adding.
We saw earlier in the Working with Content section how to post pages, although we didn't really have any fairly complex pages to work with at that stage. This brief section will show you the process for getting your more complex pages up and on the site. The following list shows the steps required:
- Create a new content post, or edit one that is to be modified. In our case, we have an about us page already, so as the administrator we can simply click on the edit tab when viewing the about us page.
- Enter or modify the title of the page accordingly.
- Select the correct input format. In this case we have a specially created format called Inline images.
- Copy and paste the HTML created in your HTML or code editor into the Body text area.
- Ensure the Authoring information and Publishing options are all correct.
- Upload any image files that are needed for this post and ensure that you enter the correct file path and name into your code. For example, the File attachments section of the about us page looks like this:
- In this case, I have not decolorized the bnmv.jpg image as I wanted to preserve its quality for the purposes of the book—however, you should probably aim for image sizes under 10KB.
Compare the file paths shown in this screenshot to the ones presented in the code (these file paths are what you would expect when the download method for files is set to Public):
src="files/bnmv.jpg" src="files/PacktLogosmall.png"
Notice that in the code, we need to give only the relative file path and not the fully qualified one. Because the page is being called from the drupal directory, which contains the files directory, we need to show only the file path and name from files onwards.
Note
If you find that instead of getting a file path like the ones shown in this demonstration, you get something like
http://localhost/drupal/system/files?file=PacktLogoSmall.png, then it is because you have the Download method set to Private in the File system settings section of the settings menu item under administer.This means that files are uploaded somewhere outside of the document root (this is set in the same section under File system path), and you need to enter the fully qualified file path instead of simply the relative file path as we did here.
- In this case, I have not decolorized the bnmv.jpg image as I wanted to preserve its quality for the purposes of the book—however, you should probably aim for image sizes under 10KB.
- For something like the about us page it is probably best to disable comments as you really want this to be a standalone page and not subject to any debate from the rest of the community.
- Next, ensure that the menu settings are appropriate for the page you are adding. In this case, we have the following settings in place:
That's it! Once you are ready to view the page, click on Preview, and if everything looks in order, submit it. You can easily edit it again if anything is wrong; so don't fret too much about getting everything just right before you look at it on the site.
So, this section should hopefully have you feeling quite good about how easy it is to create really nice pages for your site. Obviously, if you are not familiar with either HTML or PHP, you will need to practice a bit with these, but the following links should give you a good start:
Now that you know how to post and work with content, it is important that you learn how to classify and organize that content so that the archive of information that piles up on your site over time doesn't simply become an unsorted heap of laundry, but instead becomes an intuitive and easy-to-use resource of information. In order to achieve this, we need to discuss…