Favorites

With the Favorites plugin for ProofBuddy your visitors will be able to tag their favorite images and submit them to you.

Installation and Setup

Once downloaded, you install Favorites just like any other WordPress plugin.

Before your clients start tagging though you will need to edit the full image template.

From the WordPress admin page click on the Templates link under ProofBuddy. The template you’re looking for is the Image template.

You’re going to want to add the two following shortcodes to your template.

[pb_favorite]

The pb_favorite shortcode is replaced with a link to either add an image to favorites or remove it if it’s already a favorite.

[pb_view_favorites]

The pb_view_favorites shortcode is replaced with a link so that your visitors can view and submit their favorites. By default it is blanked out when there aren’t any favorites selected although you can change that.

This plugin adds quite a few additional shortcodes. The rest are listed under the templates that they are used in.

Templates

Along with the edits to the full image template, there are a few new templates specific to the Favorites plugin. In fact, there’s an entire new Favorites tab on the Templates menu. All have defaults that should let you get up and running without much effort, but you can customize them as much as you need or want to make the pages look exactly like you want.

Admin Email

The admin email template is used to define the email that you get when a user submits their favorites.

The email is sent as an HTML email so you can format it pretty much however you want, although often email readers will strip out things like custom CSS.

To settings to the right that you’ll want to look at. There’s a field for the subject of the email and the address to send it to. If you leave the address empty it will send to the same address you’re using in the ProofBuddy settings.

[pb_favorites_email field="?"]

pb_favorites_email is a shortcode that’s used to display information about the submission. You’ll need to include the field attribute using one of the values below.

  • name – The name of the user that submitted the favorites
  • date – When the favorites were submitted
  • comments – Any comments left by the visitor

There is also a format attribute that you can use to change how the date is formatted. It has no effect on the name or comments field, and defaults to the same format you’ve selected in the WordPress options if you leave it off.

pb_favorites_email_custom]

If you’ve included any custom fields in your submission form template this shortcode will include them in your email. More on adding custom fields below with the Submission Form template.

Attributes for this shortcode

  •  title – What to display above the list of custom fields. Defaults to “Custom Fields”
  • no_fields – What to display if there aren’t any custom fields. Defaults to a blank string.
[pb_favorites_email_images]

Displays a table of the images submitted.

Attributes

  • cols – Number of columns to display. Defaults to 5. You don’t have a setting for rows since it’s a single email. There will be as many rows as there needs to be to show all the images.
  • title – Message displayed above the table of images. Defaults to “Favorites”
  • cell_style – CSS style attribute for each of the td elements. Defaults to ‘text-align:center;padding:8px;’. This is done via inline styling because most email readers strip out other CSS

Favorites List

The favorites list template is roughly the same as the main thumbnail template inside ProofBuddy except that it only shows thumbs for the favorites. It also has a couple of extra shortcodes available.

[pb_favorites_thumbnails]

Displays the grid of thumbnails.

Attributes.

  • rows – How many rows to display per page
  • cols – How many columns to display per page
  • style – Whether to use a table or divs to display the images. Defaults to table because that tends to look better on more sites without having to style.
[pb_favorites_thumbnail_pages]

Shows the page trail for going between pages of favorited images.

Attributes

  • class_main – CSS class of the div wrapped around all of the page links. Defaults to ‘pb-pages’
  • class_sel – CSS class of the current page in the list. Defaults to ‘pb-page-selected’
  • class_unsel – CSS class of all of the non current pages. Defaults to ”
  • max_links – Maximum number of links to show. If there are more links then an ellipse will show in between. The first and last are always shown. Defaults to 7
  • show_single – Whether the page trail is displayed when there’s only one page to show. Defaults to 0
  • next – Text for the next link. Defaults to ‘Next’
  • previous – Text for the previous link. Defaults to ‘Previous’
[pb_favorites_submit]

When on the favorites thumbnail page this shortcode takes the visitor to the submission form. The same shortcode is used on the submission form template as well.

Attributes

  • type – button or link. Defaults to link on this template.
  • class – CSS class applied to the button or link. Defaults to ‘pb-nav pb-favorite pb-submit’
  • text – Text on the link or button. Defaults to ‘Submit Favorites’
[pb_favorites_return]

Return link to the main album.

Attributes

  • type – link or button, defaults to link
  • class – CSS class applied to the button or link. Defaults to ‘pb-nav pb-favorite pb-return’
  • text – Text on the link or button – Defaults to ‘Return to Thumbnails’

No Favorites Template

Message displayed when a visitor goes to either the favorites list or the submission form when they haven’t selected any favorites. This is normally not shown as the default is to not link to either of those pages if there aren’t any favorites in their list.

Submission Form

Once your visitor is ready to submit, this template defines the page they’ll see.

[pb_favorites_field]

Replaced with a field where your visitor can enter information.

Attributes

  • field – What field this is mapped to. Values are name, comments, or custom. More on custom down the page a bit.
  • placeholder – HTML5 placeholder attribute for the field
  • class – CSS class applied to the form element
  • style – CSS style applied to the form element
  • type – What type of field this is. Only used for custom fields. Name is always a text field and comments is always a textarea field.
  • values – Values, only used for custom fields if type is select
  • name – Name used to define a custom field

And a quick example for a custom field. We’re going to add a field that’s a dropdown that our visitor can select where they heard about us. The code would look something like the following.

[pb_favorites_field field="custom" type="select" value="Friend,Email, Web Search, Phonebook" name="where_from"]

This will make a dropdown with Fried, Email, Web Search, and Phonebook as the options. When the form is submitted you’ll see this value next to the name where_from.

[pb_favorites_submit]

The button for your visitors to submit their favorites.

[pb_favorites_return]

Link or button to return to the favorites list.

Thank You Page

Template for you to thank your visitors after submitting their favorites. There aren’t any template specific shortcodes for this page.

Generic Shortcodes

There is also a shortcode that you can use on any page to display the number of shortcodes.

[pb_favorites_count]

Shortcodes

Favorites adds the following shortcodes to WordPress for use in your ProofBuddy templates.

pb_favorite
Button for your client to add or remove an image from their favorites.

pb_favorites_close_form

pb_favorites_count
Display the number of items in the favorites list.

pb_favorites_email

pb_favorites_email_custom

pb_favorites_email_images

pb_favorites_field
Display a field in the favorites submission page.

pb_favorites_open_form

pb_favorites_thumbnails
Display the grid of thumbnails for selected images.

pb_favorites_thumbnails_pages
Display the page trail for the thumbnail grid pages.

pb_view_favorites
Link for your clients to view their current favorites or exit back to the normal view.

 

Download

4 thoughts on “Favorites

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>