One of the most frustrating things about expressionengine for me is the fact I have to use these huge if elseif else code blocks to load the correct css and javascript for a page.
With the development of 2.4.0 a hook was finally added that I could tap into to make a html manager of sorts which would handle the doctype, language, title, meta data, links, css, javascript, etc. It allows me to change the title or add css/javascript to a page from any template anywhere in the site. I put this functionality into my own personal framework a few years ago and it makes development a lot faster. For it to work, all you have to do is provide the data that goes between the opening and closing body tags. This module will create all the other tags automatically on output (including the body tags).
Is this something people would use? I don’t mind releasing the code and supporting it if people would use it.
Examples of use:
{exp:html doctype="html5" lang="en" setting:css-path="{site_url}assets/css" setting:js-path="{site_url}assets/js"}
The above code would go at the beginning of your header template. Doctype options are html5, html-strict, html-transitional, xhtml-strict, xhtml-transitional.
{exp:html:head title="Part 1" title-separator=" | " title-order="reverse"}
{exp:html:head title="Part 2"}
{exp:html:head type="title" data="Part 3"}
The above code sets the page title, title separator and the title order. This is designed to allow for easy generation of titles. Each title that is added to a page is appended to the last. For example, the above would output: “Part 1 | Part 2 | Part 3” as the page title. If you would like to show “Part 3” first (like I do), this is where the title-order comes in. Using title-order=“reverse” would generate a page title of “Part 3 | Part 2 | Part 1”. Hope that was clear enough.
{exp:html:head title="Testing" css="home"}
{exp:html:head css:1="home" css:2="home_2" css:3="home_3"}
The above code sets the page title and css in one tag to reduce the amount of redundant typing. The second tag allows for multiple css files to be loaded. CSS is loaded based on the setting ‘css-path’. The css extension should not be added since it will automatically be added for you (I will probably put some code in there to allow custom extensions etc.).
{exp:html:head js="nav" jquery="true"}
The above code would load the javascript file and insert jquery from a cdn (this will be set using the setting tag).
I am wanting to implement something like:
{exp:html:head js="jquery.document.ready"}
//js here, this would be added to a $(document).ready(function() {})); code block dynamically generated
{/exp:html:head}
Any ideas on making that better?
{exp:html:body type="event" event="onload" data="map_init();"}
{exp:html:body event:onload="map_init();"}
Or…
{exp:html:body event="onload"}
map_init(); blah blah blah;
{/exp:html:body}
The above is currently being implemented, but is pretty straightforward. You can easily add events to the body tag. I know this doesn’t really matter much anymore due to jquery document ready event but it’s there just in case.
Eventually I will add the ability to minify css and javascript, combining them into single files to reduce http requests. I have this implemented in my personal framework, but porting it to EE won’t be the easiest thing. I will have to research this more to do it effectively and efficiently.
Questions or comments? Does this exist somewhere already?
