Photo of desk with computer monitor displaying Montclair State University website.

Captions

The caption shortcode signals to WordPress that you want an image to be resized to fill an area defined by a container. Containers can be anything, most commonly:

  • the content area, ex: (add image here) The image will automatically be the full width of your page
  • a column: the easiest way to place images and text side by side
  • a table cell

With the caption shortcode, the website’s javascript will generate an image appropriate for that space automatically.

You can also use the caption shortcode to place text at the bottom of your images – simply place both an image and some text inside the shortcode.

Photo of teacher and students in dance studio class.

The image above is inside a caption shortcode by itself.

Photo of teacher and students in dance studio class.
This is a caption

The image above is in a caption shortcode with some text next to it.

Code Sample

[[caption]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2017/12/090816_7637_CART-Dance-Studio-150x150.jpg" alt="Photo of teacher and students in dance studio class." width="150" height="150" />[/caption]]

Common Image Arrangements

Two equal columns

University hall
University hall

Code sample

[[row][column class='one-half']
[caption]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2021/02/041420_2322_Campus-Spring-scaled.jpg" alt="University hall" width="2560" height="1442" class="size-full wp-image-2667" />[/caption]
[/column][column class='one-half']
[caption]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2021/02/041420_2322_Campus-Spring-scaled.jpg" alt="University hall" width="2560" height="1442" class="size-full wp-image-2667" />[/caption]
[/column][/row]]

Two columns with text

Note: visit Rows and Columns to learn about all available column sizes.

University hall

Mauris ut eleifend felis, venenatis ullamcorper nunc. Nulla at massa sit amet dolor cursus venenatis et non orci. Vestibulum lobortis tempor velit, nec maximus ipsum sodales sit amet. Cras ornare vestibulum purus, ut euismod libero ultricies non. Sed dignissim erat tellus. Aenean neque erat, aliquam sit amet laoreet vitae, elementum vel libero.

Code sample

[[row][column class='one-half']
[caption]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2021/02/041420_2322_Campus-Spring-scaled.jpg" alt="University hall" width="2560" height="1442" class="size-full wp-image-2667" />[/caption]
[/column][column class='one-half']
Add text here
[/column][/row]]