Embedded Image

Insert images with different locations and sizes to your News and Event posts.

Embedded Image – Regular

The regular embedded image is a large photo with different width options: browser (largest), website (medium), or content (smallest).

  • Use: Insert a larger photo to add visual interest
  • Location: At the beginning of News and Event posts
  • Capitalization: Image captions (optional) and alt text should be sentence case

Default shortcode

[image_spread img_url="https://images.pexels.com/photos/1027161/pexels-photo-1027161.jpeg" caption="Recipient of the 2012 Wesbrook Scholarship" alt="Portrait photograph of the recipient of the 2012 Wesbrook Scholarship" alt="" width="content"]

Parameters

image_spread -- begins a single embedded image
img_url="" -- sets image via a file URL
caption="" -- sets caption text below image
alt="" -- sets alt text for image
width="" -- choose "browser", "website", or "content" - sets image spread width

*Parameters italicized are optional

Embedded Image – Floated

Insert a floated image with different alignment options

  • Use: Add photos to break up bodies of text and add visual interest
  • Location: Within the body of news and event posts
  • Capitalization: Image captions and alt text should be sentence case

Default shortcode

[image_aligned img_url="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg" caption="UBC Okanagan, 2015" alt="Landscape nature photograph of UBC Okanagan, 2015" align="left"]

Parameters

image_aligned -- begins a single embedded image
img_url="" -- sets image via a file URL
caption="" -- sets caption text below image
alt="" -- sets alt text for image
align="" -- choose "left" or "right" - sets image position on page

*Parameters italicized are optional

Adding a Caption to an Embedded Image via Module Wizard

You can add a caption to an Embedded Image by following the procedure below:

  1. Navigate to your site’s dashboard and click on the Media button on the left-hand menu to open the Media Library
  2. Click on the image you would like to add as an embedded image and copy the URL of the image
  3. Navigate to your page or post, and click on the Add Module button on the editor toolbar to open the Module Wizard
  4. Select Embedded Image module and select the configuration you want to achieve
  5. Enter your desired caption on the Caption field
  6. Click on Next Step to finish adding the embedded image to the page or post

Note: If you leave the Caption field empty in step 5 above, the caption that is embedded in the image from the Media Library will be used as the default image caption.

Adding hyperlinks into the caption

To add links, use the <a href='LINK_URL'>Your Text Goes Here</a> HTML tag in your caption.
Note: you should use ‘ ‘ single quotes in the ‘Link_URL’ section of the <a> tag, since double quotes will cause the shortcode to break.

On this page