Personal tools
You are here: Home Documentation Manuals Plone 3.0 User Manual Adding Content Adding Pages
Support

Get Help

Join our chat rooms or support forums if you have more specific questions.

Plone Training
Learn how to design, build, and deploy a website in Plone through one of the numerous Plone training sessions around the world.
Find Plone training…
 
Document Actions

2.4. Adding Pages

Up one level
Pages in Plone vary greatly, but are single "web pages," of one sort or another.

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:

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.

lights-camera-action.png 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

Description of the toolbars and icons in Kupu 1.4.x

A typical Kupu toolbar looks like this:

toolbar

 

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

Icon Function Description Example Example resultant HTML code
save save
Saves changes

bold bold Bolds selected text text <strong>text</strong>
italicize italicize Italicizes selected text text <em>text</em>
subscript subscript Transforms selected text to subscript textscript text<sub>script</sub>
superscript superscript Transforms selected text to superscript textscript text<sup>script</sup>
text-color text color Colors selected text

background-color background color Color background of the selected text

left left justify Aligns the selected text to the left text <p align="left">text
<br /></p>
center center justify Aligns the selected text to the center of the screen. text <p align="center">text
<br /></p>
right right justify Aligns the selected text to the right text <p align="right">text
<br /></p>
numberedlist numbered list Creates a numbered list
  1. line1
  2. line2
  3. line3
<ol><li>line1</li>
<li>line2</li>
<li>line3</li></ol>
butteledlist bulleted list Creates a bulleted list
  • line1
  • line2
  • line3
<ul><li>line1</li>
<li>line2</li>
<li>line3</li></ul>
list passage 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>
outdent decrease quote level Moves an indented section of text one tab to the left text
indent increase quote level Indents the selected text by one tab text <blockquote>text<br /></blockquote>
insert image insert image Inserts an image into your document

internal-link insert internal link Creates a link to another object within Plone site text <a title="filename" href="front-page">
text</a>
external link insert external link Changes a link to an external site text <a href="http://...../">
text</a>
insert anchors 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 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 Undo the last edit

redo redo Redo the last undo action

html switch between visual editor and HTML view


text heading text heading Chooses headings

text heading-all 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 zoom Zooms the editing window to fill the page

remove link remove link Removes an existing link

remove-image 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

A description of the options available for inserting images with Kupu.

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

toolbar-image

Clicking this button launches the Insert Image dialog:

insert-image-settings
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:

image-size 
  • 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.

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.

rose-desc

 

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

add-image

 

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

example

 


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.
by Jeff Pittman last modified August 21, 2008 - 00:07
Contributors: JoAnna Springsteen, Martin Aspeli, Jon Baldivieso, Andrew Burkhalter, Sam Knox, Jon Stahl, Jeff Pittman, Esther Schindler, Rob Stevenson, Darci Hanning
All content is copyright Plone Foundation and the individual contributors.

For any issues with the web site functionality, please file a ticket.

Please consult the policy on plone.org content if you want your content published on this site.

Servers and hosting by