{"id":3564,"date":"2024-12-11T15:56:00","date_gmt":"2024-12-11T20:56:00","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3564"},"modified":"2024-12-11T15:56:00","modified_gmt":"2024-12-11T20:56:00","slug":"captions","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/captions\/","title":{"rendered":"Captions"},"content":{"rendered":"<p>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:<\/p>\n<ul>\n<li>the content area, ex: (add image here) The image will automatically be the full width of your page<\/li>\n<li>a column: the easiest way to place images and text side by side<\/li>\n<li>a table cell<\/li>\n<\/ul>\n<p>With the caption shortcode, the website\u2019s javascript will generate an image appropriate for that space automatically.<\/p>\n<p>You can also use the caption shortcode to place text at the bottom of your images \u2013 simply place both an image and some text inside the shortcode.<\/p>\n<div class=\"prpl-row\"><div class=\"prpl-column one-half\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/090816_7637_CART-Dance-Studio.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/090816_7637_CART-Dance-Studio.jpg.0.1x.generic.jpg\" alt=\"Photo of teacher and students in dance studio class.\"\/><\/figure>\n<div class='inset lt-gray'>\n<p>The image above is inside a caption shortcode by itself.<\/p>\n<\/div>\n<\/div><div class=\"prpl-column one-half\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/090816_7637_CART-Dance-Studio.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/090816_7637_CART-Dance-Studio.jpg.0.1x.generic.jpg\" alt=\"Photo of teacher and students in dance studio class.\"\/><figcaption class=\"wp-caption-text\">This is a caption<\/figcaption><\/figure>\n<div class='inset lt-gray'>\n<p>The image above is in a caption shortcode with some text next to it.<\/p>\n<\/div>\n<\/div><\/div>\n<p><strong>Code Sample<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n&#x5B;caption]&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/090816_7637_CART-Dance-Studio-1024x683.jpg&quot; alt=&quot;Photo of teacher and students in dance studio class.&quot; width=&quot;1024&quot; height=&quot;683&quot; class=&quot;alignnone size-large wp-image-3643&quot; \/&gt;&#x5B;\/caption]\r\n\r\n<\/pre>\n<h2>Common Image Arrangements<\/h2>\n<h3>Two equal columns<\/h3>\n<div class=\"prpl-row\"><div class=\"prpl-column one-half\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1.jpg.0.1x.generic.jpg\" alt=\"University hall tower framed by blooming tree branches\"\/><\/figure>\n<\/div><div class=\"prpl-column one-half\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1.jpg.0.1x.generic.jpg\" alt=\"University hall tower framed by blooming tree branches\"\/><\/figure>\n<\/div><\/div>\n<p><strong>Code sample<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;row]&#x5B;column class='one-half']\r\n\r\n&#x5B;caption]&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1-1024x577.jpg&quot; alt=&quot;University hall tower framed by blooming tree branches&quot; width=&quot;1024&quot; height=&quot;577&quot; class=&quot;alignnone size-large wp-image-3536&quot; \/&gt;&#x5B;\/caption]\r\n\r\n&#x5B;\/column]&#x5B;column class='one-half']\r\n\r\n&#x5B;caption]&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1-1024x577.jpg&quot; alt=&quot;University hall tower framed by blooming tree branches&quot; width=&quot;1024&quot; height=&quot;577&quot; class=&quot;alignnone size-large wp-image-3536&quot; \/&gt;&#x5B;\/caption]\r\n\r\n&#x5B;\/column]&#x5B;\/row]\r\n<\/pre>\n<h3>Two columns with text<\/h3>\n<p><em>Note: visit <a href=\"\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/\nwordpress-shortcodes\/rows-and-columns\/\">Rows and Columns<\/a> to learn about all available column sizes<\/em>.<br \/>\n<div class=\"prpl-row\"><div class=\"prpl-column one-half\">\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1.jpg.0.1x.generic.jpg\" alt=\"University hall tower framed by blooming tree branches\"\/><\/figure>\n<\/div><div class=\"prpl-column one-half\"><br \/>\nMauris 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.\n<\/div><\/div>\n<p><strong>Code sample<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;row]&#x5B;column class='one-half']\r\n\r\n&#x5B;caption]&lt;img src=&quot;http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/11\/041420_2322_Campus-Spring-scaled-1-1024x577.jpg&quot; alt=&quot;University hall tower framed by blooming tree branches&quot; width=&quot;1024&quot; height=&quot;577&quot; class=&quot;alignnone size-large wp-image-3536&quot; \/&gt;&#x5B;\/caption]\r\n\r\n&#x5B;\/column]&#x5B;column class='one-half']\r\nAdd text here\r\n&#x5B;\/column]&#x5B;\/row]\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3564","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3564"}],"version-history":[{"count":5,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3564\/revisions"}],"predecessor-version":[{"id":3799,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3564\/revisions\/3799"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3554"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}