Saturday, July 23, 2011

Hook to register JS/CSS libraries in Drupal 7

hook_library()

Registers JavaScript/CSS libraries associated with a module.

Modules implementing this return an array of arrays. The key to each sub-array is the machine readable name of the library. Each library may contain the following items:

  • 'title': The human readable name of the library.
  • 'website': The URL of the library's web site.
  • 'version': A string specifying the version of the library; intentionally not a float because a version like "1.2.3" is not a valid float. Use PHP's version_compare() to compare different versions.
  • 'js': An array of JavaScript elements; each element's key is used as $data argument, each element's value is used as $options array for drupal_add_js(). To add library-specific (not module-specific) JavaScript settings, the key may be skipped, the value must specify 'type' => 'setting', and the actual settings must be contained in a 'data' element of the value.
  • 'css': Like 'js', an array of CSS elements passed to drupal_add_css().
  • 'dependencies': An array of libraries that are required for a library. Each element is an array listing the module and name of another library. Note that all dependencies for each dependent library will also be added when this library is added.

Registered information for a library should contain re-usable data only. Module- or implementation-specific data and integration logic should be added separately.

Return value

An array defining libraries associated with a module.

Usage

If you want to call drupal_add_library() in node add / edit pages, following approaches can be used.

Method 1:

function MODULE1_form_alter(&$form, &$form_state, $form_id) {
if (isset($form['#node_edit_form']) && $form['#node_edit_form') {
drupal_add_library('MODULE', 'LIBRARY');
}
}

This should ensure the library is loaded whenever a node form is displayed.

Method 2:

Using the ‘#attached’ attribute in hook_form_BASE_FORM_ID_alter

function MODULE1_form_node_form_alter(&$form, &$form_state) {
$form['#attached']['library'][] = array('MODULE', 'LIBRARY');
}

If you are modifying, or outputting a form, you can use the #attached attribute, which is described as "allows loading of CSS, Javascript, libraries, or custom types when the form is built".

7 comments:

Viswanathan Karthik said...

any idea how do I extend the hook_library in my module

something like this :

function mymodule_library()
{
....
}

thanks

Nagarajan Lashminarayanan said...

Hi,

In order to extend the hook_library in your module. You can implement the following code..

/**
* Implementation of hook_library
*/
function mymodule_library() {
$libraries['mymodule-lib'] = array(
'title' => 'Mymodule lib',
'website' => 'http://www.mysite.com/products/mylib/',
'version' => '1.0.1a',
'js' => array(
MYMODULE_LIBRARY_PATH .'/mylib.js' => array(),
),
'css' => array(
MYMODULE_LIBRARY_PATH .'/resources/css/mylib.css' => array(
'type' => 'file',
'media' => 'screen',
),
),
);
return $libraries;
}

hyderabadgiftsflowers said...

such a beautiful content. its very informative . thanks for sharing it with us. from - www.hyderabadgiftsflowers.com

chennaicakesdelivery said...

The visit was useful. Content was really very informative. Thanks for sharing.
from - chennaicakesdelivery.com

http://www.chennaiflowers.com said...

Website is very comprehensive.The contents are really good.Thanks for sharing.
from - chennaiflowers.com

Unknown said...





Thanks for sharing, I will bookmark and be back again





PHP Course in Chennai

Sergey said...

For your work you need a themes to make it a file for you to visit this site wordpress protfolio themes