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
Sample Photo Button Sample Photo Button Sample Photo Button Sample Photo Button
Button in a Column
You can also use the class “full-width” if you plan to use the photo button inside a column. The button to the right uses both “full-width” and “vertical”.
Attributes
| Name | Possible Values | Required | Notes |
|---|---|---|---|
| class | red, lt-gray, horizontal, vertical, full-width | Yes | You must specify either horizontal or vertical |
Code Sample
[[photobutton class="vertical"] <img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/09/campus-aerial-150x150.jpg" alt="Aerial Photo of Campus" width="150" height="150" /> <a href="http://www.montclair.edu/web-services/">Sample Photo Button</a> [/photobutton]]
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.
Version 2
The second version of the photobutton 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 tag to separate the headline from the sub-head.
Attributes
| Name | Possible Values | Required | Notes |
|---|---|---|---|
| class | version-2, double | Yes | You must specify version-2. double will double the width of an item. |
Code Sample
[[photobutton class="version-2"] <img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/09/campus-aerial-150x150.jpg" alt="Aerial Photo of Campus" width="150" height="150" /> <a href="http://www.montclair.edu/web-services/"><strong>Sample</strong> Photo Button</a> [/photobutton]][[photobutton class="version-2"] <img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/09/campus-aerial-150x150.jpg" alt="Aerial Photo of Campus" width="150" height="150" /> <a href="http://www.montclair.edu/web-services/"><strong>Sample</strong> Photo Button</a> [/photobutton]]
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.
Version 3
The third version of the Photobutton is more customizable than the others, but requires a bit more work. First, you must manually create rows and columns – the buttons will size automatically to fit the columns. Second, you must scale your images to the same size before upload, or the buttons won’t match.
Example
Sample Code
[[row][column class="one-third"] [photobutton class="version-3"]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2017/12/042817_4879_Campus-Students-150x150.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] [/column][column class="one-third"] [photobutton class="version-3"]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2017/12/042817_4879_Campus-Students-150x150.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] [/column][column class="one-third"] [photobutton class="version-3"]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2017/12/042817_4879_Campus-Students-150x150.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] [/column][/row]]