| 7 common.inc | drupal_add_html_head($data = NULL, $key = NULL) |
| 8 common.inc | drupal_add_html_head($data = NULL, $key = NULL) |
Adds output to the HEAD tag of the HTML page.
This function can be called as long the headers aren't sent. Pass no arguments (or NULL for both) to retrieve the currently stored elements.
Parameters
$data: A renderable array. If the '#type' key is not set then 'html_tag' will be added as the default '#type'.
$key: A unique string key to allow implementations of hook_html_head_alter() to identify the element in $data. Required if $data is not NULL.
Return value
An array of all stored HEAD elements.
See also
7 calls to drupal_add_html_head()
File
- includes/
common.inc, line 290 - Common functions that many Drupal modules will need to reference.
Code
function drupal_add_html_head($data = NULL, $key = NULL) {
$stored_head = &drupal_static(__FUNCTION__);
if (!isset($stored_head)) {
// Make sure the defaults, including Content-Type, come first.
$stored_head = _drupal_default_html_head();
}
if (isset($data) && isset($key)) {
if (!isset($data['#type'])) {
$data['#type'] = 'html_tag';
}
$stored_head[$key] = $data;
}
return $stored_head;
}
Login or register to post comments
Comments
An example, for those who are
An example, for those who are a bit confused as to the change from Drupal 6 to 7. Here's how I added the
<link>attribute for Google's Font API inclusion to a Drupal 7 site:<?php// First, we must set up an array
$element = array(
'#tag' => 'link', // The #tag is the html tag - <link />
'#attributes' => array( // Set up an array of attributes inside the tag
'href' => 'http://fonts.googleapis.com/css?family=Cardo&subset=latin',
'rel' => 'stylesheet',
'type' => 'text/css',
),
);
drupal_add_html_head($element, 'google_font_cardo');
?>
This will output the following HTML:
<link href="http://fonts.googleapis.com/css?family=Cardo&subset=latin" rel="stylesheet" type="text/css" />In you want to add some raw markup
you can use the markup type. For example, adding some jquery tmpl templates:
<?php$inline_script = <<<EOL
<script id="tp1" type="text/x-jquery-tmpl"><li>\${Name}</li></script>
<script id="tp2" type="text/x-jquery-tmpl"><li>\${date}</li></script>
EOL;
$element = array(
'#type' => 'markup',
'#markup' => $inline_script,
);
drupal_add_html_head($element, 'jquery-tmpl');
?>
THEMERS: to accomplish this cleanly in the theme layer
Here is an example for adding the IE meta tag to force the rendering engine with some chrome frame love thrown in:
Goal is to get this meta tag in the header of your theme:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Use the theme_preprocess_html hook, so add this snippet to your template.php file:
/**
* Preprocesses the wrapping HTML.
*
* @param array &$variables
* Template variables.
*/
function YOUR_THEME_NAME_preprocess_html(&$vars) {
// Setup IE meta tag to force IE rendering mode
$meta_ie_render_engine = array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'content' => 'IE=edge,chrome=1',
'http-equiv' => 'X-UA-Compatible',
)
);
// Add header meta tag for IE to head
drupal_add_html_head($meta_ie_render_engine, 'meta_ie_render_engine');
}
In some cases IE will ignore
In some cases IE will ignore this rendering mode directive unless it's the first tag to appear after the opening head tag. This can be achieved by specifying a very low weight property as follows:
$meta_ie_render_engine = array('#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'http-equiv' => 'X-UA-Compatible',
'content' => 'IE=edge,chrome=1',
),
'#weight' => '-99999',
);
A quick way for adding a
A quick way for adding a specific opengraph image from your nodes is by adding this to the relevant node.tpl.php.
<?php$imgpath = image_style_url('YOUR_STYLE', $YOUR_FIELD[0]['uri']);
$element = array(
'#tag' => 'meta',
'#attributes' => array(
'property' => 'og:image',
'content' => $imgpath,
),
);
drupal_add_html_head($element, 'og_image');
?>
conditional comments
This all seems like a backward decision for me. I'm trying to add the conditional comments for IE, and I think there should be a way just to add the and tags into page.tpl.php.
Is there a way to get the setting to that as per what it was in drupal 6?
Maybe but might not work
You can put it in the page.tpl.php but it wont work for ie you can see this in the ie developer tools.
It really needs to be rendered at a higher level and called from the htacess file or in the template.php file.
Google+ Page Badge in Drupal7 doesn't work
This code is what I want to include into head
-------
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
---------
So to do that i added this code into the template.php file in sites/all/themes/themename
----------
$element = array(
'#tag' => 'link', // The #tag is the html tag - <link />
'#attributes' => array( // Set up an array of attributes inside the tag
'href' => 'https://plus.google.com/102340225600622234211',
'rel' => 'publisher',
),
);
drupal_add_html_head($element, 'direct_connect');
$code = "window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement(\"script\");
po.type = \"text/javascript\"; po.async = true;po.src = \"https://apis.google.com/js/plusone.js\";
var s = document.getElementsByTagName(\"script\")[0];
s.parentNode.insertBefore(po, s);
})();";
$element = array(
'#tag' => 'script', // The #tag is the html tag - <script />
'#prefix' => '<!-- Place this tag in the <head> of your document -->',
'#suffix' => '',
'#value_prefix' => '',
'#value'=>$code,
'#value_suffix' => '',
'#attributes' => array(// Set up an array of attributes inside the tag
'type' => 'text/javascript',
),
);
drupal_add_html_head($element, 'Google+_page_link');
-------
And then I added into a block the following code but it doesn't work
-------
<!-- Place this tag where you want the badge to render --><g:plus href="https://plus.google.com/102340225600622234211" width="300" height="131" theme="light"></g:plus>
-------
Any idea why isn't working?
The code in web becomes
________
INTO HEAD
<!-- Place this tag in the <head> of your document --><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script src="https://apis.google.com/_/apps-static/_/js/gapi/gcm_ppb,googleapis_client,plusone/rt=j/ver=NZiw-9ZeYaE.es./sv=1/am=!mAdgFnmJxQOIii6qTQ/d=1/cb=gapi.loaded0" async=""></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">window.___gcfg = {lang: 'es'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<link href="https://plus.google.com/102340225600622234211" rel="publisher">
INTO THE BLOCK
<!-- Place this tag where you want the badge to render --><p><plus height="131" href="https://plus.google.com/102340225600622234211" theme="light" width="300"></plus></p>
_____________
Any idea?
Random background-image in body tag
Redrawn comment.