Plugin: Simple Header (an easy way to add a "head" tag and contents to your site)
Development and Programming
Hi all,
I was a bit sick of having to keep writing out the CSS and Javascript links in my “head” tag, so I built this little plugin. Yes I know that just makes me very very lazy, but this also gives me a nice consistent way to produce the “head” tag.
This plugin gives you a quick and easy way to create the HTML “head” tag, with a title, multiple CSS, and multiple JS files.
You can also include extra information (i.e. meta data, IE specific CSS, etc) between the simple_header tags. Whilst it hasn’t been tested with the LG Better Meta ‘template’ tag, there is no reason it shouldn’t work (using the Advanced usage).
(note that the Javascript examples below don’t actually output as “scrip*t”… they output properly… but they kept getting removed on this forum, so I added in the *’s)
BASIC USAGE:
{exp:simple_header title="My page title" template_group="common" css="css_reset|css_site" javascript="js_jquery|js_site"}This would output something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page title</title>
<link rel="stylesheet" type="text/css" media="all" href="http://www.mysite.com/?css=common/css_reset.v.1232565733" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.mysite.com/?css=common/css_site.v.1232565740" />
<s*c*r*i*p*t language="javascript" type="text/javascript" src="http://www.mysite.com/common/js_jquery/">[removed]
<s*c*r*i*p*t language="javascript" type="text/javascript" src="http://www.mysite.com/common/js_site/">[removed]
</head>ADVANCED USAGE:
{exp:simple_header title="My page title" template_group="common" css="css_reset|css_site" javascript="js_jquery|js_site"}
<meta name="author" content="Blah" />
<meta name="description" content="Blah" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet=common/css_ie6_fix}" />
<![endif]-->
{/exp:simple_header}This would output something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page title</title>
<link rel="stylesheet" type="text/css" media="all" href="http://www.mysite.com/?css=common/css_reset.v.1232565733" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.mysite.com/?css=common/css_site.v.1232565740" />
<s*c*r*i*p*t language="javascript" type="text/javascript" src="http://www.mysite.com/common/js_jquery/">[removed]
<s*c*r*i*p*t language="javascript" type="text/javascript" src="http://www.mysite.com/common/js_site/">[removed]
<meta name="author" content="Blah" />
<meta name="description" content="Blah" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="http://www.mysite.com/?css=common/css_ie6_fix.v.1232565761" />
<![endif]-->
</head>PARAMETERS:
The tag has four parameters. Note that none are required:
title - Simply adds the text to the normal HTML “title” tag.
template_group - This will add the template_group to ALL the items in the ‘css’ and ‘javascript’ parameters. Do not use this if you do not use the same template group for all your css and javascript files.
css - Add in your css templates or files seperated by a pipe - i.e. “|”. If used with the ‘template_group’ parameter, then just enter the template name(s). If used without the ‘template_group’ parameter, you can enter in either a template group/template, or specify the directory of a physical CSS file. Note you do not need to add in the site URL.
javascript - Works exactly the same way as the ‘css’ parameter, but for javascript.
SPECIAL CSS FEATURE:
Okay, this gets a little more complicated. Because you use CSS for different types of media (i.e. ‘all’, ‘screen’, ‘print’, etc), you can also set each ‘css’ parameter to show in for any media types:
To do this, add a “?” after each template name, followed by the media type you want. By default (i.e. if no media is set) then it defaults to media “all”.
For example:
{exp:simple_header ... css="css_reset|css_site?screen|css_print?print" ... }This would output the following:
<link rel="stylesheet" type="text/css" media="all" href="http://www.mysite.com/?css=common/css_reset.v.1232565733" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.mysite.com/?css=common/css_site.v.1232565740" />
<link rel="stylesheet" type="text/css" media="print" href="http://www.mysite.com/?css=common/css_print.v.1232561234" />Enjoy!
Hiya,
Looks like a really great idea this one. What about DOCTYPE though? 😉
Nah seriously though a nice idea, thanks for sharing.
Best wishes,
Mark
Hi Mark… yep, was going to include the DocType, but that sits above the “<html>” tag, which I didn’t want to include (as this then leads to how do you end the tag, etc).
There is a slight issue with this plugin… if you use DocType of “strict”, I don’t think it allows the ‘language’ parameter on the ‘javascript’ tag. I haven’t really catered for this at the moment.
It might be worth adding in a ‘doctype’ parameter with two options - ‘strict’ and ‘transitional’.
Any other suggestions are welcome!
😊