Topics Map > University of Chicago > IT Services > Services & Support > Web Development/Hosting/Resources > UChicago Sites

UChicago Sites - Content - Adding Images to Pages and Blocks

This article explains how to add images to a page or block on your UChicago Site. Watch the related video with step-by-step instructions for inserting images using the Insert button.

You can add images to a page on your site in a couple of different ways. If you are comfortable with cropping and sizing your images before adding them to your site, you can use the file browser to upload and insert a prepared image. Otherwise, you can use the image Insert button to place an image and have it sized for you automatically.

 Insert Images Using the File Browser

You can insert images using the file browser in any textarea where the full editor is available. That includes basic pages, news articles, blocks, image gallery descriptions, etc.
  1. Place your cursor in the area where you want to insert your image.

    Place your cursor in the area where you want to insert your image.
Place your cursor where you want to insert the image

  2. Click the file browser button in your editor's toolbar.

    Click the image icon in the toolbar

  3. Select an existing file to insert, or upload a new file

    Click upload to add an image

  4. If you clicked the upload button, click the Choose File button to find the image you would like to upload from your computer, select the image and then click the Upload button.

    Click choose file, select your image, and then click upload

  5. Once you have uploaded an image or selected an existing image, you can resize it by clicking on the Resize button. If you enter one new dimension, and then click or tab away from that text field, the other dimension will be automatically calculated such that the aspect ratio of the image is preserved.

    Click resize to size your image

  6. Click Insert File and your image will be inserted into your textarea.
  7. To align the image such that your text wraps around the image, click on your image and then select the appropriate alignment option from the Style dropdown.

    Select an alignment option from the styles dropdown

    AFTER:

    The image is aligned after selecting a style

  8. To switch between left and right alignment styles, you will need to select your image and click the Clear formatting button before selecting a new style.

    Click clear formatting between selecting styles


 Insert Images using the Insert Button

On any basic page or news article, you can insert images using the Insert button. This process will automatically resize your images for you to one of four preset sizes, while preserving the aspect ratio of the original image.
  1. Place your cursor in the area where you want to insert your image.

    Place your cursor where you want to insert the image

  2. Scroll down to the Main Content Images field and click to expand it. Click the Choose File button to select an image from your computer. You can also click on the File browser link to select an image which has already been uploaded to your site.

    Click choose file to select an image

  3. If you are uploading a new image, select the file from your computer and click the Upload button. If you are using the file browser, select an image, and then click the Insert file button in the file browser toolbar.
  4. You should now see a thumbnail preview of your image. Enter alternate text and a title for the image, and then select an option from the Style dropdown.

    Select a style before inserting

     and then click the Insert button to place the image in your page.

    Click insert to place the image

    The options in the Style dropdown correspond to the following pixel dimensions:

    • extra-narrow - 75 pixels
    • narrow - 150 pixels
    • wide - 452 pixels
    • extra-wide - 570 pixels
  5. By default, your image will be aligned to the left with text flowing around it. In certain browsers (e.g. Chrome), you may need to delete an extra line break after your image inserted.


See Also:




Keywords:template uchicago site website drupal images   Doc ID:29548
Owner:Nana O.Group:University of Chicago
Created:2013-04-18 07:47 CDTUpdated:2016-12-28 08:54 CDT
Sites:University of Chicago, University of Chicago - Sandbox
Feedback:  0   0