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.
The image above is inside a caption shortcode by itself.
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
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.
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]