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!
Image & Text
The image & text component allows you to present an image and text side by side.
Prepare an image for the DAM
File type
- .jpg or .png
Image dimensions
- All images uploaded to the DAM must not exceed a width and/or height of 1920px
- To resize an image, use the Image Resizer tool.
File name
If the image comes from PhotoFinder, replace each space with a dash.
If the image comes from another source, use lower case letters and separate words with dashes (-)
- e.g. stadium-football-game.jpg
Use an Image & Text component on your page
- You can use the Image & Text component is with any component. It's especially useful for the Right Sidebar template.
- If you want to add multiple images to a 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 as it relates to the images.
- The Text area of this component works just like the WYSIWYG component, allowing you to format the text, add links, bullets, anchors and ordered lists. Follow the same guidelines pertaining on font size and heading structure that you would when using the WYSIWYG component.
- To adjust how large the image appears on the page, go to Image Settings. In New size, there are two blank fields. Add a pixel value to the first px field (e.g. 400), for the image width. Click OK. The height will adjust automatically, so your image is perfectly scaled.
- Follow the Accessibility guidelines
- Choose the best Design Option for your image
- Before you activate a page:
- Preview and refresh it
- Carefully review the page to check how the images display
- If anything looks "off" and you can't fix it, email websupport@concordia.ca
Accessibility
Don't use images containing text
Screen readers and other assistive technologies can't read text that’s contained inside an image, e.g. like company logos, book covers and posters.
If you must add an image of a logo or book cover:
- Provide descriptive alt text.
- Ensure the image is high resolution, so users will low vision can easily enlarge it. For example, use a 640px image for a 320px spot or use a scalable vector graphic (SVG).
It's best not to use posters, because they're hard to view on mobile and it's difficult to make them accessible. It's better to present the content directly on your web page. For help with this, contact websupport@concordia.ca.
Add alt text to images
“Alt text” stands for “alternative text”. It's the text that describes an image on a web page, e.g. for people using a screen reader or people with a slow internet connection.
By law, Concordia's websites are required to be accessible and adding Alt Text is one of the first steps you need to take to ensure your web pages comply.
How to write alt text
- Clearly describe what's in the image. Be specific.
- Use proper punctuation so the alt text sounds natural when read out loud.
- Maximum 150 characters alt text, because some screen readers will cut off at this point. Use WordCounter to keep your alt text below 150 characters.
Example
Bad alt text: gym athletics fitness centre exercise
Better alt text: A cycling class at Concordia's Le Gym.
Best alt text: Riders participate in an indoor cycling class at Le Gym's Spin Studio, Concordia University's downtown fitness centre.
The best alt text gives users of screen readers and search engines a good ‘picture’ of what the image consists of and how it relates to the rest of the information on the page. It uses keywords and punctuation in a natural way and is concise at under 125 characters.
Within the Image & Text component, you can adjust the image layout and whether the text wraps around the image.
Layout
The Image & Text component will offer various layout options, depending how you format the image.
Full width image
Partial width image
If the image is smaller than the column, the text will appear beside the image.
In Image Settings, set the Image size to no more than 400px wide. Don't set a height; it will scale automatically.
Also in Image Settings, you can adjust the Image position to Left or Right.
Centred image
Selecting a centre alignment for the image also centres the text.
No wrap
When you use an Image & Text component, at the bottom of the Image Settings tab there's a No wrap option. When you select it, text won't wrap below the image.
No wrap is the best option for the 3 following situations:
1. Image on left
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
2. Small round image on right
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
3. Medium-sized image on right + text is only a bit longer than the image
Note: Right-aligned images look best when they're set to maximum 400px wide, like in this example.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Default wrapped text
If the 400px image is on the right and the text extends far below the image, the default wrapped text looks best. For example:
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Need support?
The Web team is here to help.