Adding to Page <head></head>
bchoc - November 7, 2007 - 01:52
Is there a way, without modifying anything which really should be left unmodified, to insert arbitrary code in the HTML section of pages?
User login
Contributor links
- Community initiatives
- Queues
- Play patch bingo!
- Play bug bingo!
- Mailing list archives
- Drupal.org webmasters
- Drupal.org server administrato
rs - Drupal.org CVS applications
- Web links
...in the HTML <head></head>
...in the HTML
<head></head>section of pages?(Sorry I missed the omission-by-filter.)
You don't say what you want to add
You can always edit the themes page.tpl.php file, For js files you can use drupal_add_js() and for css files drupal_add_css(). Those are normally used from within a module.
Well, I am trying to appease
Well, I am trying to appease the ICRA which involves inserting
<meta ...>and<link ...>tags in the html header of each page. I had no luck modifying the page.tpl.php file to include this data, which simply might be the wrong approach.=-=
page.tpl.php is the only place
<head></head>is calledadd it again and clear browser and cache tables in the DB.
Static only?
That sounds like it would be static only.
I had been wondering, too, how to add dynamic <link> tags - i.e., dependent on content. For instance a link tag to the home page (except on the home page), link to author, links to next and previous on multi-page articles or lists.
These would need something similar to drupal_add_css(), maybe "drupal_add_link()"? Doesn't something like that exist?
If there's no mechanism for that yet I'll have to create it because I definitely need those link tags! Many browsers now support them for navigation, and they increase accessibility.
drupal_add_head()
Isn't there a function called 'drupal_set_head()' or 'drupal_add_head()'?
Dave
My site: http://www.unitorganizer.com/myblog
Found it all!
Sorry I'm still getting used to Drupal and occasionally getting lost ;)
I found a page for common.inc which lists four (somewhat) related functions:
While that solves my problem of adding <link> tags, I'm surprised there doesn't seem to be a drupal_add_meta() - which I would assume to be in the same location and similarly-named (and which I might want to use as well). And no way to inject an 'arbitrary' tag into the <head> section - or at least none apparent to me.
Edit:
Confused by inconsistent naming - I now found the "missing link":
drupal_set_html_head Add output to the head tag of the HTML page. This function can be called as long the headers aren't sent.
That should cover it then. :)
I've search and searched ...
Can someone share how the've added external .js files.
The last thing I tried was adding the following line in the template.php file:
drupal_add_js(drupal_get_path('module','custom').'/custom.js');
... and it doesn't work. :(
Thanks!
Look up drupal_add_js()
The syntax you give won't work.
Follow the link to the function in my reply above to see what it does and the proper syntax. Alternatively you could use drupal_add_link() (again, follow the link to see the documentation).
drupal_get_js & drupal_add_js example
Here's an example/explanation of what I did to add an external javascript file:
File: template.php
Function: _phptemplate_variables($hook, $vars = array())
Where: Inside the 'page' case of the $hook switch I added the following:
$vars['scripts'] = drupal_get_js('header',drupal_add_js(drupal_get_path('module','myModuleName').'/myJavascriptName.js','module'));
Explanation: (inside out of course)
1. drupal_get_path('module','myModuleName')
- this searches for the myModuleName module in all allowable locations
by calling drupal_get_filename (http://api.drupal.org/api/function/drupal_get_filename/5)
and returns the path
2. drupal_add_js(#1_above,'module')
- this adds the javascript file to the 'module' index of the master javascript array
3. drupal_get_js('header',#2_above)
- this themes (adds HTML around) each javascript file in the master javascript array
- 'header' tells it to appropriately theme it for the area
4. $vars['scripts']
- the themed output from #3_above is stored here
- this is a default phptemplate structure and is used in .tpl.php files as $scripts
- I print $scripts in between inside my page.tpl.php
I left out explaining all the other available options for each function, but I think this is a
good place to start understanding how to use these functions. You can look at the actual
API docs (which lack examples) to further your learning.
e.
NOTE:
If your .js file is under your myTheme directory, (which makes sense if it is specific to
the theme) then simply change 'module' to 'theme' in both places in the example.
drupal_set_html_head
Since you explain so nicely i can't help but ask:
Suppose i'd like to add a
<script>...</script>to the head of a specific content type, in addition to the head sent by drupal and only for that content type, how/where would I use drupal_set_html_head ? (for i don't understand what "This function can be called as long the headers aren't sent" means.UPDATE: so, answering myself, this has nothing to do with drupal_set_html_head. the way i solved this is by using this idea :
Add to page.tpl.php, just after
<?php print $scripts ?>, something like:<?php if ( $node->type == 'your_content_type_name' ) : ?><?php print '<script> ....... </script>'; ?>
<?php endif; ?>
And there you go...
PHP newbies notice: when using a window.onload function (say for using certain CurvyCorners settings for the entire site, plus extra code on specific content types only), the page will only load the last function called - so you should add ALL code, not only the extra needed code. The result works - but the source shows window.onload twice. i'm not sure if that has any effect.
drupal_set_html_head better than coding into page.tpl.php file
....this has nothing to do with drupal_set_html_head. the way i solved this is by using this idea : Add to page.tpl.php...
Your original idea of using drupal_set_html_head is the better way to do it.
I have a bazillion page-*.tpl.php files so it's easier to make changes in a single file (template.php).
Here's how I added some code to the head without touching my page-*.tpl.php files.
<?phpfunction _phptemplate_variables($hook, $vars = array()) {
if ($hook == 'page') {
$vars['head'] = drupal_set_html_head('<script> ... your code ...</script>');
}
return $vars;
}
?>
For the person asking about spitting out different $head code based on node types, you could use code like this in your template.php:
<?phpfunction _phptemplate_variables($hook, $vars = array()) {
if ($hook == 'node') {
if ($node->type == 'blog') {
$vars['head'] = drupal_set_html_head('<script> ... your blog node type specific code ...</script>');
} elseif ($node->type == 'story') {
$vars['head'] = drupal_set_html_head('<script> ... your story node type specific code ...</script>');
}
}
return $vars;
}
?>
Why not just use $vars['scripts']?
I tried the above method, which to me does look more "Drupal-ish", but just couldn't seem to get it to work, even after removing the conditional statements. Should I be using a different preprocess?
<?phpfunction _phptemplate_variables($hook, $vars = array()) {
$vars['head'] = drupal_set_html_head('<script> ... your code ...</script>');
return $vars;
}
?>
In the end, I ended up using the page preprocess. If someone can point out where I went wrong, it would be greatly appreciated.
<?phpfunction mythemename_preprocess_page(&$vars, $hook) {
$vars['scripts'] .= '<script type="text/javascript">... your code ...</script>';
}
?>
This appends the script(s) to the end of the list of scripts.
I'd really like to get the code posted by Gregory Go working in an upcoming D6 site as it requires that I use a dynamically-generated remote JS file which I can't figure out how to include using drupal_add_js (it prepends the remote URI with a "/").
Actually, what I really want is to get around knowing how to add whatever I want into the block using template.php. This is why I want to figure out how to use drupal_set_html_head().
Semi-eureka moment
I guess sometimes you just have to step away for a moment...I tried this:
<?phpfunction mytheme_preprocess_page(&$vars, $hook) {
$vars['head'] = drupal_set_html_head('... your code ...');
return $vars;
}
?>
...and it worked. The "problem" I have with this is that it puts whatever I put in there before all the other items (i.e. CSS and JS files listed in *.info file). What I am trying to do is to get it to be listed after all the items.
Yeah, I didn't realize until
Yeah, I didn't realize until after my "moment" that this was for D5 :P
NOTE: my "solution" above is for D6
Thanks for the discovery,
Thanks for the discovery, that saved me a lot of time :)
Is it possible to make a module out of this?
Would it be possible to make a module out of this code?
Unfortunately, I don't understand much about changing code in Drupal, or I'd offer to help.
I don't imagine it would be that difficult for someone who knew what they were doing to make a module that simply provided a text box for inputting html or js code. Actually the Site Information page (yoursite.com/admin/settings/site-information) offers a text field like this for changing the site name, which then gets placed in the section.
Would somebody be willing to help us non-coders out?
Thanks!
Similar post - http://drupal.org/node/175551
Nathan
done
done :-)
http://drupal.org/project/inject
Release coming in about one hour...
I was curious why the head
I was curious why the head info has to be inserted via php as opposed to manually have it all in the page.tpl I would like to just add it all myself or is that a bad idea ?
Depends
Basically the reason we include the other variables is to allow modules to modify the head portion of our page should they have the need.
However if you want to plunk the html code for a header right in your page.tpl.php there's no particular coding reason why you can't. Note that if you plan on creating multiple sites or making a career out of web design, you might as well use all of the features of the CMS you are using. You can create a simple module that does exactly the same thing as adding the header to the template, and is much more portable.
If you were going to create a multi-site installation of Drupal and use it to power hundreds of sites, each with their own theme, cutting and pasting into a few hundred themes gets a bit annoying, putting the code in a module means you can fix it on all of the sites at the same time.
Dave
My site: http://www.unitorganizer.com/myblog
i see, one reason for
i see, one reason for wanting to do this is that I wanted to remove some items i have no need for like print.css and also add js or additional meta is this relativity easy to do ?
Yes
Yeah see this comment:
http://drupal.org/node/189985#comment-623061
Dave
My site: http://www.unitorganizer.com/myblog
That page is the reason why
That page is the reason why hand coding the head is so much better and easier, drupal's way is too complicated, why does everything have to include its own css file ? I see about 10 different stylesheets in the head, and several .js files too much clutter.
It's called modularity
And is one of the things that contributes to Drupal's flexability. It makes it easy for a module to add it's own css and javascript and if your theme uses the variables in for page.tpl.php in the head section no need to hand edit the template.
=-=
hand coding the head would mean that everything in the head is called on every page, which can waste resources when stuff is being called that isn't needed.
I agree, a web designer
I agree, a web designer understands more about template needs then programmers, a designer needs complete control over html and css, meaning any css in the template was put there by the designer and not by the cms.
Meta Tags
There is a Meta Tags module which will take care of some of that. Beyond that, how do you know your users aren't going to try to print the page? If you're concerned about the number of CSS files, use the CSS Compression option under "Performance."
Nancy W.
Drupal Cookbook (for New Drupallers)
Adding Hidden Design or How To notes in your database