Image & Text - Concordia University

Design options

The text area works just like the WYSIWYG component, allowing you to format the text, add links, bullets, anchors and ordered lists. Be sure to follow the same guidelines pertaining to font size and heading structure that you would when using the WYSIWYG component.

The image area works just like the Image component, which allows you to crop and resize the image, add a hyperlink, and has a checkbox that makes the image round.

Remember to save your images in the DAM following the web guidelines, in order to maintain quick loading times and proper image resolution:

Save all images for web at 72 ppi (pixels per Inch)
All images uploaded to the DAM must not exceed a width and/or height of 1920px
File Names are important; always use lower case letters, and separate words with dashes (-) and not spaces.

The Image and Text component will offer various layout options, depending how you format the image. This will determine how the text wraps around the photo. Although it can be used with any page template, it is most commonly used with the Right Side Bar template.

Guidelines

The way your text wraps around the image will depend on the size of the image, and the alignment option selected.

Option 1: Full Width

If the image takes up the entire width of the column, the text will appear underneath. An image may already be large enough to fill the width of the page, or you may select the "full width" option in the "Advanced Image Properties" tab. Be mindful of the size of your image when selecting the latter - you don't want to overstretch your photo!

Option 2: Partial Width

If the image is smaller than the column, the text will wrap to the side and fill the space. This layout can be further adjusted by selecting a left or right alignment in the "Styles" tab.

Option 3: Centered

Selecting a centre alignment for the image also centres the alignment of the text.

Option 4: Adding a description

Photo credit: Kermit the Frog Inc

Use the description field in the "Advanced Image Properties" tab to include a short text directly under your photo. This is often used to for photo credits.

Accessibility

As with the Image component, alt-text should be used to ensure accessibility, because it allows screenreaders to describe the image to visually impaired readers.
Do not use an image where text has been embedded on the visual, as this cannot be interpreted by screenreaders.
You can learn more about both of these topics by reading about our Image component.

Examples & use cases

Profiles and Bios

The Image and Text Component can be used for a person's profile or bio, by leveraging the "Round Image" option. Be sure to always select the "no wrap" option in the "Advanced Images Properties" to keep your profile text consolidated and have a consistent alignment. This will avoid text wrapping under the photo.

Grumpy Cat

CEO of his household

Main interests & activities

Napping
Hidding between sofa cushions
Taunting the dog
Chasing pieces of string
Excessively purring during Grey's Anatomy

Dos

Use meaningful images that compliment your text
Create an interesting page flow by varying alignment and image size
Be intentional with your image selection - less is more!

Don'ts

Add multiple busy and distracting images to your page
Use images with embedded text
Change the ratio of an image when manually overriding the pixel values

Helpful tips & "gotchas"

If you want to add multiple images to a particular page, you can use multiple Image & Text components. This is particularly helpful for very long text. When using full width images, the image always appears at the top, so be sure to break up your text accordingly, as it relates to the images.
Don't have Photoshop to resize your images? Try the Easy Image Resize tool. It's a free, online image editor.

Training

This component is covered in Basic training.

Need support?

The Web team is here to help.