Adding Pictures to a Story
After adding a picture to your site, you may notice an instruction added to the bottom of each preview page. It says: To include this picture in a page, type “pictureName”, including the quotes. To add a picture to any page, simply edit the page you want the picture to appear on, then type the name of the picture in quotes where you want it to appear on the page. After you click the button, the picture will appear where you typed its name in quotes.
Special Effects with Pictures
If you want more control over the placement of picture, you can use the PictureRef Macro. The PictureRef macro gives you optional parameters allowing you to specify the alignment, change the height and width, set the size of the border, etc.
Examples:
Fig. A - To right-align a picture type: {pictureRef (“MyPicture”, align:”right”)}
Fig. B - To left-align and add a 2 pixel border to a picture type: {pictureRef (“MyPicture”, align:”left”, border:”2”)}
Tip: Make sure you replace “MyPicture” with the name of the image you want to include.
Full Parameter List
{pictureRef (shortcutName, explanation, hspace, align, usemap, ismap, border, glossref, vspace, lowsrc, rollsrc, height, width, name, id, style, class, title)}
- Explanation is the alt text.
- hspace is the amount of horizontal space, in pixels, around the picture.
- usemap is the name of a client-side image map to use.
- ismap, if true, means the image is a clickable image map.
- border is 0 if you don't set it. It's the amount of border around the picture if the image is enclosed in a link.
- glossref is the shortcut name of a page to link this picture to.
- vspace is the amount of vertical space, in pixels, around the picture.
- lowsrc is the shortcut name of a picture to use as the low resolution version of the picture, which in some browsers loads before the picture loads.
- rollsrc is the shortcut name of a picture to display when the mouse hovers over the picture. (In other words, specify a name here when you want the picture to be a roll-over.)
- height is the height in pixels of the picture. If you don't specify the height, the actual height of the picture will be used.
- width is the width in pixels of the picture. If you don't specify the width, the actual width of the picture will be used.
- name sets a name attribute, which can be useful when a JavaScript script needs to refer to the picture by name.
- id sets an id attribute, which is also useful in scripting.
- style sets an in-line CSS style attribute.
- class specifies the CSS class name for the picture.
- title sets the title attribute of the picture.
This is a Manila site.