  {"id":3594,"date":"2024-12-11T15:55:22","date_gmt":"2024-12-11T20:55:22","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3594"},"modified":"2024-12-11T15:55:22","modified_gmt":"2024-12-11T20:55:22","slug":"masonry-set","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/masonry-set\/","title":{"rendered":"Masonry Set"},"content":{"rendered":"<p>A masonry set (also often referred to as an \u201coctet\u201d) is a collection of manually defined tiles arranged as a grid, and may only be used on the advanced\/full-width page template. The entire object is created using the <strong>masonryset<\/strong> and the <strong>masonrytile<\/strong> shortcode.<\/p>\n<p>This shortcode can generate several configurations by using the available attributes to define tile widths.<\/p>\n<div class=\"prpl-row\"><div class=\"prpl-column two-thirds\">\n<p><strong>Desktop:<\/strong><\/p>\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\/masonry-desktop.jpg.4.2x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/masonry-desktop.jpg.4.2x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<\/div><div class=\"prpl-column one-third\">\n<p><strong>Mobile:<\/strong><\/p>\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\/masonry-mobile.jpg.2.2x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/masonry-mobile.jpg.2.2x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<\/div><\/div>\n<h2>Masonry Set Attributes<\/h2>\n<p>(none)<\/p>\n<h2>Masonry Tile Attributes<\/h2>\n<table class=\"responsive-table\">\n<thead>\n<tr>\n<th scope=\"col\">Name<\/th>\n<th scope=\"col\">Possible Values<\/th>\n<th scope=\"col\">Required<\/th>\n<th scope=\"col\">Notes<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>background<\/td>\n<td>URL to an image (starting with \/)<\/td>\n<td>Yes<\/td>\n<td>(none)<\/td>\n<\/tr>\n<tr>\n<td>class<\/td>\n<td>light, dark, responsive-clear, double-width<\/td>\n<td>No<\/td>\n<td>Default: dark. The <strong>responsive-clear<\/strong> class will be clear at desktop resolutions, then dark at mobile resolutions. Use it for double-width tiles where the text doesn&#8217;t overlay anything in desktop.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>8-tile Masonry Set<\/h2>\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\/8-tile-Masonry-Set.png.5.2x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/8-tile-Masonry-Set.png.5.2x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<h3>Code Sample<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;&#x5B;homepageband]\r\n&#x5B;masonryset]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/2015\/10\/092016_8500_Campus-Students.jpg&quot;]\r\n \r\n&lt;h3&gt;Transfer and Adult Information Session&lt;\/h3&gt;\r\n \r\nTuesday, March 7, 2022\r\n \r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;\/admissions\/visit-us\/transfer-and-adult-information-sessions\/&quot;&gt;Are You Ready?&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2017\/02\/umbrella-merged-thumbnail.jpg&quot;]\r\n \r\n&lt;h3&gt;Summer Sessions 2022&lt;\/h3&gt;\r\n \r\nMay 15 - August 24\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/summer\/&quot;&gt;View Course Schedule&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/2017\/02\/2017womensbball.jpg&quot;]\r\n \r\n&lt;h3&gt;Women's Basketball to Host NCAA 1st and 2nd Rounds&lt;\/h3&gt;\r\n \r\nFacing Westfield State on Friday\r\n \r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;http:\/\/www.montclairathletics.com\/news\/2017\/2\/27\/womens-basketball-to-host-ncaa-1st-2nd-rounds.aspx&quot;&gt;Go Red Hawks!&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2017\/02\/njnews_homepagethumb.jpg&quot;]\r\n\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/news\/article.php?ArticleID=17740&quot;&gt;Sign Up&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2015\/10\/masonry-flags.jpg&quot;]\r\n \r\n&lt;h3&gt;Middle States Review&lt;\/h3&gt;\r\n \r\n2020-2021\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/middle-states\/&quot;&gt;Learn More&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/2016\/12\/by-the-numbers.jpg&quot;]\r\n \r\n&lt;h3&gt;Immigration Update&lt;\/h3&gt;\r\n \r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/president\/current-and-emerging-immigration-issues\/&quot;&gt;Read More&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2017\/02\/pankajlal_new.jpg&quot;]\r\n\r\n&lt;h3&gt;Meet a Red Hawk&lt;\/h3&gt; \r\n \r\nPankaj Lal Receives Prestigious PECASE Award\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/news\/article.php?ArticleID=17525&quot;&gt;The Full Story&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/sites\/119\/2022\/01\/2022-01-19_tct-layout-03.jpg.2.2x.generic.jpg&quot;]\r\n \r\n&lt;h3&gt;Join us on Campus&lt;\/h3&gt;\r\nExplore Red Hawk Country on one of our in-person tours.\r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;#&quot;&gt;Register Today&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;\/masonryset]\r\n&#x5B;\/homepageband]]\r\n<\/pre>\n<h2>7-tile Masonry Set<\/h2>\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\/119\/2023\/01\/7-tile-Masonry-Set.png\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/119\/2023\/01\/7-tile-Masonry-Set.png.0.1x.generic.jpg\"\/><\/figure>\n<h3>Code Sample<\/h3>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;&#x5B;homepageband]\r\n&#x5B;masonryset]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/sites\/144\/2024\/12\/7-tile-Masonry-Set.png.5.2x.generic.jpg&quot;]\r\n \r\n&lt;h3&gt;Transfer and Adult Information Session&lt;\/h3&gt;\r\n \r\nTuesday, March 7, 2022\r\n \r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;\/admissions\/visit-us\/transfer-and-adult-information-sessions\/&quot;&gt;Are You Ready?&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2017\/02\/umbrella-merged-thumbnail.jpg&quot;]\r\n \r\n&lt;h3&gt;Summer Sessions 2022&lt;\/h3&gt;\r\n \r\nMay 15 - August 24\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/summer\/&quot;&gt;View Course Schedule&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/2017\/02\/2017womensbball.jpg&quot;]\r\n \r\n&lt;h3&gt;Women's Basketball to Host NCAA 1st and 2nd Rounds&lt;\/h3&gt;\r\n \r\nFacing Westfield State on Friday\r\n \r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;http:\/\/www.montclairathletics.com\/news\/2017\/2\/27\/womens-basketball-to-host-ncaa-1st-2nd-rounds.aspx&quot;&gt;Go Red Hawks!&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2017\/02\/njnews_homepagethumb.jpg&quot;]\r\n\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/news\/article.php?ArticleID=17740&quot;&gt;Sign Up&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;light&quot; background=&quot;\/wp-content\/uploads\/2015\/10\/masonry-flags.jpg&quot;]\r\n \r\n&lt;h3&gt;Middle States Review&lt;\/h3&gt;\r\n \r\n2020-2021\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/middle-states\/&quot;&gt;Learn More&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile background=&quot;\/wp-content\/uploads\/2016\/12\/by-the-numbers.jpg&quot;]\r\n \r\n&lt;h3&gt;Immigration Update&lt;\/h3&gt;\r\n \r\n&#x5B;button class=&quot;ghost-white&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/president\/current-and-emerging-immigration-issues\/&quot;&gt;Read More&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;masonrytile class=&quot;responsive-clear double-width&quot; background=&quot;\/wp-content\/uploads\/2017\/02\/pankajlal_new.jpg&quot;]\r\n \r\n \r\n&lt;h3&gt;Meet a Red Hawk&lt;\/h3&gt;\r\n \r\n \r\nPankaj Lal Receives Prestigious PECASE Award\r\n \r\n&#x5B;button class=&quot;red&quot;]&lt;a href=&quot;http:\/\/www.montclair.edu\/news\/article.php?ArticleID=17525&quot;&gt;The Full Story&lt;\/a&gt;&#x5B;\/button]\r\n \r\n&#x5B;\/masonrytile]&#x5B;\/masonryset]\r\n&#x5B;\/homepageband]]\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A masonry set (also often referred to as an \u201coctet\u201d) is a collection of manually defined tiles arranged as a grid, and may only be used on the advanced\/full-width page template. The entire object is created using the masonryset and the masonrytile shortcode. This shortcode can generate several configurations by using the available attributes to [&hellip;]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3594","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3594","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=3594"}],"version-history":[{"count":8,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3594\/revisions"}],"predecessor-version":[{"id":3809,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3594\/revisions\/3809"}],"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=3594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}