Add a New Image

BrownSites offers the ability to insert images inline; that is, they can be included on your page wherever you want via the WYSIWYG editor (the toolbar with small icons above the Body content box).

You can add several pictures in different places on your page by repeating this process.

To Insert A New Image:

    1. Once you are in create/edit mode, locate where in the Body you wish to place the image.
    2. Place your cursor directly at the beginning of the text line you want the image to line up with, called the insertion point (usually before the first word of a paragraph or heading).
    3. In the WYSIWYG editor, click the camera icon.  This will open up the Add Image dialog pop-up.
    4. Under the New Image tab, click "Choose File" to select the image you wish to upload. Click "Upload Image."

    1. You are required to create a Title. Note: This is the title of the page devoted solely to that image, not the title or caption of the image as it will appear on the page you are editing.
    2. Once you have selected an image and entered a title, scroll down in the Add Image dialog pop-up and click Save.

  1. You will now select the Properties for the instance of the image that will be displayed in the page you are editing.
  2. If you want a Title and/or a Description (caption) to display beneath your image, you can enter it here. It does not have to match the image title you gave it when you created the original image. Whenever an image is incorporated into your site, a page devoted to that image is created. This devoted page does not need to be linked, as users will not likely come across it, depending upon the settings you choose. Understanding that a new page is created is key to understanding the process of inserting an image, especially as it applies to image titles and captions.
  3. Select a size:
    Original = resized to a maximum width of 510 pixels.
    Thumbnail = 100 x 100 pixels; the shortest side is resized to 100 pixels and the longer side is cropped to retain the center portion of the image.
    Preview = resized to a maximum width of 195 pixels.
  4. Select an Alignment:
    Left aligns the image on the left of the content, with the top of the image aligned with the top of the text line selected as the insertion point. Text will wrap around the image.
    Right aligns the image on the right of the content, with the top of the image aligned with the top of the text line selected as the insertion point. Text will wrap around the image.
    None aligns the image on the left of the content on a line of its own. Text after the insertion point will appear below the image.
    Center aligns the image in the center of the body.
  5. Select a Link option, which controls what happens when a visitor clicks on the image:
    Link to image page = links to the Page created specifically for the image.
    Open in pop-up window = displays the image in a pop-up window sized as Original (as noted above)
    Go to URL = allows you to enter a web address of a page or document, using the image as a link.
  6. Set Insert Mode = Filter Tag.
  7. Click Insert.
  8. Save the page.

Comments (0)


Brown Community members, log in to submit a comment.

Top