Experience Notes
Website Toolkit
Project websites
Workshops
IW Jobs
E-BulletinDocument Actions
The Parts of the Page, Editing with Kupu and Inserting Images
Learning how to edit with Kupu.
The Parts of the Page
Plone divides a normal web page into a few discrete chunks we call "fields".
When you arrive at the page you wish to edit, you'll notice that it has a thin border enclosing it with tabs along the top. You'll notice that View is selected, which makes sense; you're viewing the page as it normally appears. The parts of the page that you have access to are the ones enclosed by the green border.
Click on the edit to actually access the content. The fields appear here with some explanations. Here is some context for the four different fields:
Short name: This is only used in the page's URL. By making it entirely lowercase, you will avoid confusion when dictating the URL to someone, since Plone is case sensitive. Avoid creating garbled URLs by not using spaces, uppercase letters, or punctuation in your short name. Sometimes you'll see short name called "id"; they're exactly the same.
Description: This is a short lead-in to the document -- usually the introductory paragraph to the page. It appears after the headline of the page but before the body text. While this field is optional, we strongly encourage you to use it. It also appears in search result listings to provide additional context, and as a pop-up when you hold your mouse over the left navigation.
Body Text: This is the main part of the page, and the part that allows you to use the selection of formating buttons that is the subject of the next page.
Click on the edit to actually access the content. The fields appear here with some explanations. Here is some context for the four different fields:
Short name: This is only used in the page's URL. By making it entirely lowercase, you will avoid confusion when dictating the URL to someone, since Plone is case sensitive. Avoid creating garbled URLs by not using spaces, uppercase letters, or punctuation in your short name. Sometimes you'll see short name called "id"; they're exactly the same.
The red square that appears to the right of the Title label indicates that it is required; Plone will protest if you leave it blank.
Title: This appears in the title bar of the browser window, as the headline of the page, in the navigation; basically any time a page is referred to, the title is used. This field is required; it should be descriptive and not too long.
Description: This is a short lead-in to the document -- usually the introductory paragraph to the page. It appears after the headline of the page but before the body text. While this field is optional, we strongly encourage you to use it. It also appears in search result listings to provide additional context, and as a pop-up when you hold your mouse over the left navigation.
Body Text: This is the main part of the page, and the part that allows you to use the selection of formating buttons that is the subject of the next page.
An extensive toolbar appears above the editing area of the body text.
Many of the functions it performs are self-evident, but a few are not. Some you will use every day, and others far less often. A brief description of a tool's function appears if you hover your mouse arrow over the button. Here is quick synopsis of the editing buttons, in the order that they appear.
| The style menu. Allows you to choose a paragraph formatting style for your text. The choices in this box will likely be customized for your website's design template. However, in a default Plone setup, "Normal" is used for body text, "Heading" is used for major headlines, "Subheading" for secondary headlines, and "Formatted" is generally not used. Please note that these formatting styles apply to entire paragraphs, not to shorter spans of text. |
|
| These buttons toggle whether the highlighted text is bolded, italicized, underlined, superscripted or subscipted. Basically similar to the formatting commands in a word processor. |
|
| Text alignment(left, center, right justified). These settings apply to an entire paragraph. Again, similar to your word processor. |
|
| Ordered and bulleted lists. We encourage you to use these instead of trying to manually insert numbers or bullets. To stop adding items to a list, delete the last bullet/number or hit enter twice. |
|
| Increase/decrease indent. Best used for excerpted text. | |
| Toggle full-screen mode, which expands the editor to fill your entire screen. Can be handy for working on larger pages. |
|
Insert a definition list, which is a way of formatting lists. A definition list has alternating lines that are boldfaced and indented, and looks like this:
|
|
| Insert an image. This button will open up a "drawer" which will allow you to browse the contents of your site to find the image you want, or upload a new image. |
|
| Insert a link to another page in your site. (An "internal link.") |
|
| Insert a link to a page outside of your site. (An "external link.") |
|
| Insert a table. Tables are a little hard to format using this tool (the interface is not very intuitive), although sometimes it is adequate. | |
| Undo and redo edits done before the last time you saved. These buttons work with varying levels of success. | |
| View the HTML code of the page. This can be useful if you need to make some more technical adjustments to the code. Knowledge of HTML is required. |
Inserting Images and Internal Links with Kupu
Kupu's "drawer" allows you to insert and upload images, and to insert hyperlinks to other pages in your site. Here's how to use it.
Inserting and uploading images
To insert or upload an image, click on the image button in the Kupu toolbar. It looks like this:
This will open Kupu's "image drawer," which looks like this:
This will open Kupu's "image drawer," which looks like this:
This screen, which is similar to the Windows Explorer or the Macintosh Finder, will allow you navigate through your website.
Click Home, then Images to get to your site's Images folder. (Or go to another location where the images are stored.) You'll see a listing of available images in the folder.
Click Home, then Images to get to your site's Images folder. (Or go to another location where the images are stored.) You'll see a listing of available images in the folder.
To insert an image, click it, and you'll see the folllowing options in the right-hand panel:
You can "float" images to the left or right by choosing the "Left" or "Right" radio buttons. "Inline" images will simply be inserted into the middle of the text, which will break above and below the image.
"ALT-text" is the text that will be shown to folks whose web browsers can't display images. In most web browsers, the ALT-text will also appear when a person hovers the mouse over the image. It's good to put some sort of brief descriptive text here.
To upload an image, click the Upload... button and the right-hand panel will show an image upload dialog box:
Browse your hard drive to find the image file. Give it a title if you like and hit OK. (If you don't enter a title, the filename will be used as a title.)
Tips for uploading images:
- Make sure your images are "web-ready" -- that is, cropped to the appropriate size and saved as JPEGs (photos) or GIFs (graphics). Plone can't resize images. See Creating Web Ready Images for more detail on how to do this.
- Make sure your images have "web-friendly" names -- no spaces! For example, "kupu-screenshot.jpg" rather than "kupu screenshot.jpg"
Inserting Links
Kupu uses a very similar "drawer" to insert links to other pages in your site. Select the text you want to hyperlink, then click the button to insert an "internal" link. It will open a drawer that looks like this:
From this screen, you can navigate around your site. When you find a page that you want to insert a link to, highlight it and click OK.
