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- 744px wide (1488px retina)
    • Medium- 360px widge (720px retina)
    • Headshot- 120px wide by 150px tall (240px by 300px retina)
    • Thumbnail- 120px wide (240px retina)
  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.
Historical Library

Medium size image.


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.

David J. Leffel

Headshot size image


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. 


Thumbnail size image.


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.

Right Alignment

When inserting images into content components and selecting "Right" alignment, the images will appear in the right column and do not wrap around any text.