Category | Value |
---|---|
May contain | None |
May be placed in | Component grid |
Field | Description |
---|---|
Image | Uploaded png, gif, jpg or jpeg. Less than 8 MB and between 320x213 and 3840x2560 pixels. |
Alignment | Left (default) or Center. |
Preserve aspect ratio | Unchecked (default) or checked. Prevents automatic cropping of the image if checked. |
Title | Slightly larger text with different color treatment. A heading to accompany the image. |
Text | Normal plain text. In the example below, "This image card has optionally provided text here." |
Attribution | Lower weighted text. In the example below, "Anonymous". |
Text is a quotation | Unchecked (default) or checked. Wraps text in curly quotes if checked. |
Link | Text and URL destination. |
How to add an Image card
Select Image card from the Component type drop down list and click the Add new Component or Add another Component button.
Upload an Image and provide the Alternate text for it.
Choose whether the Alignment should be left or center.
Check Preserve aspect ratio to retain the aspect ratio of the uploaded image instead of automatically cropping it.
Provide a Title and Text if the image card should have them.
Provide the Attribution, if any, and indicate whether the Text is a quotation by checking the checkbox or leaving it unchecked.
If desired, provide a Link Title and URL as a link destination for the image card.
Things worth mentioning
If Preserve aspect ratio is left unchecked, then the provided Image is cropped to a 3:2 aspect ratio when Alignment is left and cropped to a 1:1 aspect ratio when Alignment is center.
If Preserve aspect ratio is checked, then the Image will be scaled so that its width is the same as it would be when unchecked, but its aspect ratio will be retained.
The Title of the Image card will be made the link if a Link URL is provided without a Link Title.
The Link URL will be made the text of the link if a Link URL is provided without a Link Title and there is no Title for the Image card.
Examples
This is an example of a Component grid with four Image card components. Each Image card has the required Image, but additionally:
The first Image card has an Alignment of left; includes a Title, Text and Attribution; Text is a quotation is checked; and both a Link Title and URL are included.
The second Image card has an Alignment of left and has only a Title, Link Title and URL.
The third Image card has an Alignment of center and has only a Title and a Link URL without a Link Title.
The fourth image has an Alignment of center and has only Text and a Link URL without a Link Title.
The next example is a Component grid containing Image cards with Preserve aspect ratio checked.
![photo of a student on a bench next to a wall of windows, shot from above](https://files.wmich.edu/s3fs-public/images/u878/2020/MBZ00720_600x900.jpg)
Sample image card #5
![KSWG](https://files.wmich.edu/s3fs-public/2024-07/screenshot_2021-04-01_095233.png)
Sample image card #6
![photo of a student on a bench next to a wall of windows, shot from above](https://files.wmich.edu/s3fs-public/images/u878/2020/MBZ00720_600x900_0.jpg)
Sample image card #7
![students walking on campus with Sprau Tower in background](https://files.wmich.edu/s3fs-public/images/u878/2020/MSB08048_600x900_0.jpg)