5.0.3 Overview
Insert any JavaScript/CSS/Any tag into the document head based on ItemID (menu item) or by using the content plugin tag options.
Similar plugins exist, but they are either limited in scope, or have terrible configuration interfaces. HeadTag aims to be an all-in-one solution to provide the ability to add the following types of tags to the document:
- JavaScript source files
- JavaScript Declarations
- Linked StyleSheet (CSS) files
- Style Declarations
- Custom tags (of any type)
The plugin can be used in two ways:
- By using the plugin configuration to designate tags to be inserted by specific menu item, access level, or user group.
- By plugin tags inserted into content items, descriptions or modules (which process content plugins).
Installation
- Download HeadTag from the RicheyWeb download page.
- This page will remain unlinked, as the link may change in the future. Visit http://www.richeyweb.com and use the search feature - search for "HeadTag".
- In Joomla /administrator, go to the "Extensions" menu, the "Manage" sub-menu, and the "Install" sub-menu.
- Select the "Upload Package File" tab
- Press the "Choose File" button to browse your system and locate the plugin file you downloaded
- Press the "Upload & Install" button
At this point, the extension is installed but not enabled. You can find the plugin by going to the Extensions menu and selecting "Plugins". When in the plugin manager, search for "HeadTag".
Configuration
Each tab in the plugin configuration allows a different method of selecting which pages tags will appear. Selecting script and stylesheet types enables an input field for the file URI. Selecting either declaration type or the custom tag type enables a textarea where you can enter your declaration or custom tag data.
Using the content plugin tags, you may inject scripts and declarations into articles or any other area where Joomla processes content tags.
Here is the syntax for the plugin tag usage.
{headtag:scriptdeclaration}console.log('your javascript here');{/headtag}
{headtag:style}/path/to/your/stylesheet.css{/headtag}
{headtag:styledeclaration}#elementid { background-color:#404c88; }{/headtag}
{headtag:customtag}<!-- this goes in the head -->{/headtag}
Your declarations and custom tags may span multiple lines.
You may add user group and access level parameters to the tags in order to restrict the audience. For example:
{headtag:script usergroup='1,2,3'}/path/to/your/script.js{/headtag}
{headtag:script accesslevel='1,2,3'}/path/to/your/script.js{/headtag}
