Photo Buttons

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

Red Button

Sample Photo Button

Grey Buttons

Sample Photo Button

Vertical Buttons

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”.

Sample Photo Button

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/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" /> 
<a href="http://www.montclair.edu/university-communications/">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/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" /> 
<a href="http://www.montclair.edu/university-communications/"><strong>Sample</strong> Photo Button</a>

[/photobutton]][[photobutton class="version-2"]

<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" /> 
<a href="http://www.montclair.edu/university-communications/"><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.

Example

Photo Button Version 3

Sample Code


[[row][column class="one-third"]

[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]

[/column][column class="one-third"]

[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]

[/column][column class="one-third"]

[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]

[/column][/row]]