What is Plone?

Plone is a content management system (CMS) which you can use to build a web site. With Plone, ordinary people can contribute content to a web site without the help of a computer geek. Plone runs over the Web, too, so you don’t need to install any special software on your computer. The word content is meant to be general, because you can publish so many types of information, including:

A Plone web site contains various kinds of content, including text, photos, and images. These can exist in many forms: documents, news items, events, videos, audio files, any types of file and data that can be uploaded or created on a web site. Content can also be uploaded from your local computer. You create folders on a Plone web site to hold content and to create a navigation structure:

You Love Butterflies

For example, to add content about butterflies, you might add a folder named "Butterflies," then add some text to a web page in the folder:

And then you might add some butterfly photos to the folder:

You can add many types of content to a folder, including sub-folders. After adding a few reports and videos to the Butterflies folder, the content would be organized like this, with two sub-folders within the Butterflies folder:

What Goes on Behind the Scenes

You may wonder how it all works. A typical Plone web site exists as an installation of Plone software on a web server. The web server may be anywhere, often at a website server company within a "rack" of computers dedicated to the task:

The diagram shows the many cables that connect individual server computers to the Internet, across fast network connections. Your Plone site is just software and database storage software installed on one of the individual server computers. As you type or click on your computer, data is sent up and down the networking cables and communication channels of the Internet to interact with your Plone software installation on the server.

Let's simplify the diagram showing how you interact with Plone:

You use your web browser -- Firefox, Safari, Internet Explorer, etc. -- to view and edit your Plone web site, and the changes are stored by the Plone software into its database storage system.

For example, imagine your butterfly Plone web site is located at at mysite.com. You type www.mysite.com into your web browser. After you press Enter, the following sequence of events happens as your browser talks to the web server at mysite.com:

The Plone software responds:

Plone reads its database to look for information stored in mysite.com. It then sends back the web page to your computer, in a code called HTML. HTML is a computer language that describes how a web page looks. It includes text, graphics, fonts, the color of the background, and just about everything else. There are many online resources that can teach you HTML details, but one of Plone’s advantages is that you don’t need to know (much) about HTML. That’s one reason for Plone and other similar web software; to let you focus on your content, e.g., butterfly text and graphics, instead of learning a new computer language.

But back to our overview. Your web browser "renders" (translates) this HTML, and you see the resulting web page:

As you view your butterfly web page, you can choose to change it or add to it. You can also upload photos, documents, etc. at any time:

After you make your edits and click "save changes," the new version of the web page will be immediately available to anyone surfing to your site:

What does a Plone web site look like?  For years there has been a consistent design for the default Plone appearance.  The default design looks generally like this:

The Plone web site you use could have a design radically different from this, but you should be able to find common elements, such as the log in link and a navigation panel or menu.  In the default design, the navigation menu is in the left area, and usually appears as an indented list of folders in the site.  There also may be a set of tabs in the Log In, Location Information strip near the top.

We can distinguish between the design of a web site and the functionality of a web site.  For getting work done, focus on the functionality and don't worry so much about the appearance and layout of the web site.  A strength of the Plone content management system is that a web site can be radically redesigned for a new look, without affecting the underlying content and functionality. The navigation menu can be moved from the left to the right, but it works the same.  The right area can be deleted where functionality normally put there isn't needed.  The areas for left, main, and right, as depicted above and below, could be changed to top, middle, and bottom, but it would still be a Plone web site underneath.

We'll use the default Plone layout design as an example of typical divisions of the screen:

You may need to adapt these terms as needed for your Plone web site design. You may encounter varied terms for describing screen real estate, such as right and left "slots," for the left and right column areas, "portlet," or "viewlet," for discrete areas or boxes, and several other terms.

For example, we can select three web sites from the list of Plone web sites to compare:

This is the web site for Akamai, a leading provider of online web tools and acceleration technology. The header area has simple text menu choices for five main content areas arrayed horizontally at the bottom of the header area. At right, the header contains another horizontal menu and a search box.  The bottom of the header area would contain log in information, for use by the maintainers of the web site. The main graphic at top left is a focus area for eye-catching graphics and current topics. There is a main area at left center where the main text is located. The right column holds a series of "portlets." The footer contains a horizontal menu, repeating the menu choices in the header, for convenience. There is a right-most column that has zoom settings.

This is the web site for Discover Magazine. The header area contains a large horizontal menu, the "main menu," if you will, a smaller horizontal menu at upper right, and a search box. This site is rich with textual "portlets" that cover so many topic areas, which are divided into three columnar areas, left, middle, and right. The top of the middle column contains a focus area with a video. There are large interactive boxes in several places. The footer contains basic site identification information and a link to "about us." For a large web site like Discover's, maintainers of the site log in to custom editing screens, and there is much automation of data feeds -- Plone uses Zope, a sophisticated storage system, and Python, a great programming language, which facilitates intelligent "wiring" of the flow of text and graphics into the web site.

The last of the three sites to examine is the web site for Penn State University's Smeal College of Business. The header contains a logo, a horizontal menu for main topic areas, and a search box at right.  There is a main menu for this site at left, which is more traditional for a Plone web site. A large graphical area contains a rolling focus animation. There is another small graphical focus in the left column.  Three textual columns round out the design, above the basic identification footer. Maintainers of this web site enter by means of a custom log in page, with the log in and user information showing along the bottom of the topmost header area.

So, what does a Plone web site look like? Traditionally, the out-of-the-box look is like that shown at the top of this page, with header, menu, columns, and a footer.  These three sites illustrate how designers typically combine focus areas, vertical and horizontal menus, "portlets," and textual content, usually arrayed in several columns. The underlying machinery is Plone and Zope and Python, but the design "theme" or "skin" can be made to look any way the designer chooses.

Plone web sites come in many flavors, ranging from personal websites with one user to community, organization, or business websites that could have hundreds of users.  Each person who adds content to a Plone web site has their own user account.  A user account includes a user name and a password.  Some Plone sites allow people to sign up by visiting the site, clicking a Join link, and filling out basic user information. Other sites have user accounts that are created by web site administrators, in which case people normally receive emails with the user account details. 

However created, a Plone user account allows a person to log in by typing their user name and password.  Passwords are case-sensitive, which means that you have to pay attention to the uppercase and lowercase letters.  For example, if your password is xcFGt6v, you would have to type that exactly for it to work.  Passwords that have a variety of characters in them are preferred over passwords like "raccoon" or "boardwalk," as they are more difficult to guess and therefore more secure.

Anonymous vs Authenticated Web Surfing

The distinction between anonymous web surfing and authenticated (logged-in) web activity is an important one: 

Anonymous Web Surfing

     This is the normal experience for a person surfing the web.  You type the web address of a web site into your browser and you look at web pages, watch videos, view images, but you don't have to log in.  This is why this mode is called anonymous: anyone can do it just by surfing normally. Note the presence of the log in link the screen image below (top right). If there is a log in link showing, you haven't logged in -- and you are surfing the web site anonymously, as seen in the following screen capture of a new Plone web site:

Authenticated (Logged-in) Web Activity

     You know the authenticated mode of web experience if you have ever used a bank or credit card website, or any other website that involved a user account.  A bank web site will let you view your account information, fill out information forms, transfer funds, and do other actions, but only after you have logged in.  A Plone web site is not much different, except that in you can do some more sophisticated things.  Compare the screen image below, captured after a user called "John Smith" has logged in.  Near the top right you see links for John Smith's name and log out. There is another important difference you see after logging in -- the main area in the middle now has a green header strip with tabs. This sort of header strip is present when a user has rights to change an area of the website.  John Smith has the user rights to change this main area.  The tabs in the green header strip for the main area will vary somewhat, but you can count on it looking like a tabbed interface with this particular green color. In the following screen capture, user John Smith has logged into a new Plone web site:

User Roles

Equally important is the distinction between different user roles on a Plone web site.  To illustrate the simplest case, let's consider two user roles, one called member and the other called manager. Consider the different rights or "power" of these two roles:

Member

• has a user account, so can log in
• can add content, but only in specific areas, and can't change anything outside of this area; often users are given a "home area," to treat as personal space where they can add content.
  
• can not publish content so that it is visible to the anonymous web surfer, even content which they added; a person with manager role must approve content for publishing
  

Manager

• has a user account, so can log in
• can add content anywhere and has the power to change anything
• can publish any content

When you get your new account on a Plone web site, you should  be given information indicating where you have the right to add content, after you have logged in.  After logging in, if you go to a folder where you have rights, you'll see a header strip that has a green color with tabs for contents, view, edit, properties, and sharing:

You'll be able to explore to find the differences between these tabs, but here are descriptions to help you start:

• Contents - shows a list of items in a folder
  
• View - shows the view an anonymous web surfer would see
  
• Edit - shows a panel for changing a view
  
• Rules - shows a panel for controlling how an item is created and managed
  
• Sharing - shows a panel for setting rights of other users to see or edit content
• History - shows a history of change for an item
  

You also see menus in the lower part of the green header strip, Display, Add new..., and State:

Explore these also. Here are basic descriptions of these menus:

• Display - shows menu choices for setting the display type (list view, summary view, etc.)
• Add new... - shows menu choices for adding content items (images, pages, folders, etc.)
  
• State - shows menu choices for setting publication state (private, public draft, public, etc.)

These menus and tabs will offer the main ways you interact with Plone. You will become very familiar with them as you learn more about managing a Plone-powered website.

When you visit a Plone web site anonymously, or are given the web address for site maintenance, you'll see a log in button something like this:

After clicking the log in link, you'll see an input panel where you type in your user name and password:

After logging in to a Plone web site you will see some indication of your name, often along the top in the strip beneath the header. You can click on your name to manage your personal preferences, covered next.

After logging in, your full name will be posted on the right side of the header strip. Click your name to go to your personal area, called the dashboard:

You will see the dashboard panel:

When you log in for the first time, your dashboard will be empty, as the Info message explains. Portlets are specific "views" of different types of content. You can choose which ones you want in your dashboard by clicking the Edit tab, but we'll get to that in a second.  First, let's look at the Profile and Personal Preferences links at top right. Clicking the Profile link brings up a panel that shows your personal profile photograph, if you have uploaded one:

After you have created content on the web site, you can come back here to see it nicely listed.  The Edit tab for the profile, or the Personal Preferences link discussed above, will bring up the personal preferences panel:

Date entry fields include:

• Full Name - If your name is common, include your middle initial or middle name.
  
• E-mail address - REQUIRED - You may receive emails from the web site system, or from a message board, if installed, etc. When an item is required, a little red square will show alongside the item.
  
• Location text box - This is the name of your city, town, state, province, or whatever you wish to provide.
  
• Language preference selection menu - Plone excels at offering multilingual support.
  
• Biography text box - Enter a short description of yourself here, about a paragraph or so in length.
  
• Home Page web address - If you have your own web site or an area at a photo-sharing web site, for instance, enter the web address here, if you wish, so people can find out more about you.
  
• Content Editor selection menu - You have the choice of using Kupu, which lets you edit web pages with a nice graphical interface, or using a basic editing panel, which is good if you are accustomed to writing web pages using HTML (the basic "code" of web pages). The default setting is to use Kupu, and is assumed in this user manual.
• Enable External Editing checkbox - This is for switching on and off an "external" editor, if one has been installed by the web site administrator. Use of an "external" editor is mainly for web designers and programmers who do more editing of actual code, but it could be useful for volume page creation using specialized text mark-up languages. (Don't worry about this setting if you haven't heard anything about it from your web site administrator).
  
• Listed in Searches checkbox - Uncheck this box if you do not want to be listed in searches.  Normally you would want to keep this checked, because having open communications is an important goal of most Plone web sites.
  
• Portrait photograph upload - The portrait photograph will appear as a small image or thumbnail-size image, so it is best to use a head shot or upper-torso shot for this.
  

You can change your preferences whenever you wish.

Plone has several built-in "views" of news, events, recently changed items, and such. These list views are held in discrete rectangular areas called portlets. Think of a portlet as a window view of a given type of content. For example, the news portlet offers a view of recently published news items.

You control which portlets you view in your dashboard, and where they are placed.  The following screen capture shows what user Elizabeth Smith would see after logging in and clicking her own name at upper right to go to her personal area:

The dashboard appears to be empty for a new user.

Clicking the edit tab for the dashboard will show that there are portlets already assigned to the dashboard -- the dashboard view shown above is empty, because there is no content available for display in the portlets on this new web site. Here are the default portlets:

You see the News and Events portlets in the left-most column, the Recent Items portlet in the second column, and the Review List portlet in the right column. The third column does not have a portlet assigned.

A new user account on a basic Plone web site will have a dashboard like the one shown, but for a web site that has been customized with add-on functionality, there may be more portlets to choose from, and the dashboard might start out with several more placed in the columns.  For example, there could be portlets for "current weather," "stock ticker," "quote of the day," etc., depending on what is installed for the web site (such things would require custom software). Depending on what is installed for the site, the user can customize the portlets they want to see and where to place them within the four columns.

So, for the typical Plone user account, the dashboard would start with the portlets shown above, and later would be "populated" as news items, events, and other content items are added to the web site.

You have undoubtedly created folders (directories) on your computer.  On Windows PC systems a hierarchy of folders is often created on c: or d: hard drives, or within a Documents folder.  On the Mac and other systems, folders are created in a similar fashion.  Plone folders are essentially identical, except that they are created on a Plone web site, for organizing content in Plone's built-in storage system.

Folders are added by clicking the Add new... menu (You need to be logged in to see the Add new... menu):

After clicking to add a folder, you'll see the Add Folder panel:

Fill in the title, which is required, as indicated by the red square.  The description is optional; you can always come back to the edit panel if you need to add a description of the folder. Descriptions are useful when a site visitor uses the search tool included with Plone - results will display with both the Title and Description of the item.

You also notice tabs along the top: Default, for entering the Title and Description fields, Categorization, for specifying categories that apply to the folder (you may know these as keywords), Dates, for setting the time period when the folder should be available for view on the web site, Ownership, for specifying the creator and/or contributors for the content item, and Settings, for allowing comments about the item and whether it shows in the navigation menu for the web site.

These tabs are standard, so you'll see them when you click other content types. We will cover these tabs in another section of this user manual.

Be sure to click Save at the bottom of the page when you are finished. This will complete the folder creation process.

Watch a Plone 2 (significantly different) video on adding a folder.

What's in a Web Name?

The Title of content items, including folders, images, pages, etc., can be anything you want -- you can use any keyboard characters, including blanks. Titles become part of web address for each item you create in Plone.  Web addresses, also known as URLs, are what you type in a web browser to go to a specific location in a web site (Or, you would click your way there), such as:

www.mysite.com/about/personnel/sally/bio

OR

www.mysite.com/images/butterflies/skippers/long-tailed-skippers

Web addresses do have restrictions on allowed keyboard characters, and blanks are not allowed. Plone does a good job of keeping web addresses correct by using near-equivalents of the Title that you provide, by converting them to lowercase, and by substituting dashes for spaces and other punctuation. 

To illustrate, let's take each of these two web addresses and split them out into their component parts:

www.mysite.com/about/personnel/sally/bio
^ 
website name
               ^ 
               a folder named About
                     ^ 
                     a folder named Personnel
                               ^ 
                               a folder named Sally
                                     ^ 
                                     a folder named Bio

In this example, Plone changed each folder title to lowercase, e.g., from Personnel to personnel.  You don't have to worry about this. Plone handles the web addressing; you just type in titles however you want.

And, for the second example:

www.mysite.com/images/butterflies/skippers/long-tailed-skippers
^
website name
               ^
               a folder named Images
                      ^
                      a folder named Butterflies
                                  ^
                                  a folder named Skippers
                                           ^
                                           a folder named Long-Tailed Skippers

This example is similar to the first, illustrating how there is a lowercase conversion from the title of each folder to the corresponding part of the web address. Note the case of the folder named Long-tailed Skippers. Plone kept the dash, as that is allowed in both title and part of the web address, but it changed the blank between the words Tailed and Skippers to a dash, in the web address, along with the lowercase conversion.

The web address of a given item is referred to as the short name in Plone. When you use the Rename function, you'll see the short name along with the title.
 

Preparing Images for the Web

Remember to use web-standard file formats for all images. Acceptable formats include: JPG, JPEG, GIF, and PNG. Do not use BMP or TIFF formats as these are not widely supported by web browsers.

When you are ready to upload an image, use the Add new... drop-down menu (You will only see the Add new... menu after logging in):

After clicking to add an Image, you'll see the Add Image panel:

The Title and Description fields (field, as in "data input field") are there, as with adding a Folder, and at the bottom there is a place to upload an image. Let's look at the three input fields individually:

• Title - Use whatever text you want, even with blanks and punctuation (Plone handles web addressing). 
  
• Description - Always a good idea, but always optional. Leave it blank if you want.
  
• Image - The Image field is a text entry box along with a Browse... button.  You don't have to type anything here; just click the Browse button and you'll be able to browse you local computer for the image file to upload (Remember: You need to remember where you keep your images on your computer).

For images, at a minimum, you will type in a title and browse your local computer for the image file, then click Save at the bottom to upload the image to the Plone web site.  You'll have to wait a few seconds for the upload to complete (or a minute or so, if you have a slow Web connection). A preview of the uploaded image will be shown when the upload has finished.

To add a page, use the Add new... menu for a folder:

Select Page from the drop-down menu, and you'll see the Add Page panel:

The Title and Description fields are there at the top. Fill each of them out appropriately. There is a Change note field at the bottom, also a standard input that is very useful for storing helpful memos describing changes to a document as you make them. This is useful for pages on which you may be collaborating with others.

The middle panel, Body Text, is where the action is for pages. The software used for making Pages in Plone, generically called visual editor and specifically a tool called Kupu, is a most important feature allowing you to do WYSIWYG editing. WYSIWYG editing -- What You See Is What You Get -- describes how word processing software works. When you make a change, such as setting a word to bold, you see the bold text immediately. What you see is the bold text - Plone takes care of the HTML end of things.

If you are the sort of person who likes to enter text using so-called mark-up formats, you may switch off the visual editor under your personal preferences, which will replace Kupu with a simplified text entry panel. The mark-up formats available in Plone are:

• Markdown
• Textile
• Structured Text
• Restructured Text

Each of these works by the embedding of special formatting codes within text. For example, with structured text formatting, surrounding a word or phrase by double asterisks will make that word or phrase bold, as in **This text would be bold.** These mark-up formats are worth learning for speed of input if you do a lot of page creation, or if you are adept at such slightly more technical approaches to entering text. Some people prefer such formats not just for speed itself, but for the fluidity of expression. There are very many special codes to learn for most of these formats, so using one really doesn't carry much overhead.

But, most people are naturally comfortable with the WYSIWYG approach of typical word processors.

So, we'll continue here with how to take the typical approach: to use the visual editor (Kupu) tool.

Watch a Plone 2 video on using the visual editor to edit the body text of a page.

What is Kupu?

Kupu is an open source client-side editor for Firefox, Netscape and Internet Explorer. Inspired by Maik Jablonski's Epoz editor, it was written by Paul Everitt, Guido Wesdorp and Philipp von Weitershausen to improve the JavaScript code and architecture, standards support, support for webservers other than Zope (which was the original target platform for Epoz), customization, and other issues.

Kupu's features:

• Kupu is easy to integrate into a variety of CMS.
• Kupu can be easily customized and extended.
• High-tech and up-to-date Kupu uses CSS in favor of HTML for layout and presentation.

Kupu Button Index

A typical Kupu toolbar looks like this:

 

The following table describes the function and output of each button.

Icon	Function	Description	Example	Example resultant HTML code
	save	Saves changes
	bold	Bolds selected text	text	<strong>text</strong>
	italicize	Italicizes selected text	text	<em>text</em>
	subscript	Transforms selected text to subscript	textscript	text<sub>script</sub>
	superscript	Transforms selected text to superscript	textscript	text<sup>script</sup>
	text color	Colors selected text
	background color	Color background of the selected text
	left justify	Aligns the selected text to the left	text	<p align="left">text <br /></p>
	center justify	Aligns the selected text to the center of the screen.	text	<p align="center">text <br /></p>
	right justify	Aligns the selected text to the right	text	<p align="right">text <br /></p>
	numbered list	Creates a numbered list	line1 line2 line3	<ol><li>line1</li> <li>line2</li> <li>line3</li></ol>
	bulleted list	Creates a bulleted list	line1 line2 line3	<ul><li>line1</li> <li>line2</li> <li>line3</li></ul>
	list passage	Creates a definition list	line1 line2 line3 line4	<dl> <dt>line1</dt> <dd>line2</dd> <dt>line3 </dt> <dd>line4 <br /> </dd></dl>
	decrease quote level	Moves an indented section of text one tab to the left	text
	increase quote level	Indents the selected text by one tab	text	<blockquote>text<br /></blockquote>
	insert image	Inserts an image into your document
	insert internal link	Creates a link to another object within Plone site	text	<a title="filename" href="front-page"> text</a>
	insert external link	Changes a link to an external site	text	<a href="http://...../"> text</a>
	insert anchors	Creates an anchor point for linking between sections of a single page	beginning text text text text text to the top	<h3 class="Subheading"> <a name="beginning"> </a>beginning</h3> text text text text text <a href="#beginning"> to the top</a>
	insert table	Inserts a table	first second third fourth fifth sixth	<table class="plain"> <tbody><tr> <td>first<br /></td> <td>second<br /></td> <td>third </td></tr> <tr> <td> fourth</td> <td>fifth</td> <td>sixth </td></tr> </tbody> </table>
	undo	Undo the last edit
	redo	Redo the last undo action
	switch between visual editor and HTML view
	text heading	Chooses headings
	text headings	Normal	text	<p>text</p>
		Heading	text	<h2 class="Heading">text</h2>
		Subheading	text	<h3 class="Subheading">text</h3>
		Literal	text	<pre>text</pre>text
		Discreet	text	<p class="discreet">text</p>
		Pull-quote	text	<div class="pullquote">text</div>
		Call-out	text	<p class="callout">text</p>
		Page break (print only)		<div class="pageBreak">text</div>
		Clear floats (remove style)		<div class="visualClear">text</div>
		Highlight	text	<span class="visualHighlight">text</span>
	zoom	Zooms the editing window to fill the page
	remove link	Removes an existing link
	remove image	Removes an existing image

In case you Kupu toolbar does not include the necessary icons, learn how to Customize the Kupu Toolbar

Kupu Insert Image Properties

The Kupu editor allows you to insert image files stored in Plone into your document, using the button on the Kupu toolbar:

Clicking this button launches the Insert Image dialog:

The three columns of the dialog display:

• In the first column - a folder navigation list.
• In the second column - an object navigation list, from which you can select your image file.
• In the third column - image preview, and options for alignment, size and captions.
  

In the example above, an image of a rose was selected - rose.png (rather large one, at its original size of 600*450 pixels).

According to the "Image alignment" option you choose, the image will be placed in your page (and the following HTML code will be generated):

• lefthand (<img class="image-left captioned" src="rose.png" alt="rose" />);
• righthand (<img class="image-right captioned" src="rose.png" alt="rose" />);
• inline (<img class="image-inline captioned" src="rose.png" alt="rose" />).

You may also choose the size of the image you need. This is especially convenient when you deal with large images, as there is no need to use Photoshop or other external image editing application to crop or change the size of an image. The "Image size" dropdown list provides a choice between many sizes and formats:

 

• Large (<img src="rose.png/image_large" alt="rose" />);
• Preview (<img src="rose.png/image_preview" alt="rose" />);
• Mini (<img src="rose.png/image_mini" alt="rose" />) - the minimum-size image is formed;
• Thumb (<img src="rose.png/image_thumb" alt="rose" />) - a thumb(inch)-size icon is made out of your image (little bigger than 2,5cm); 
• Tile (<img src="rose.png/image_tile" alt="rose" />) - a tile is made out of your image; 
• Icon (<img src="rose.png/image_icon" alt="rose" />) - an icon is made out of your image; 
• Listing (<img src="rose.png/image_listing" alt="rose" />) - a listing icon is made out of your image;
  

 

Image Captioning

It is possible to put image caption under the image in Kupu 1.4.x version. Caption is taken from image description. Alt text is taken from image title. Alt text and caption update if image is updated.

To enable image captioning go to Site Setup -> Visual Editor. Make sure that you have Link using UIDs and Allow captioned images selected in Kupu Configuration.

 

When you add image to the site, you can put some text into its description that will be displayed as an image caption.

 

Now when we create a page, and insert image into it, check the box Caption:

 

Save this page, and you will see the image followed by its description as the caption all inserted into a frame:

Internal Links

Select a word or phrase, click the internal link icon, and the insert link panel will appear:

You use this panel by clicking on Home or Current folder to begin navigating the Plone web site to find a folder, page, or image to which you wish to make a link. In the example above, a page named "Long-tailed Skippers" has been chosen for the link.  After this panel is closed, a link to the "Long-tailed Skippers" page will be set for the word or phrase selected for the link.

External Links

Select a word or phrase, click the external link icon, and the External link panel will appear:

Type the web address of the external website in the box starting with http://. You can click preview if you need to check the address.  If you paste in the web address, make sure you don't have duplicate http:// at the beginning of the address. Then click ok.  The external link will be set to the word or phrase you selected.

Anchors

Anchors are like position markers within a document, based on headings, subheadings, or another style set within the document. As an example, for a page called "Eastern Tiger Swallowtail," with subheadings entitled "Description," "Habitat," "Behavior," "Conservation Status," and "Literature," an easy set of links to these subheadings (to the positions within the document at those subheadings) can be created using anchors.

First, create the document with the subheadings set within it, and re-type the subheadings at the top of the document:

Then select each of the re-typed subheadings at the top and click the anchor icon to select by subheadings:

A panel will appear for selecting which subheading to which the anchor link should connect:

 

The Link to anchor tab will appear. The left side shows a list of styles that could be set within the document. For this example, the subheadings are used for each section, which is the usual case, so subheadings has been selected. The right side of the panel shows the subheadings that have been set within the document. Here the Description subheading is chosen for the link (for the word Description, typed at the top of the document).

You can be creative with this powerful feature, by weaving such links-to-anchors within narrative text, by setting anchors to other styles within the document, and coming up with clever mixes. This functionality is especially important for large documents.

Tables

Tables are handy for tabular data and lists. To add a table, put your cursor where you want it and click the add table icon.  You'll see the add table panel:

Setting rows and columns is straightforward. If you check the Create Headings box you'll have a place to type column headings for the table.  Table class refers to how you want the table to be styled. You have choices such as these:

Here are examples of these table styles:

plain:
 

Thoroughbred Champions	Quarter Horse Champions
Man O' War	First Down Dash
Secretariat	Dashing Folly
Citation	Special Leader
Kelso	Gold Coast Express
Count Fleet	Easy Jet

 

listing:

Thoroughbred Champions	Quarter Horse Champions
Man O' War	First Down Dash
Secretariat	Dashing Folly
Citation	Special Leader
Kelso	Gold Coast Express
Count Fleet	Easy Jet

 After the table has been created you can click in a cell to show table resizing handles and row and column add/delete icons:

In the table above, the cursor has been placed in the "Special Leader" cell, which activates little square handles around the edges for resizing the entire table.  It also activates add/delete icons for the current cell, the "Special Leader" cell.  Clicking the little x in the circle will delete the entire row or column that contains the current cell. Clicking the little arrowhead icons will add a row above or below, or a column to the left or right of the current cell.

Choose file in the Add new... menu for a folder to upload a file:

You will see the Add File panel:

Click the Browse button to navigate to the file you want to upload from your local computer. Provide a title (you can use the same file name used on your local computer if you want). Provide a description if you want. When you click the save button the file will be uploaded to the folder.

Watch a Plone 2 video on adding a file.

Example file types include PDF files, Word documents, database files, zip files... -- well, practically anything.  Files on a Plone web site are treated as just files and will show up in contents lists for folders, but there won't be any special display of them. They will appear by name in lists and will be available for download if clicked.

There are specialized add-on tools for Plone web sites that search contents of files. If you are interested in this functionality, ask your Plone web site administrator.

Add a link by clicking the menu choice in the Add new... menu for a folder:

You will see the Add Link panel:

Good titles for links are important, because the titles will show up in lists of links, and because there tend to be quite a number of links held in a folder as a set.  Paste the web address in the URL field or type it in. There is no preview feature here, so it is best to paste the web address from a browser window where you are viewing the target for the link.

Watch Plone 2 videos about adding a link for an email address and adding links to external and internal documents.

Use the Add new... menu for a folder to add an event:

From the top, we have the following fields:

• Title - REQUIRED
• Description
• Event location
• Start date and time - REQUIRED
• End date and time - REQUIRED
• Event body text (visual editor panel)
• Attendees
• Event type(s)
• Event URL
• Contact Name
• Contact Email
• Contact Phone
• Change note
  

Note that only three fields, title and start and end date and time, are required.  So, although this is a large input panel, if you are in a hurry, just type in the title and the start and end times and save.  Of course, if you have the other information, you should type it in.

One part of the panel needs a bit more explanation: the event start and end times.  The year, month, day, and other fields are simple pull-down menus.  But for the day, often you can't remember exactly and you need to consult a calendar. There is a handy pop-up calendar that offers an alternate way to select the day.  If you click one of the little calendar icons adjacent to the day pull-down, :

you'll see this pop-up calendar:

Just click the day and it will be set. Fill in the fields for which you have information and save the event, but remember:

IMPORTANT: It will not show on the main web site calendar until it has been published.

Watch a Plone 2 video on adding an event.

Use the Add new... menu for a folder to add a news item:

You will see the Add News Item panel:

The standard fields for title, description, and change note are in the panel, along with a visual editor area for body text and image and image caption fields. You can be as creative as you want in the body text area, and you can use the insert image (upload image) function to add as much illustration as needed. The images you upload for the news item will be added to the folder in which you are adding the news item.

The Image and Image Caption fields are for adding an image to be used as a representative graphic for the news item, for posting in news item listings. The image will be automatically resized and positioned. Use the Body Text to insert an image in the actual body of the News Item.

IMPORTANT: News items will not appear in the main web site news listing or news portlet until they are published.

Watch a Plone 2 video on adding a news item.

Any content item, when clicked by a user with edit rights for the item, will show a set of tabs at the top for setting basic properties:

These basic properties tabs are:

• Default - shows the main data entry panel for the content item
• Categorization - shows a panel for creating and setting categories (keywords) for the item
• Dates - shows the publishing date and expiration date for the item
• Ownership - shows a panel for setting creators, contributors, and any copyright information for the item
• Settings - shows a small panel for setting whether or not the item will appear in navigation menus and if comments are allowed on the item
  

The input fields under these tabs cover basic descriptive information called metadata.  Metadata is sometimes called "data about data." Plone can use this metadata in a multitude of ways.

Here is the Categorization panel, shown for a page content item (would be the same for other content types):

Note: Categories were formerly called keywords in Plone, prior to version 3.0.

The main input field for the panel is for specifying categories. Create them anew, just by typing in words or phrases, one per line, in the New categories box. When you save, the new categories will be created within the system of categories for the web site, and this content item will be filed under them. If you re-edit this item, or edit any other, the new categories will show up as Existing categories.

The Related Items field lets you set links between content items, which will show as links at the bottom, when a content item is viewed. This is useful when you don't want to use explicit categories to connect content.

The Location field is a geographic location, suitable for use with mapping systems, but appropriate to enter, for general record keeping.

The Language choice normally would be allowed to fall to the site default, but on multilingual web sites, different languages could be used in a mix of content.

The Dates panel has fields for the publishing date and the expiration date, effectively start and stop dates for the content if you wish to set them:

The Ownership panel has three free-form fields for listing creators, contributors, and information about copyright or ownership rights to the content:

The Settings panel has fields that may vary a bit from content type to content type, but generally there are input fields controlling whether or not the item appears in navigation, or if there are comments allowed, and other similar controls:

Recommendations

There is no requirement to enter the information specified through these panels, but it is a good idea to do so. For the Ownership panel, providing the data is important for situations where there are several people involved in content creation, especially if there are multiple creators and contributors working in groups.  You don't always need fields such as publishing and expiration dates, language, and copyrights, but these data should be specified when appropriate. A content management system can only be as good as the data completeness allows.

Specifying categories requires attention, but if you are able to get in the habit, and are zealously committed to creating a meaningful set of categories, there is a big return on the investment. The return happens through the use of searching and other facilities in Plone that work off the categorization.  The same holds for setting related items. You'll be able to put your finger on what you need, and you may be able to discover and use relationships within the content.

Restricting types available for adding to a folder is the simplest way to control content creation on a Plone web site. You may want to restrict content types if your site is going to be worked on by several people. In this way you can enforce good practices such as putting just images in the images folder.

First, select the last choice in the Add new... menu called Restrictions...:

There are three choices shown for restricting types in the folder:

The default choice, to use the setting of the parent folder. Having this as the default means that if you create a folder and restrict the types that can be added, any subfolders created in the folder will automatically carry the restrictions. The second choice, to allow the standard types to be added, is a way to reset to the default, unrestricted setting. The last choice allows selection from a list of available types:

Types listed under the Allowed types heading are those available on the web site. The default, as shown, is to allow all types. Allowed types may be toggled on and off for the folder.

Use of Secondary types allows a kind of more detailed control. For example, if it is preferred to store images in one folder, instead of scattering them in different folders on the web site -- a scheme that some people prefer -- an "Images" folder could be created with the allowed type set to the Image content type only. Likewise an "Company Events" folder could be created to hold only the Event content type. If left this way, content creators would be forced (or a single web site owner) to follow this strict scheme. Perhaps some flexibility is desired for images, though. By checking the Image content type under the Secondary types heading for the "Company Events" folder, images could be added if really needed, by using the More... submenu, which would appear when this mechanism is in place.

Some people prefer a heterogeneous mix of content across the web site, with no restrictions. Others prefer a more regimented approach, restricting types in one organizational scheme or another. Plone has the flexibility to accommodate a range of designs.

Many people source photographs taken with a digital camera, but they can also be scanned images, graphical illustrations made with software, and other specialized images.  Let's take a look at the case of a butterfly photo taken with a digital camera. 

Digital photographs taken with modern cameras are usually too big to post directly on a website, so they need to be resized.  A typical web site design may have a width of around 1000 pixels. When a photograph comes off your camera, it may be several thousand pixels wide and tall, and several megabytes in file size.  You need to use software on your computer to resize the image to something less than 1000 x 1000 pixels, often much smaller than that.

The software you use to view or print your digital photos will often have this resizing functionality, or you may have graphics software such as Corel Draw, Adobe Photoshop, Irfanview, or Gimp on your computer.  Resizing an image, sometimes called resampling, is a standard function you should be able to find in your software, often under the Image menu.

How do you know what width, in pixels, to resize your image?  It depends. For a little "head shot" photograph to go in a biography, maybe 200 pixels wide is just right.  For a group photograph, 200 pixels would be too small to allow identification of the people in the photograph, so it may need to be closer to 400 pixels wide. For a scanned map image, perhaps the image width would need to be 1000 pixels for the map detail to be usable.

After saving your resized image, give it a name that indicates the new size (e.g., butteryfly-resized-300px.jpg). The file format is most commonly .jpg (or .jpeg). Other common formats for images include .png and .gif.  Take note of where you save images on your computer so that you can find them when you upload them to your Plone web site.

To summarize:

1. Take your photograph with your camera, or find an existing image you want to use
2. Transfer it to your computer
3. Use image software on your computer to resize your photograph
4. Upload it to your Plone website

Cut/Paste

Moving items from one area to another on a website is a common task.  Often this need arises with placement of content in the wrong folder.  For example, if the author of the following content about Skipper butterflies realizes that a Swallowtail butterfly was mistakenly included -- the Eastern Tiger Swallowtail folder shown below -- the folder can simply be moved with a cut/paste operation:

Note that the Eastern Tiger Swallowtail folder has been checked, and that the cut button is about to be clicked.  After clicking the cut button, the screen will show a new paste button. The Eastern Tiger Swallowtail folder and all of its contents are now in the web site's "memory."  The Eastern Tiger Swallowtail folder does not immediately disappear, however, awaiting the actual paste operation. The paste button is now highlighted to show the cut/paste operation is in progress:

The paste button is now active. The next step is to navigate to the destination folder, in this case the Swallowtails folder:

After clicking the Swallowtails folder, the paste button will continue to show, because the paste operation has not yet been completed:

 And last, clicking the paste button for the destination folder adds the Eastern Tiger Swallowtail folder to its proper place in the Swallowtails folder, and cuts it from the original location, the Skippers folder, and the cut/paste operation is complete:

The paste button remains active, because you would be allowed to continue pasting the folder in other places if you wanted.  This could happen in several situations, including when you need to copy one page, for example, as a kind of template or basis document, into several folders.

Copy/Paste

A copy/paste operation is identical to the cut/paste operation, except that there is no removal of content from the original folder. It works as you would expect it to work.

 Watch a Plone 2 video about performing these operations.

.

Of course, when we edit an item of content, the item already exists. Click the Edit tab for an item and you will see the data entry panel for the item, along with the existing values of the item's data.

For an example of something really simple, where editing looks the same as adding, we can review how to edit a folder.

The Edit panel for a folder simply shows the title and description input areas. Often a description is not provided for a folder, so the only thing changed is the title.  If you do wish to give a description, which is a good idea for distinguishing folders in a list, the description can be text only -- there is no opportunity for setting styling of text, such as bold, italics, or other formatting.  This keeps the descriptions of Plone content items as simple as possible.

Here is the Edit panel for a folder, in this case, one called "Butterflies":

That's it. Change what you want and save, and the content item will be updated in Plone's storage system. You can repeatedly edit content items, just as you can repeatedly edit files on your local computer.  By now you have appreciated that Plone stores discrete content items as separate entities, akin to "files" on a local computer, but you really don't have to think about it that way. Plone is a content management system, where the content comes in the form of numerous discrete content items that may be individually edited. Edit away at your heart's content.

For an example of editing a content item that is a bit different than adding in the first place, we can examine editing an image. Editing an Image can be done by navigating to an individual image and clicking the Edit tab. Clicking the Edit tab for the image, you will see the following Edit Image panel:

Here, an image called "Eastern Tiger Swallowtail Butterfly" is being edited.  You can change the title and description, as usual, in which case you would usually keep the setting to "Keep existing image."  You can also change the image itself by checking the "Replace with new image" choice. Or, clicking the "Delete current image" choice will simply delete the image entirely. 

Notice also the Transform tab at the top, which pertains specifically to images, offering a choice of several image transforms:

So, editing an image is a bit different than adding one in the first place, but not by much.

Editing panels for other content items are also usually just like the panels for adding.

Inline Editing

The normal procedure to edit a content item is to click the Edit tab and use the discrete input fields for the item.  For text fields, such as Title, Description, Body Text, etc., there is a quicker way to edit called inline editing. Inline editing is used when viewing the content item (the View tab is active). For inline editing to be active, a user with rights to edit the item must be logged in.

As the mouse passes over editable text parts of the item, a subtle box will outline the editable text. In the following screen capture, the mouse cursor is not over editable text, so you see the page title and body text as normal:

But when the mouse is moved over the body text, a box highlights the body text as editable:

Clicking within the body text after the inline editing box has appeared will bring up the visual editor:

Change or add text and save, and the normal view is back. This is considerably quicker -- fewer clicks and less intervening wait time -- than clicking the Edit tab and bringing up the entire edit panel for the page.

If the mouse is moved over the title, also editable, an inline editing box appears:

Clicking the title after the box appears will activate a very simple editing field with a Save/Cancel choice:

Change the title and save. The speed benefit of inline editing is really sensed for editing something as simple as a title.

For most content items, if you want to change how it looks, you edit the content directly.  But folders are a different animal. As containers of other items, folders can display their contents in a variety of ways. We'll cover each of the options in this section.

Consider a scenario where a butterfly enthusiast, John Smith, has logged in to his web site to work on the part devoted to Skipper butterflies.  He navigates to the "Skippers" folder by clicking the top tabs of the web site, or the navigation menu, which is on the left in his default Plone web site design. When he clicks the "Skippers" folder, the standard view tab panel, or just "standard view," for the folder is shown:

And, here is summary view:

And, tabular view:

 

And, thumbnail view, which is mainly useful for photographs, but still works for normal content:

Making a photo album is easy. Just add the photographs (images, or image files, the most common being .jpg files) to a folder and set the display view for the folder to thumbnail view.  Thumbnail view will automatically update the display as images are added to the folder, presenting a multi-page division into sets of images, as needed, as the number of images grows.

If you are uploading photographic images from a digital camera or scanner, you will most likely want to resize them on your local computer before uploading them, because they are too large.

Setting an Individual Content Item as the View for a Folder

The basic list view functionality described above for folders fits the normal way we think of folders -- as containers of items -- but Plone adds a nice facility to set the view of a folder to be that of any single item contained within the folder. This takes advantage of the way the navigation system gets automatically wired up in a Plone web site as folders are created (As folders are created and published, they automatically show up in the navigation menu). Consider several scenarios where the custom display setting feature for a folder is very useful:

• Let's say you are setting up a hierarchy of web pages, with customized text on the pages and links to other pages. This is a case where you as the web page designer would like to control what the pages look like, how the links to other pages appear, perhaps as links in a table or as icons in a graphic design.  For a custom web page that will contain links to "sub web pages," you would add the page to a folder and then set the default display view for the folder to be the contained page. The display menu is one of the basic menus available for a folder (Look at any of the screen capture images above). The basic folder views described above will be overridden, and when the folder is clicked in the navigation menu, the web page with the customized links to "sub web pages" will show. This may seem a bit daunting, but people who have created fairly complicated web page hierarchies and menu systems appreciate this functionality, because of the intimate way folders form the navigation system of Plone web sites. A custom web page for a folder can be an elaborate graphical design, or it can be a simple textual description with instructions to use the navigation menu, as the following video illustrates:
  

  Watch a Plone 2 video about setting the page display view.

• For another situation where this functionality is useful, consider a folder as a container of a document that gets updated periodically. There could be twenty versions of the document in the folder, but only one is current.  The display of the folder would have been set to show the view of the first version of the document, when it was first created.  As new documents were uploaded, the display of the folder was reset each time to show the current document, and the defunct documents were kept around for posterity, but set as private, so they won't appear.
• This dual nature of Plone folders, acting as generic containers or as navigation-wired "nodes" in a hierarchy, allows a kind of put-stuff-where-you-need-it approach. As the site is developed, folders get naturally created as work progresses.  Pre-existing files, images, web pages get uploaded or newly created in folders throughout the web site.  By "naturally" here, we mean that storage of content just falls out in the normal course of doing the work, just as you would add and organize files on your personal computer without thinking about it too hard.  Before you know it, you have a large system of folders in a hierarchy, with some folders containing all sorts of files.  Plone web sites get like that too, but this is a good thing -- it is a content management system, after all.  An individual folder might contain all sorts of old pages, supporting data files and documents, original graphics files, etc., but if the display view for the folder is set to a single page amongst the crowd, the other documents will not be seen when the web site is surfed. But they will be there next year when you ask, "Now where did I put the original Adobe Illustrator version of that graphic?," and answer "Oh, yes, it is in the folder along with all the other stuff on that project." This way of doing things -- taking advantage of the storage system aspect of Plone -- is very important when several people share web site folder access and work collaboratively, but it happens even for web sites managed by a single person.
  

These examples illustrate that the flexibility of Plone folders is a central feature in the content management system. 

Next, we move to the Contents tab to see important functions for managing content.

The Contents tab for folders is like "File Manager" or "My Computer" system utilities in Windows and Linux desktops and the "Finder" in Mac OS X, with similar functionality.

Clicking the Contents tab for a folder, such as the "Skippers" folder below, shows the Contents tab panel:

The Contents tab panel is immediately recognized by observing the check boxes beside the items in the contents list.  Click these check boxes to select multiple items for performing copy, cut, rename, delete, or change state operations.

Plone has a clipboard for copy and cut operations.  If you check one or more items, and click cut or copy, a paste button will be added to the row of buttons along the bottom of the panel. If you then click another folder, you'll be able to paste the items there.  For a cut operation, the items will remain in the source folder -- they won't disappear -- until they are pasted somewhere.

Renaming items will show a panel for entering a new name for the short name (or id) of the item, as well as the title.  The distinction between short name and title is one that becomes apparent only when you rename, because Plone automatically creates the short name from the title in most Plone web sites.  But the renaming operation must show you the short name as well as the title, because usually would want to change both, if changing either. Consider the following example:

If you were to change the title to "Long-tailed Skippers," you would also change the short name to "long-tailed-skippers." This keeps things tidy -- it keeps them correct, so that the URL for the item, the web address, is kept up-to-date with the actual content item. Note that the short name should contain no blanks. Use dashes for any blanks in the title, and otherwise make it a carbon copy of the title. Also, use lowercase for the short name. See also the page "What's in a Web Name?" for a description of how Plone handles web addressing and the short name. The following video also includes in illustration of renaming:

Watch a Plone 2 video that includes renaming an item.

The delete operation is straightforward. Click to select one or more items, and then the delete button, and the items will be deleted.

The change state operation offers a great way to change the publication state of a selection of folders, and their subfolders if you select this option. In the following example, the publication state for a folder called "Long-tailed Skippers" is being modified. Checking the "Include Folder Items" will make the state change affect all contained content.  Don't forget that you can do this to, say, three folders at a time, and all of their subfolders and contained content, so that in one fell swoop you can quickly publish, unpublish, etc.

Shift-clicking to select a range of items works. This could be very handy for a folder with more than a dozen items or so, and would be indispensable for folders with hundreds of items.

In addition to these individual action operations, reordering is a natural mouse-driven manipulation, as described in the next section. 

Consider the following folder, called "Skippers," for holding information about this type of butterfly.  Often, when we add content items, we don't initially get them in the order we want.  The desired ordering is not always alphabetical, but in this example we can assume so. Below you see the Skipper butterfly subfolders are not in alphabetical order:

To move the top item named "Spread-winged Skippers" to the bottom of the list, one would click within the Order column on the right (containing the "double-colon" symbols) and drag the row to the desired position:

Dragging and dropping is do