shadow_tr

Contributors > Add Images

This guide covers adding and editing images within a formatted text element. 

There are two ways to add an image in a text block:
    •    Click the ‘Insert Image’ button for an image without a caption.
    •    Click the ‘Insert Snippet’ button for an image with a caption.

 

Insert Image

    1.    Open the text block element.
    2.    Place the cursor to the desired point of insertion and click the ‘Insert Image’ button in the toolbar.
    3.    From the pop-up window, click the ‘Choose’ button to add an image that previously has been uploaded, or ‘New’ to upload an image from your computer.

add_image

Gallery
To use an image from the gallery, click on the 'Choose' button and the image gallery search page will open.


New Image
Be sure your image is optimized for the Web (72 dpi)  and in RGB Color Mode before you get started. We suggest jpeg files, otherwise gifs or pngs should also work. Name the file using lowercase letters, e.g., mytulaneimage.jpg. It is better to also pre-size it, though you can resize the image in the CMS also. There is no need for any uploaded picture to be wider than 850 pixels.
    •    72 dpi
    •    RGB Color Mode
    •    jpeg file
    •    not wider than 850 pixels
    •    named in all lowercase
    1.    To upload a new image, in the image window click the ‘New’ button.
    2.    Another window will appear.  Click ‘Browse’ and locate the file on your computer and click ‘Open.’
    3.    Next:
    4.    Rewrite the description (alt text, for disability purposes),
DO NOT leave the default folder address string.
    5.    Choose the category
    7.    Add relevant keywords to help future searches.
    8.    Check the box to ‘Include in the Public Image Gallery’
    9.    Click ‘OK.’
    10.    This will bring you back to the original image window.  Clicking ‘OK’ will insert the image where your cursor was set. That is the most basic way to insert an image.  To see some other options, read on. 



Floating an image to the right or left:



Select "float_left" or “float_right” from the styles menu to align the image and to apply margins around the 3 sides of the image. The text will wrap around it.

To hyperlink an image:

While you are in the image properties window, click the ‘Edit’ button to the right of the ‘Link’ section. Then follow the guide to Create Links.
Finish inserting the image by clicking ‘OK.’



Inserting an Image with a Caption

VIA SNIPPET


This will give you an image holder and an additional light green shaded box for a text caption (which you can delete).
    1.    To insert an image with a caption, click on the ‘Insert Snippet’ button in the toolbar.
    2.    Choose the image caption html snippet:
    •    photo caption (mini) – 110 pixels wide
    •    photo caption (narrow) – 220 pixels wide
    •    photo caption (variable) – no standard width. It will adjust to whatever photo width you insert. If you alter the photo width, it might not show immediately in the editable text block, but will appear resized when you click the ‘Finish’ button.
Force line breaks. You will have to force breaks between lines to control the width of the photo caption. Place the cursor where you want the line to end. While holding the ‘Shift’ key on your keyboard, hit the “Enter” (PC) or “Return” (Mac) key. Repeat this for all line breaks you need.
    •    photo caption (wide) – 330 pixels wide
    •    photo caption (wider) – 440 pixels wide, recommended for pages without sidebars.
    1.    Highlight [Insert image here, delete this text] and click the ‘Insert Image’ button on the toolbar to insert an image.
    2.    Next type in your caption over the text [Caption text goes here] and you're done.

Citation information:

Page accessed: Thursday, September 18, 2014
Page URL: http://tulane.edu/news/webpublishing/cms/contributors/addimages.cfm

Tulane University, New Orleans, LA 70118 504-865-5000 website@tulane.edu