1. Introduction
  2. Installing the plug-in
  3. Contextual help
  4. Tagging a new photo
    1. Understanding the basics
    2. Using the photo tag editor
    3. Advanced settings
    4. Displaying the tagged photo
  5. Customize your tags
  6. Using the default styles
  7. Plug-in settings
  8. Multi-user support
  9. Getting more Help

I- Introduction

WP-FotoTag is a WordPress Plug-in to add annotations with special and custom effects to your photos. The plug-in can function on any image in your WordPress blog. You can also create your own styles and effects for the annotations.

What FotoTag can do?

  • Manage your tagged photos
  • A tool to visually tag a photo
  • Choose a style for your tags
  • An API to create your own style

II- Installing the plug-in

The downloaded package has two folders:

  • fototag : This is the plug-in folder
  • documentation : You'll find user and developer documentation files here

To install the plug-in, copy the FotoTag folder to your wp-content/plugins folder. Then access, through your Admin panel, the plug-ins section. You should find the FotoTag plug-in, but it's still inactive. Click Activate to install the plug-in.

The plug-in will make changes to the WordPress Database and install the default styles. It's recommended that you precede a Database backup before installing the plug-in. If your WordPress blog fail to load after installing the plug-in, do the following:

  • Remove the fototag folder from your plug-ins directory
  • Try to access your blog again, if it doesn't load
  • Use your database backup to fix possible errors

FotoTag doesn't change your existing database tables and doesn't remove or edit any existing file. However, it's possible that your database crush while FotoTag installs its' own tables. Try to re-install the plug-in another time and if the problem reappears, please add a comment.

III- Contextual help

FotoTag plug-in has a contextual help in every page. The contextual help menu button can be found on the top and provides useful information and hints for the current page. The Contextual help is not meant to be extensive, but to hint especially about fields in the page.

IV- Tagging a new photo

1- Understanding the basics

This section explains how FotoTag works. It'll help you later in tagging photos. You can tag any photo that displays in your WordPress blog and not necessarily photos in a post or a page. Any photo (header, footer, slider, banner...) can be tagged with the assigned effect.

First, you need to have a photo URL. The photo can be hosted locally or remotely. Each photo will be assigned a unique name and id . The name field was put for convenience since the “id" can be assigned by someone else and can be complicated or insignificant. However, if you are the one who assigns the name and id they should be strictly the same. This decreases confusion.

When your blog loads, FotoTag browses all the page photos with a fototag class and extracts its' id . If the id exists in the database, it loads the tags. The image can be anywhere in the page, you can also tag the same URL two or more times (using two different ids and names).

The following sections are going to guide you step by step, so don't worry if you hadn't understood the process quite well right now.

It's important that you provide a unique ID for your image. That is, no other element should share that ID with the image; Otherwise there will be a conflict and the plug-in won't be able to recognize the right element.

2- Using the photo tag editor

FotoTag provides an easy to use tags editor. The editor is loaded when tagging a new photo or editing an old photo tags. So let's get an idea on each part of our new photo page. To access that page, you can either click "new photo" in the FotoTag menu or edit an existing photo.

The first part is the URL and Style . The image URL can refer to a local or remote photo. Select a Style from what's available on the list box. Then click on the display button. Make sure you enter a correct URL , otherwise you'll need to reload the page and start again.

The photo is displayed full size. FotoTag doesn't have a limitation on photos size and the tags aren't affected if photo is resized in your blog. The photo tag editor is easy to use and explains itself. To add a tag, you need to select a portion of the photo and enter a name. You may need to enter more parameters depending on the style you choose.

In the case you choose an advanced style, you may need to enter more parameters. A form will display, usually with default values and you can modify them.

As mentioned earlier, each photo must have a unique name and id . It's recommended that you assign the same name and id for your photos. The name field is put for your convenience, in case you aren't the one who assigns the id and it's complicated or quite long.

3- Advanced settings

You may want to disable FotoTag in an already added photo without deleting it (and thus losing the tags) or changing the HTML code (a little bit awkward). You may also want to enabled editing for that particular photo, only. FotoTag allows you to chose which WordPress users can have access to edit the photo. More about Multi-user usage later in the documentation.

4- Displaying the tagged photo

Now that you have tagged your image with the appropriate style, it's time that you get it up and running on your blog. It's important to note that while FotoTag can run in any image in your WordPress blog pages and posts, it might not be able to run with some sliders and other JavaScript code that interacts with the image.

We only guarantee that FotoTag runs on any image that JavaScript doesn't interact with. It's possible that you run FotoTag on a slider, however, there is a possibility for code conflicts and certainly we can't account for all scripts on the web. We invite you, however, to report to us any conflict that you might find.

The image ID

When you tagged your image, you entered an image ID and a name. The image ID is the key to link between the image and the tags. You'll also need to add a class fototag to your image tag, so that the FotoTag script can recognize it.


You can create a new blog post and page and edit the HTML code so that you enable FotoTag. You can also edit any image (through your template source or widgets) tag and enable FotoTag for it.

For simplicity, FotoTag generates the required HTML code for the script to function correctly.

V- Customize your tags

We can't provide all the possible styles that users might need. Some may require using FotoTag for an e-commerce website, while some want just to have a basic annotation style. Our solution was to provide an API and an interface so that everyone can design his own tags.

FotoTag has powerful APIs that can enable you to customize the look and feel of your tags and add advanced functionalities as well. That's made possible especially with the data feature. You can save data with each tag that can be loaded and used when needed.

A separate and detailed documentation with samples was put to help developers get started and create their own styles.

VI- Using the default styles

FotoTag comes with a set of pre-defined styles. Each style can be customized when adding tags with parameters. To better understand how a style work and what parameters are needed for, the FotoTag website has a demo and a usage help for each style.

The source code for each style is available and can be edited, so you can tweak the style for your own need. As of this version, FotoTag supports 7 styles.

VII- Plug-in settings

FotoTag has a settings page to modify a few settings. The settings inlucde: The edit button, user permissions, and disabling photo tag.

User Permissions

User permissions allows for multi-user usage of FotoTag. By default, FotoTag (Administration panel) is not accessible, but only to the Administrator role. The user permissions allows a specific WordPress role to one or more of the functionalities. Right now, the capabilities that you can customize:

  • Create new: Capability to create a new photo and annotate it.
  • Edit/Delete tags: Capability to edit and delete tags in an already existing image.
  • Dashboard Access: Capability to only access the dashboard (Cannot delete or edit).
  • Styles Access: Capability to view, add, edit and delete styles.

More about Multi-user support in the next section.

The Edit button

When you enable Mutli-user support, it's always useful to add an edit button in the top of the photo. Like that, users click the button and are automatically redirected to the edit photo page. When the finish editing and submit the updated version, they'll be redirected back to the original page.

Disable FotoTag

This option permit the disabling of FotoTag without the need to disable the plug-in or delete the data.

VIII- Multi-user support

FotoTag supports multiple users. It means that users registred in the blog, other than you, can also add and edit tagged photos. You can enable photo editing for a specific kind of users, but you can also limit editing to a specific photo. This guide is not meant to be extensive, it'll just get you through the basic. However, the better you informed about WordPress roles, the easier you'll be able to understand how FotoTag manages multiple users.

Understanding roles

When you create additional user accounts on your blog, you can then assign a user to a role, there are five default roles subscriber, contributor, editor and administrator. Each has an increasing level of permission to perform actions (known as capabilities) on your site.

On FotoTag, you can assign permissions to a any role on your WordPress blog. As there are only five roles by default, you may want to create more roles. To create more roles, I'll recommand the Capability Manager plug-in.

FotoTag and roles

Once you create new roles, you can assign permissions to them. The roles will appear in the option box and you'll be able to select any. Remember that Administrator still has all the permissions and that no one other than the administrator can access the settings page or the Advanced settings of a photo.

In this configuration, I created a user role called "imagger". Then, I editted some users role and changed it to "imagger". You can edit the user role in the "Edit user" page. The users belonging to that role will now be able to create new photos and tag them, but not to edit photos.

IX- Getting more help

I hope that you found this documentation useful, if this wasn't the case you still have more options.

  • Developer documentation: Are you looking for more developer oriented help? Check out the developer documentation.
  • F.A.Q: Check the F.A.Q in the CodeCanyon page for the most asked questions.
  • Comment: Post a comment in the CodeCanyon page.
  • Bug: If you think you found a bug, email me with this Email form.