{"id":3600,"date":"2024-12-11T15:55:22","date_gmt":"2024-12-11T20:55:22","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3600"},"modified":"2024-12-11T15:55:22","modified_gmt":"2024-12-11T20:55:22","slug":"photo-buttons","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/photo-buttons\/","title":{"rendered":"Photo Buttons"},"content":{"rendered":"

The photobutton<\/strong> shortcode allows you to create buttons with photo thumbnails on them. You can create horizontal and vertical buttons with either red or grey backgrounds.<\/p>\n

To create these buttons, simply create a photobutton and place an image and a link inside the shortcode.<\/p>\n

Version 1<\/h2>\n

Horizontal Buttons<\/h3>\n
\n

Red Button<\/strong><\/h3>\n<\/span> Sample Photo Button<\/span><\/a>\n

Grey Buttons<\/strong><\/p>\n<\/span> Sample Photo Button<\/span><\/a>\n<\/span> Sample Photo Button<\/span><\/a>\n<\/div><\/div>\n

Vertical Buttons<\/h3>\n<\/span> Sample Photo Button<\/span><\/a><\/span> Sample Photo Button<\/span><\/a><\/span> Sample Photo Button<\/span><\/a><\/span> Sample Photo Button<\/span><\/a>\n
\n

Button in a Column<\/h3>\n

You can also use the class<\/strong> “full-width” if you plan to use the photo button inside a column. The button to the right uses both “full-width” and “vertical”.<\/p>\n<\/div>

\n<\/span> Sample Photo Button<\/span><\/a>\n<\/div><\/div>\n

Attributes<\/h3>\n\n\n\n\n\n
Name<\/th>\nPossible Values<\/th>\nRequired<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
class<\/td>\nred<\/strong>, lt-gray<\/strong>, horizontal<\/strong>, vertical<\/strong>, full-width<\/strong><\/td>\nYes<\/td>\nYou must specify either<\/em> horizontal<\/strong> or vertical<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Code Sample<\/h3>\n
[[photobutton class="vertical"]\r\n\r\n<img src="http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/campus-aerial.jpg.0.2x.generic.jpg" alt="Aerial Photo of Campus" width="150" height="150" \/> \r\n<a href="http:\/\/www.montclair.edu\/university-communications\/">Sample Photo Button<\/a>\r\n\r\n[\/photobutton]]<\/pre>\n
Note: The version 1 photo button will change its size to fit the image you provide. If you want your buttons to be the same size, you’ll need to make sure all the images you use are the same size beforehand.<\/em><\/p>\n
Version 2<\/h2>\n
The second version of the photobutton<\/strong> shortcode is only for use on the Advanced Page template. It differs from Version 1 in that it requires different classes and that you must use the strong<\/strong> tag to separate the headline from the sub-head.<\/p>\n
<\/figure>\n
Attributes<\/h3>\n\n\n\n\n\n
Name<\/th>\nPossible Values<\/th>\nRequired<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
class<\/td>\nversion-2<\/strong>, double<\/strong><\/td>\nYes<\/td>\nYou must specify version-2<\/strong>. double<\/strong> will double the width of an item.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Code Sample<\/h3>\n
[[photobutton class="version-2"]\r\n\r\n<img src="http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/campus-aerial.jpg.0.2x.generic.jpg" alt="Aerial Photo of Campus" width="150" height="150" \/> \r\n<a href="http:\/\/www.montclair.edu\/university-communications\/"><strong>Sample<\/strong> Photo Button<\/a>\r\n\r\n[\/photobutton]][[photobutton class="version-2"]\r\n\r\n<img src="http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/campus-aerial.jpg.0.2x.generic.jpg" alt="Aerial Photo of Campus" width="150" height="150" \/> \r\n<a href="http:\/\/www.montclair.edu\/university-communications\/"><strong>Sample<\/strong> Photo Button<\/a>\r\n\r\n[\/photobutton]]<\/pre>\n
Note: You must make sure that you don’t leave any space between the end of one photobutton and the start of the next (see code sample above). Leaving a space will add space between items, which will prevent them from filling the line properly.<\/em><\/p>\n
Example<\/h3>\n
\n<\/span> Photo Button Version 3<\/span><\/a>\n<\/div>
\n<\/span> Photo Button Version 3<\/span><\/a>\n<\/div>
\n<\/span> Photo Button Version 3<\/span><\/a>\n<\/div><\/div>\n
Sample Code<\/h3>\n
\r\n\r\n[[row][column class="one-third"]\r\n\r\n[photobutton class="version-3"]<img src="http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/042817_4879_Campus-Students.jpg.2.2x.generic.jpg" alt="Photo of student sitting and writing outside on a sunny day on campus." width="150" height="150" \/> <a href="https:\/\/www.montclair.edu">Photo Button Version 3<\/a>[\/photobutton]\r\n\r\n[\/column][column class="one-third"]\r\n\r\n[photobutton class="version-3"]<img src="http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/042817_4879_Campus-Students.jpg.2.2x.generic.jpg" alt="Photo of student sitting and writing outside on a sunny day on campus." width="150" height="150" \/> <a href="https:\/\/www.montclair.edu">Photo Button Version 3<\/a>[\/photobutton]\r\n\r\n[\/column][column class="one-third"]\r\n\r\n[photobutton class="version-3"]<img src="http:\/\/www.montclair.edu\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/042817_4879_Campus-Students.jpg.2.2x.generic.jpg" alt="Photo of student sitting and writing outside on a sunny day on campus." width="150" height="150" \/> <a href="https:\/\/www.montclair.edu">Photo Button Version 3<\/a>[\/photobutton]\r\n\r\n[\/column][\/row]]\r\n\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The photobutton shortcode allows you to create buttons with photo thumbnails on them. You can create horizontal and vertical buttons with either red or grey backgrounds. To create these buttons, simply create a photobutton and place an image and a link inside the shortcode. Version 1 Horizontal Buttons Vertical Buttons Attributes Name Possible Values Required […]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":17,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3600","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3600","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=3600"}],"version-history":[{"count":10,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3600\/revisions"}],"predecessor-version":[{"id":3813,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3600\/revisions\/3813"}],"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=3600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}