Adding Images to Content Components

What You Will learn

  • How to add images next to paragraphs on your page


Quick Steps

  1. Open Content component, insert image(s) in "Image" field(s) under the "Text and Table" field(s)
  2. Select desired image size and image alignment
One of the more common ways to add images to select pages on a site is by attaching them onto Content components. Before taking a look at the instructions below, visit the Examples tab to see how different images sizes and caption options appear on a page once published.  Remember, you must have already uploaded your image(s) into Tridion first.

Adding Images to Content Components

  1. Open the Content component that contains the text and/or paragraph to which you want to add an image.
  2. In the "Image" field below "Text and tables," click on the button of the folder/magnifying glass. Tridion will take you to your Building Blocks folder.
  3. Select the image you want to add from the Building Blocks folder where you saved the image.
  4. In the "Image size" field, select your desired size.
    • NOTE: Tridion resizes images in the content area based on width. It does not crop them to a specific height. Visit the Examples tab to see the size examples.
    • Fullsize- On a one column page, the fullsize photo spans the entire content area (three columns or 720px). On a two column page, the fullsize photo spans the main content area (two columns or 478 px). When applying the fullsize image size, you can also specify the vertical alignment of the image, which places the image either at the top of the paragraph or the bottom of the paragraph.
    • Large- 300 px
    • Medium- 350 px
    • Small- 200 px
    • Headshot- 100 px by 150 px
    • Thumbnail- 100 px
  5. Select your desired alignments in "Horizontal image alignment" and "Vertical image alignment" fields.
    • Horizontal- Right alignment places the image in the right column of your page; left alignment places image on the left of the page and wraps around the text. To see an example of a page with right alignment, click here.
    • Vertical- Unless you're using a wide image (discussed in another section), the difference between above and below for other image sizes is minimal. Most choose above. 
  6. If you enter text in the "Text to override image caption" area, whatever text you enter here will take the place of the caption you entered previously when uploading the image.
  7. Select how you would like the caption to appear in the "Caption behavior" field. 
  8. Once you're finished, hit "Save & Close" in the Home tab and publish your page.
DesertLarge size image with overlay caption

Desert

Large size image with overlay caption

About this image…

THIS IS A LARGE IMAGE WITH "LEFT" HORIZONTAL ALIGNMENT AND "ABOVE" VERTICAL ALIGNMENT.

Maecenas hendrerit lorem vel lacus molestie bibendum. Etiam adipiscing turpis sed est sodales id fermentum mauris venenatis. Nulla pretium tempor nunc, et porta erat elementum non. Nunc ultrices mattis arcu, at viverra magna consequat et. Aenean aliquet tempor massa in lacinia. Praesent malesuada augue a leo porttitor sed blandit urna egestas. Cras posuere augue est, vitae laoreet nisl. Sed massa elit, condimentum in porta ac, interdum gravida augue. Suspendisse potenti. Duis nisi quam, tempus eu tempus at, rhoncus tempus erat. Sed consectetur consectetur malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vestibulum nisl libero, lobortis sit amet fermentum sit amet, volutpat sit amet ante. Fusce in orci a ante ullamcorper blandit. Proin ipsum nibh, porttitor nec faucibus nec, imperdiet quis nunc. Aliquam blandit tortor at elit suscipit tempor. Fusce adipiscing volutpat quam non imperdiet. Aenean eu mauris nisi, id tincidunt ipsum. Fusce nunc quam, aliquet eu dictum ac, imperdiet et urna. Proin pulvinar suscipit facilisis. Mauris eget nisl erat. Sed ac dolor sodales erat viverra ultrices. Maecenas in molestie lorem.

Historical LibraryMedium size image.
Medium size image.

THIS IS A MEDIUM IMAGE WITH "LEFT" HORIZONTAL ALIGNMENT AND "ABOVE" VERTICAL ALIGNMENT.

Integer pellentesque imperdiet arcu, eu volutpat dui condimentum tempus. Morbi sollicitudin orci eu turpis pellentesque dictum. Nullam ut magna eu est feugiat tempor. Fusce vitae porttitor mauris. Praesent ultricies purus ut felis commodo et dapibus tellus iaculis. Integer ante nisl, volutpat in porttitor sit amet, molestie ut erat. Phasellus sodales sodales tempus. Integer mauris justo, pharetra sit amet rutrum at, sagittis ac lectus. Etiam ligula sem, volutpat quis euismod eget, consequat nec dui. Donec dictum faucibus vestibulum. Etiam pellentesque nisl posuere nisl iaculis ultrices cursus augue condimentum. Fusce leo ante, aliquam eu eleifend quis, consectetur a enim. In vulputate iaculis sapien eget facilisis. Morbi sed iaculis orci.

Child Study CenterSmall size image.
Small size image.

THIS IS A SMALL IMAGE WITH "LEFT" HORIZONTAL ALIGNMENT AND "ABOVE" VERTICAL ALIGNMENT.

Maecenas metus dolor, vestibulum sed dictum vel, pulvinar eget tortor. Quisque hendrerit, lacus a congue fermentum, diam sem rhoncus tortor, sit amet posuere nunc lacus vitae purus. Cras ultricies enim in augue convallis porttitor. Aliquam ultricies commodo placerat. Suspendisse ultrices, dui quis tincidunt aliquet, leo tellus pretium massa, quis auctor mi massa a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

David J. LeffelHeadshot size image
Headshot size image

THIS IS A HEADSHOT IMAGE WITH "LEFT" HORIZONTAL ALIGNMENT AND "ABOVE" VERTICAL ALIGNMENT.

Proin sagittis, ligula sit amet vehicula laoreet, neque diam faucibus purus, quis pharetra magna est quis urna. Donec eget purus dolor. Vivamus sagittis turpis mauris, eget laoreet nisi. Phasellus nibh ligula, ullamcorper lobortis imperdiet nec, adipiscing ac nunc. Nunc in velit elit, nec accumsan tortor. Quisque turpis velit, tincidunt non mattis ac, laoreet eu velit. Donec aliquet dignissim arcu ac pharetra. Etiam sagittis faucibus mauris id volutpat. Proin tempus consectetur nibh, et vulputate augue pellentesque sit amet. Sed in libero nisi, id consectetur tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut porttitor massa non lorem viverra egestas. 

HydrangeasThumbnail size image.
Thumbnail size image.

THIS IS A THUMBNAIL IMAGE WITH "LEFT" HORIZONTAL ALIGNMENT AND "ABOVE" VERTICAL ALIGNMENT.

Vestibulum nisl libero, lobortis sit amet fermentum sit amet, volutpat sit amet ante. Fusce in orci a ante ullamcorper blandit. Proin ipsum nibh, porttitor nec faucibus nec, imperdiet quis nunc. Aliquam blandit tortor at elit suscipit tempor. Fusce adipiscing volutpat quam non imperdiet. Aenean eu mauris nisi, id tincidunt ipsum. Fusce nunc quam, aliquet eu dictum ac, imperdiet et urna. Proin pulvinar suscipit facilisis. Mauris eget nisl erat. Sed ac dolor sodales erat viverra ultrices. Maecenas in molestie lorem.