New content items are adding via the Add New . . . drop-down menu:

Adding content in Plone is done placefully, which is to say that you must navigate to the section of your Plone website that you wish the new content to reside before you use the Add New . . . drop-down menu. You can of course cut, copy, and paste content items from one section to another if necessary.

Content Types

In Plone, you can use a number of Content Types to post certain kinds of content. For example, to upload an image you must use the Image content type. Below is a list of the available content types in order of their appearance, and what each are used for:

Collection

Collections are used to group and display content based on a set of criteria which you can set. Collections work much like a query does in a database.

Event

An Event is a special page-like content type specifically for posting information about an event (such as a fundraiser, barbecue, etc).  This content type has a function which allows the site visitor to add the event to their desktop calendar with either the iCal or vCal standard. This includes applications such as: Google Calendar, Outlook, Sunbird and others.
To add a single event to your calendar, click on the vCal or iCal links next to the "Add event to calendar" text in the main view of the event item.

From Plone 3.3 on you can also get all the events in a folder in one go (currently only available in iCal format). To download the iCal file, append @@ics_view to the end of the URL of the folder that contains the events. For example, if you want to get all the events into the events folder in the root of your site, go to http://yourdomain.tld/events/@@ics_view. There are plans to provide a link to this iCal calendar inside the UI in a future release.

File

A File in Plone is any binary file you wish to upload with the intent that it can be downloaded by your site visitors. Common examples are PDFs, Word Documents, and spreadsheets.

Folder

Folders work in Plone much like they do on your computer. You can use folders to organize your content, and to give your Plone website a navigation structure.

Image

The Image content type is used for uploading image files (JPG, GIF, PNG) so that you can insert them into pages or other page-like content types.

Link

Also referred to as the 'Link Object'; do not confuse this with the links you create via Kupu, Plone's visual page editor. The Link content type is often used to include a link to an external website in Navigation and other specialized uses.

News Item

This content type is similar to Event, only News Item is specifically for posting news. You can also attach a thumbnail image to a News Item, which then appears in folder summary views next to the summary of the News Item.

Page

A Page in Plone is one of the most simple content types available. Use Pages to write the bulk of your web pages on your Plone website.

Note: Depending on what add-on products you have installed, you may see more options in your Add New . . . drop-down menu than appear here. For information about those additional content types, refer to the Product documentation for the add-on in question.

Title

Nearly all content types in Plone have two fields in common: Title and Description.

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. 

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.

The fields will vary according to the content type. For instance, the Link content type has the URL field. The File content type has the File field, and so on.

Description

The Description appears at the top of pages, just under the Title. Descriptions are often used to conjunction with a variety of Folder and Collection views (such as Standard and Summary). The Description also appears in search results via Plone's native search engine.

You have undoubtedly created folders (directories) on your computer's hard drive.  Personal computers use a hierarchy of folders to structure and organize the programs and files on the hard drive. In Plone folders are essentially used the same way, 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... drop-down menu. Select Folder from the menu:

You should now see the Add Folder screen:

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,
• 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.

People are naturally comfortable with the WYSIWYG approach of typical word processors. We will describe this here. Your site-administrator may also enable so-called markup languages for your site.

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

Description of the toolbars and icons in Kupu 1.4.x

Note: Kupu is an embedded piece of software Plone uses for its default visual editor -- you won't see the name Kupu anywhere when editing though.

A typical Kupu toolbar looks like this:

The text format is normally left with the HTML setting, but some sites offer structured text or other markup languages for editing pages.

The icons are:

• bold,
  
• italics,
  
• left align,
  
• center,
  
• right align,
  
• numbered list,
  
• bulleted list,
  
• dictionary list,
  
• tab left (block),
  
• tab right (block),
  
• image (the "tree" icon),
  
• internal link (the "chain link" icon; make a link to another page in the given site),
  
• external link (the "world" icon; make a link to a web page elsewhere),
  
• anchor (the "anchor" icon; make a link to a specific section of a web page),
  
• table (add a table with rows and columns),
  
• direct HTML editing (the "HTML" icon; if you know HTML, edit the HTML for the page directly), and a
  
• pulldown menu for text styling.
  

Images

Place your cursor within the text of a page, then click the "tree" icon. This panel will pop up:

Click "Current folder" in the left side of the panel, if it isn't already highlighted. The current folder is the folder that contains the page you are editing -- all pages are contained inside some folder. There are many ways to manage storage of images, including having one central images folder, but a common method is to store images that show on a page in the folder that contains the page (the current folder). In this method, pages and the images associated with them are stored together within the folder structure. If you click the Upload button, you will be prompted to select an image on your computer and upload it. After selecting an image to upload, the right panel will let you give the image a title for use on the web site, and several image placement and sizing options. Clicking OK will upload the image and place it on the page.

The same panel will appear if you click an image on page to select it, then click the same "tree" icon for editing the image options or for changing the image.

You are responsible for sizing and editing images on your computer before you upload them, but one easy way to handle images for use on most web pages is to make a copy of an image on your computer, then resize it to something like 1000 pixels in largest dimension. This is a reasonable size for uploading -- there is no need to upload your gargantuan images coming from your digital camera. Plone will automatically create several sizes of an uploaded image, including "large," "mini," and other sizes. You pick the size you want to use when your upload or edit the image with the "tree" icon. You can also override the image size choice by editing the HTML.

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:

listing:

 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.

Text Styling

The text style setting is made with a pulldown menu. Here are the choices:

text

As with normal word-processing editing, select a word, phrase, or paragraph with your mouse, then choose one of the style choices from the pulldown menu and you will see the change immediately.

Saving

Click the Save button at the very bottom and your changes will be committed for the page.

-----------

Footnotes

Markup languages

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 fluidity of expression.

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 to be sure you have the address correct.

The Link Object in Use

A link object will behave in the following ways, depending on your login status, or permissions.

• If you have the ability to edit the link object, when you click on the link object you'll be taken to the object itself so that you can edit it (otherwise you'd be taken to the link's target and could never get to the edit tab!)
• If you don't have the ability to edit the link object, when you click on the link object you'll be taken to the target of the link object. Likewise, if you enter the web address of the link object directly in your browser, you'll be taken directly to the link's target. The link object in this case acts as a redirect.
  

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