You are here

Images

All images should be sized and saved for web before uploading into Drupal. Uploaded images should NOT exceed 1MB. 

Image Dimensions: Max 845 pixels wide. 
Resolution: 72 dpi. Use Save for Web.
Recommended Headshot size: 200 x 200 pixels

Recommended image resizing and editing tools:

How to upload an image:

Acceptable file formats for images: .jpg, .jpeg, .png
Note: .doc or .docx files are not recommended unless they are in a protective format. Please convert all .docx or .doc files into PDFs

  1. Navigate to the page where you would like to place the image or document.
  2. Select the Edit Tab
  3. Under File Attachments, select Choose File. It should open up your desktop navigator.
  4. Before submitting the image or document, please rename the file to something meaningful. No spaces, special characters, avoid capital letters. Dashes and underscores are acceptable.
    Bad: 23597762-3696093%578.jpg, This is my image.jpg, This%is%my$image.jpg
    Good: trinity-tower.jpg, trinity_tower.jpg
  5. Select Upload

How to insert an image into the content area

  1. Make sure you've uploaded the image/document using File Attachments.
  2.  Scroll up to the body area and place your cursor where you would like the image to be inserted.
  3. Scroll back down to File Attachments and select Insert.
  4. Save the page.

Image Properties Settings - Settings that are overridden by Trinity styles

The following images display settings that you do not need to edit while styling your image. All of the marked fields are taken care of by the global Trinity stylesheets for the website.

width, height, border, hspace, vspace, alignmentID, language direction, language code, long description URL, style 

Adding Alt Tags - When to use

Every time you upload an image, be sure to include an alt tag. If the image is in place for purpose (i.e. a person, place, or thing) use an alt tag. If the image is there for purely design reasons, then an alt tag is not needed.

All images uploaded and inserted onto a webpage must include alternative text for Level A web accessibility compliance.

  1. Upload and insert the image using File Attachments
  2. Double-click the image in the WYSIWYG
  3. Add the alt description in the Alternative Text field.
  4. Select Ok.
  5. Save the page.

How to float an image left or right:

  1. Upload and insert the image using File Attachments
  2. Double-click the image in the WYSIWYG
  3. Under Advanced, type left or right under Stylesheet Classes (case sensitive)
  4. Select Ok.
  5. Save the page.

Image floated left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec convallis velit, nec placerat ipsum. Proin in rhoncus ex. Phasellus ac feugiat sem, pharetra luctus massa. Fusce vehicula urna eget turpis gravida, at finibus odio consectetur. Sed ut neque eu massa scelerisque venenatis vel sit amet ipsum.

 

Image floated Right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec convallis velit, nec placerat ipsum. Proin in rhoncus ex. Phasellus ac feugiat sem, pharetra luctus massa. Fusce vehicula urna eget turpis gravida, at finibus odio consectetur. Sed ut neque eu massa scelerisque venenatis vel sit amet ipsum.

Captioned Images

  1. Upload and insert the image using File Attachments
  2. Double-click the image in the WYSIWYG
  3. Under Advanced, type caption under Stylesheet Classes (case sensitive). 
  4. Add the caption in the Advisory Title field
  5. Select Ok. Note: the caption will not appear in the editing view, but will appear on the page after Save.

Image with Caption

Need an Image? 

Visit WebDam for campus scenery, event, logos, and headshot photography. Login with your TUNetwork credentials. 

When downloading assets, be sure to select the preset "Web - Full-Width." You must be logged in to WebDam in order to download!