LearnPress Publication Guide » Publishing how-to

1.7 Page comments

LearnPress version: 1.5

Last modified: 1 October 2008

Page comments permit an author to write commentary on particular passages of text and areas of an image. This page explains how to create comments on text and images and outlines requirements for enabling Javascript comments.

About page comments

Page comments permit an author to write commentary on particular passages of text in a page or on areas of an image embedded as a media object.

If the template in which the page displays includes the necessary Javascript and CSS (see below), the passage or image area to which the comment refers will be highlighted, and when the user mouses over the passage or area, the comment will appear. If the template does not permit Javascript comments (or the user has disabled Javascript in the browser), the comment will appear in the sidebar, and the commented passage will appear as an ordinary link to the comment within the page.

Requirements for Javascript comments

Use of Javascript comments in a template requires the following standard script files:

• events.js
• comments.js

The function makeCommentLinks() must be run onload.

In addition, CSS should be provided for the following elements and classes:

• a.comment
• dl.popup
• dd.popup
• dd.popup p.return

See screen.css for an example.

Templates enabling Javascript comments

The book template and its derivatives as well as the primary website template (/lp/library/) enable Javascript comments.

Creating comments on text

Comments may be inserted only in the body text of a page.

To create a comment,

1. Click create new comment in the comments section of the page form.
2. Type the text of the comment in the field provided, and save the comment.
3. In the comments section of the page form you will now see the text of the comment, along with an input field labeled Reference. The comment reference is an <a> tag; paste this tag at the beginning of the text (in the body text) to which the comment refers, and type the closing tag (</a>) at the end of the text to which the comment refers.
4. Save the page.

Creating comments on images

A comment may refer to an area of an image only if the image is embedded in the body text using the obj pseudo-element.

To comment on an image, follow the procedure for text, with the following adaptations:

1. In the <obj%gt; tag, include the attribute comments="true". (This will cause a standardized note to display in the caption alerting the user to the comments.)
2. Wrap the <obj%gt; in a <div class="mapped-image">. (The div may have other classes as well, e.g. <div class="figure mapped-image">)
3. In the comment form, click the image on which you wish to comment.
4. A new window will appear, with the image exactly as it is embedded in the page. Click and drag with the mouse draw a rectangle on the image. The coordinates will be saved to a field that, though visible, cannot be edited. When you are happy with the area you have selected, click save coordinates.
5. Write and save the comment as usual.
6. The comment reference will include the coordinates and styling information for the selected area of the image. When you paste the reference into the body text, paste it after the obj psuedo-element but inside the div. Additionally, you must place some text inside the a element — a word or two to serve as a brief title for your comment. This text will display on the public page only if the comment cannot be displayed using Javascript.