Photo Buttons

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

Ask for Assistance


Add Photo Buttons

Like call to action buttons, button photos are button links you use in your website to guide your users toward important actions you want them to take on a page.

Although not required, photo buttons are typically used in grids. If you would like to use a grid, add a grid first, then add a photo button in each grid item.

You can also insert a photo navigation pattern template. It comes pre-populated with a three-column flush grid of photo buttons.

Here's a screenshot of three photo buttons in a grid on a marketing page:

"Find the Degree Program for You" with three column grid undneath, with photo buttons for Undergraduate, Graduate, and Law

To insert a photo button on the page, place your cursor where you would like the photo button to go, then click the UO Edit Suite Templates button in the editor toolbar. (Visit the Drupal Content Editor page to learn about the editor toolbar.)

the Drupal content editor toolbar with a red rectangle around the templates icon

Click the "Button Photo" option and then click the "Select Button Photo Options" button.

selecting the Button Photo template in the Drupal content editor

There is only one style available at the moment, so click the "Button Photo" option, then click the "Insert Template" button.

selecting the Button Photo style when adding a photo button in the content editor

The photo button template will appear in your page.


Replace the Placeholder Photo

Now that you have a photo button template in your page, you will need to replace the placeholder photo that comes with the template.

Click the placeholder photo and then click the Insert Media button in the editor toolbar.

the insert media button in the content editor

Visit our Images page to learn more about adding images to your page.


Add the Button Text

Highlight the default "Photo Caption" text and type the text you would like to use. "Photo Caption" has been changed to "Graduate Programs" in the example below.

an example of a photo button that says Graduate Programs and shows person at a computer

To add a link to your photo button, click on the photo button text and select the pencil icon to edit the link.

the link editing icon in the Drupal content editor

Paste or type the URL you would like to use into the Link URL box. Click the Save button, which features a green check mark.

saving an example URL as part of a photo button

Edit Photo Buttons

Right-click on the photo button and then click "Edit Photo Button".

example showing right-click and selecting Edit Photo Button in the content editor

The Photo Button editing menu will open on the left side of the page, providing the following options: Style, Delete All, and Insert Paragraph.

the photo button editing menu in the Drupal content editor

Style

Click "Style" and then "Photo Button" to open the style options menu.

the photo button style menu in the Drupal content editor

The menu offers three options: with shade, without shade, and bottom gradient. Select the option that works best with the images you are using in your buttons. If using buttons in a grid, select the same style for all buttons in that grid.

Photo Button with Shade

This option includes a shaded area behind the text in the center of the photo button to improve contrast between the text and the image.

photo button that says Student Unions in the center with a shaded area in the center and a drawing of overlapping silhouettes in the background

Photo Button without Shade

This option works best with simple backgrounds that offer high contrast between the text and the image.

photo button that says Student Unions in the center with a drawing of overlapping silhouettes in the background

Photo Button with Bottom Gradient

This is the default setting. It works well with many images, placing the button photo text at the bottom of the image with a gradient at the bottom to improve contrast between the text and the background.

photo button that says Student Unions at the bottom with a drawing of overlapping silhouettes in the background

Delete All

To completely remove your photo button from the page, click on "Delete All" and then click "Photo Button" to open the delete menu.

Click the "Delete All" button to remove the photo button.

Delete All option in the photo button edit menu

Insert Paragraph

To insert an empty paragraph before or after your photo button, click "Insert Paragraph" and then "Photo Button" to open the menu. 

Click "Insert Para Before" to insert a paragraph before the photo button.

Click "Insert Para After" to insert a paragraph after the photo button.

the Insert Paragraph option in the photo button editing menu

Back to Top