Add Images

BrownSites 2.0 offers the ability to insert images inline; that is, they can be included on your page wherever you want via the WYSIWYG editor.

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 the place in the Body where you want the image to be placed. 
  2. Place your cursor directly to the left of the first character of the text line you want the image to line up with, called the insertion point (usually the first word of a paragraph or heading).
  3. In the WYSIWYG editor, click the "Add media" icon. 
     
  4. Make sure that the Upload tab is selected, and browse to select the file.
  5. Click Submit.
  6. Insert the description:This is the alternate text that will display if the image is not available or when using text-to-speech readers.
     
  7. Pick the format (size). You will be able to alter the size after it has been inserted.
  8. Click Submit to insert your image. Click Cancel if you no longer want to insert the image.
     
  9. Save the Page you added the image to.

To insert an image already used on your site:

  1. Once you are in create/edit mode locate the place in the Body where you want the image to be placed.  
  2. Place your cursor directly to the left of the first character of the text line you want the image to line up with, called the insertion point (usually the first word of a paragraph or heading).
  3. In the WYSIWYG editor, click the "Add media" icon. 
  4. Select the "Library" tab within the dialog pop-up.
     
  5. Click on the image you'd like to insert.
  6. Click "Submit." This will take you directly to the Embedding panel.
  7. Select a format (size). You will be able to resize the image after you have inserted it.
  8. Insert the description: This is the alternate text that a user will see if the image is no available.
     
  9. Click Submit to insert your image. Click Cancel if you no longer want to insert the image.
     
  10. Save the Page you added the image to.

Image Alignment:

  1. Once you have inserted your image into the Body field, you can adjust the image's alignment.
  2. Select the image with your cursor.
  3. Locate the "Styles" drop-down menu in the WYSIWYG editor.
     
  4.  With your image selected, the first two menu options will be "Image on Right" and "Image on Left":

     
  5. Here you can select whether you want to align your image to the right or left of the Body content.
  6. Be sure to Save the page after you make changes so you don't loose any of your work.

To edit image properties:

Once you have inserted your image into the Body field, you can adjust the image's properties by accessing the "Image Properties" panel.

Image properties include:

  • Exact size
  • Link
  • Border
  1. Double-click on your image. The Image Properties window will pop up.
  2. The first tab is for the Image Info:

    ## The image URL is available to be used as you would like.
    1. Alternative text for your image can be edited from this page.
    2. The width and height of the image can be specified, as well as the border weight (in pixels), the H and Vspace and the right or left alignment.
    3. The Preview window allows you to see the image as it would appear with you immediate changes but without applying it to your actual site. 
  3. The second tab is for Link settings:

    1. Using the URL text box on this tab, you can set your image as a link to other pages within your site or other pages on the internet.
    2. Using the Target specification, you can designate exactly how the link will open when other visitors to your site select the link.
  4. The third tab is for Advanced settings.
  5. Click "OK" to complete your changes.
  6. Be sure to Save the page after you make changes so you don't loose any of your work.

Comments (0)


Brown Community members, log in to submit a comment.

Top