How to Add Quick Tagging to Drupal 7 Content

The core Drupal 7 install come with an open tagging feature similar to other content management systems like Wordpress but the process of entering tags is not as intuitive and can even be frustrating.

Thanks to  Drupal being modular, we can make tagging in Drupal easier, with the help of contributed modules. One particular module that can make this possible is the Autocomplete Deluxe module found at https://drupal.org/project/autocomplete_deluxe.

Powered by Jquery UI autocomplete, this module enables autocomplete and autosuggest based on existing tags, and allows one-click removal of tags.

To implement this module and add tags to your Drupal content type, follow these simple steps:

Installation

The fastest way to install the module is through the "Install from a URL" option in Drupal's Module installation window (path:/admin/modules/install).

Grab the URL of the latest release of the module from the project page at https://drupal.org/project/autocomplete_deluxe. As of this writing, the latest release is http://ftp.drupal.org/files/projects/autocomplete_deluxe-7.x-2.0-beta3.t....

Paste the URL into the  "Install from a URL"  field, as shown below:

Drupal Autocomplete Deluxe module install - 1

 Enable the module in the Modules main admin page (path: admin/modules)

Create Taxonomy Vocabulary

If you haven't done so, create a Vocabulary to be used for tags. In this example, we'll use "Resource Tags." (I'm using the tags for a content type called Resource, but you can also simply name the vocabulary as "Tags." Your choice. :) ) 

Drupal add vocabularyFAQ: Don't we need to add terms to this new vocabulary?

It's not really necessary because we will be adding terms on the node creation or editing window, just like any other open tagging system.

Add a tag field to your content type

Creating a vocabulary does not automatically add a tags field to our node editing or creation form. We need to tell Drupal that we're assigning this vocabulary to a content type, and we'll do this by adding a Term Reference field in the content type.

Browse to Structure > Content Types > {YOUR CONTENT TYPE > Manage fields (path: admin/structure/types/manage/{YOUR CONTENT TYPE}/fields

Add a field to contain your tags.

  • Label: Tags (or your choice)
  • Type of data to store: Term Reference
  • Form element to edit the data: Autocomplete Deluxe

See example below:

autocomplete deluxe drupal - add field

Hit "Save."

In the next window (Field Settings), select a Vocabulary for your tags field. In this example, I selected "Resource Tags," the vocabulary we created earlier.

autocomplete-deluxe-drupal-save-settings

Hit "Save field settings."

In the next window, change Number of values from the default ("1") to "Unlimited." This simply tells Drupal that we'll enter an unlimited number of values for this field.

autocomplete-deluxe-drupal-save-settings-final

Hit "Save Settings."

WHEW! We're done with the field, and that's the last step in the installation and setup! We're now ready to add tags with all the autocomplete and Jquery goodness!

Using the Autocomplete Deluxe for Tagging Content

Hopefully, you've successfully installed this module and configured it for use on your content type after following the instructions above. Let's start using the module, shall we?

Adding a new tag

  1. Enter your tag or keyword
  2. Drupal detects it as a new tag, and alerts you with a notification: "The term {TAG HERE} will be added." In the example below, we added a new term, "development," and received the alert as soon as we stopped typing
  3. Click the notification to confirm (see screenshot below)

confirm addDeleting a tag

To delete a tag, click the red "X" link for each tag you want to remove. (See screenshot above) 

Using existing tags

As you enter new tags, Drupal creates new terms for the vocabulary and in time you will have a huge collection of tags. Thanks to the Autocomplete Deluxe, you can conveniently use these existing tags with the autosuggest/autocomplete feature. 

As soon as you click on the tags field, Drupal will show a dropdown of existing tags. You can either select from the list, or just type in an existing tag. Don't worry if you can't remember if a tag is existing or not, since the module will notify you anyway if it sees the the term is new.

autocomplete-deluxe-autosuggest

FAQs

Can these tags be managed (add, delete, edit) from a central location?

YES! These tags are added as terms in your vocabulary. You can manage them as terms in your vocabulary's "List Terms" page, and you can quickly add new tags to your vocabulary from the Taxonomy main page (screenshot below)

vocabulary-manage-tags

I have other questions about using the Autocomplete Deluxe module. Can you help me?

Yes, feel free to post a comment below or contact me @gerrymedia. If you find a bug you can submit an issue at the project page: https://drupal.org/project/autocomplete_deluxe or contact the developer: https://drupal.org/user/512828