Webmaster's Blog

Blogs Style Guide: Image Size and Alignment

Published
By

Size

A view of campus at night from across the Keweenaw Waterway.
This is the image caption. This image is the large size.
A view of campus at night from across the Keweenaw Waterway.
This image is medium-sized.
A view of campus at night from across the Keweenaw Waterway.
This is a thumbnail image.

Instructions

  1. Insert the Image With Caption block.
  2. Upload the image or choose it from the Media Library.
  3. Make sure there is Alt Text entered in the box in Image Settings in the Block Settings.
  4. Add caption text below the image as needed.
  5. Choose the Image Size from the dropdown in the Image Settings accordion in the Block Settings.

Position and Text Wrapping

Align Left (Left Align With Wrap)

A view of campus at night from across the Keweenaw Waterway.
This is a thumbnail image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla dolor, vulputate et enim at, convallis imperdiet velit. Fusce egestas elementum tincidunt. Suspendisse turpis dolor, mollis ac elit nec, aliquet fermentum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lectus in purus dictum, a gravida odio maximus. Donec eleifend et quam non feugiat. Proin lacinia congue placerat. In sit amet ligula at erat pellentesque elementum. Nullam sed vehicula tellus. Nunc dui lectus, consequat at nisl nec, sodales mollis nulla. Mauris imperdiet, ligula nec vulputate scelerisque, enim lectus elementum lorem, eu congue lorem magna nec lectus. Vestibulum tempus mauris et felis interdum sagittis id at urna. Aenean lacinia magna in ex molestie, nec pretium nisl iaculis. Vestibulum pulvinar massa tellus, at dictum magna molestie eget.

Align Center (Middle Align With No Wrap)

A view of campus at night from across the Keweenaw Waterway.
This is a thumbnail image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla dolor, vulputate et enim at, convallis imperdiet velit. Fusce egestas elementum tincidunt. Suspendisse turpis dolor, mollis ac elit nec, aliquet fermentum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lectus in purus dictum, a gravida odio maximus. Donec eleifend et quam non feugiat. Proin lacinia congue placerat. In sit amet ligula at erat pellentesque elementum. Nullam sed vehicula tellus. Nunc dui lectus, consequat at nisl nec, sodales mollis nulla. Mauris imperdiet, ligula nec vulputate scelerisque, enim lectus elementum lorem, eu congue lorem magna nec lectus. Vestibulum tempus mauris et felis interdum sagittis id at urna. Aenean lacinia magna in ex molestie, nec pretium nisl iaculis. Vestibulum pulvinar massa tellus, at dictum magna molestie eget.

Align Right (Right Align With Wrap)

A view of campus at night from across the Keweenaw Waterway.
This is a thumbnail image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla dolor, vulputate et enim at, convallis imperdiet velit. Fusce egestas elementum tincidunt. Suspendisse turpis dolor, mollis ac elit nec, aliquet fermentum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lectus in purus dictum, a gravida odio maximus. Donec eleifend et quam non feugiat. Proin lacinia congue placerat. In sit amet ligula at erat pellentesque elementum. Nullam sed vehicula tellus. Nunc dui lectus, consequat at nisl nec, sodales mollis nulla. Mauris imperdiet, ligula nec vulputate scelerisque, enim lectus elementum lorem, eu congue lorem magna nec lectus. Vestibulum tempus mauris et felis interdum sagittis id at urna. Aenean lacinia magna in ex molestie, nec pretium nisl iaculis. Vestibulum pulvinar massa tellus, at dictum magna molestie eget.

None (Left Align With No Wrap)

A view of campus at night from across the Keweenaw Waterway.
This is a thumbnail image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla dolor, vulputate et enim at, convallis imperdiet velit. Fusce egestas elementum tincidunt. Suspendisse turpis dolor, mollis ac elit nec, aliquet fermentum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lectus in purus dictum, a gravida odio maximus. Donec eleifend et quam non feugiat. Proin lacinia congue placerat. In sit amet ligula at erat pellentesque elementum. Nullam sed vehicula tellus. Nunc dui lectus, consequat at nisl nec, sodales mollis nulla. Mauris imperdiet, ligula nec vulputate scelerisque, enim lectus elementum lorem, eu congue lorem magna nec lectus. Vestibulum tempus mauris et felis interdum sagittis id at urna. Aenean lacinia magna in ex molestie, nec pretium nisl iaculis. Vestibulum pulvinar massa tellus, at dictum magna molestie eget.

Instructions

  1. Insert the Image With Caption block.
  2. Upload the image or choose it from the Media Library.
  3. Make sure there is Alt Text entered in the box in Image Settings in the Block Settings.
  4. Add caption text below the image as needed.
  5. From the block toolbar at the top of the block, click the Align icon. Alignment icon. Choose the desired alignment.

Row With Left Image

A view of campus at night from across the Keweenaw Waterway.

Text Portion

You can insert headings, paragraphs, lists, block-quotes and more here!

Instructions

  1. Insert the Row with Left Image block.
  2. Upload the desired image or select it from the Media Library.
  3. Make sure there is Alt Text entered in the box in Media & Text Settings in the Block Settings.
  4. Add Heading or Paragraph blocks in the Content section as desired.