Adding Images to Content Components

Owned by Zachary Restifo
Last updated: Mar 19, 2021
4 min read

One of the more common ways to add images to select pages on a site is by attaching them onto Content components.

Remember, you must have already uploaded your image(s) into Tridion first.

For information on Uploading Images to Tridion, see these instructions:

Uploading Images

 

The following instructions will provide information on how to add images next to paragraphs on your page by attaching them to a Content component.

 

Table of Contents

 

Adding Images to Content Components

To start adding an Image to a Content component you must choose and find the component that contains the text and/or paragraph to which you want to add an image.

In the Building Blocks folder of your publication, navigate to the component and open it.

The Content component you are adding an Image to.

 

In the Image field below Text and tables, click on the magnifying glass icon (highlighted in yellow above). Tridion will take you to your Building Blocks folder.

  • Select the image you want to add and click Insert.

 

Once you have attached the image, you should fill out the rest of the information

  1. Image size: Use the drop down menu to select the desired size for the image.

    • All images should be a minimum of 1400 pixels wide.

    • This will guarantee that your image will work in any of the available image templates and help protect your images in future template upgrades.

  2. Horizontal image alignment: Use the drop down menu to determine the horizontal alignment of your image:

    • 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 examples of these alignments, visit the next section of these instructions.

  3. Text to override image caption: If you enter text in this field area, the text you enter here will take the place of the caption you entered previously when uploading the image.

  4. Once you're finished adding the image and its information, hit Save and Close in the Home tab and you are ready to Publish.

 

Tridion resizes images in the content area based on width. It does not crop them to a specific height. See the examples below for screenshots of the different images sizes on a page.

 

When you publish to Preview your images may display a red overlay message indication that the size is too small.

  • That message is primarily to inform you that it may be too small for high pixel density devices or monitors. When a user operating from that type of device visits your pages, the image will appear distorted.

 

 

Examples: Left Alignment

The screenshots below demonstrate what 3 different image sizes look like with Left alignment on a page.

Medium Image Size

This is a Medium image with Left alignment on a web page.

 

Headshot Image Size

This is a Headshot image with Left alignment on a web page.

 

Thumbnail Image

This is a Thumbnail image with Left alignment on a web page.

 

Examples: Right Alignment

The screenshots below demonstrate what 3 different image sizes look like with Right alignment on a page.

Medium Image Size

 

This is a Medium image with Right alignment on a web page.

 

Headshot Image Size

 

This is a Headshot image with Right alignment on a web page.

 

Thumbnail Image

 

This is a Thumbnail image with Right alignment on a web page.