Jump to content

AddToHead in 4.0?


Recommended Posts

It can be difficult to adhere to strict standards when dealing with templates and piece-meal code. Often you compromise and have javascript and CSS scattered throughout the finished document.

IP.Board allows you to add content to the document <head> very quickly and simply:
{parse addtohead="/js/someScript.js" type="javascript"}
{parse addtohead="/css/someCSS.css" type="css"}
{parse addtohead="<script>alert('boo')</script>" type="raw"}

The above is from 3.X. How do we do that in 4.0? 
I want to add CSS code to certain Pages templates only. 

Link to comment
Share on other sites

  • 3 weeks later...
        \IPS\Output::i()->jsFiles = array_merge(\IPS\Output::i()->jsFiles, \IPS\Output::i()->js('front_group.js', 'rss', 'front'));
        \IPS\Output::i()->cssFiles = array_merge(\IPS\Output::i()->cssFiles, \IPS\Theme::i()->css('group.css', 'rss', 'front'));

It's not gone, though it no longer supports 'raw'. The method being passed as the second parameter of array_merge here returns an array of fully built URL's to the files, so if you wanted to say load something from google's cdn that should work(untested, but is used that way in core).

That said, you may find it easier to just use the page assets feature with js/css added in the Pages template manager.

(For anyone wondering where the deuce the odd example came from, I pulled it from the index controller of my Feeds application).

Link to comment
Share on other sites

It that something I could place in a Pages template (inside {{ }})? I just tried it and couldn’t see an effect. 

I am trying to add these two files on my server to just one Pages listing template instead of sticking them in a global template. 

<script type="text/javascript" src="/zmodules/justifiedGallery/jquery.justifiedGallery.min.js"></script>
<link type="text/css" rel="stylesheet" href="/zmodules/justifiedGallery/justifiedGallery.min.css">


Link to comment
Share on other sites

That may depend on the value of your theme's setting for 'Javascript include location'. Due to the fact you are working from a template parsed from within a widget, that theme setting may need to be 'Just before </body> tag' instead of 'Inside the <head>' to work, though that is untested, it may simply be that the template parsing for that template is too late in the execution. I've honestly just ended up using the page assets feature for such instead of trying to limit it to one view.

Link to comment
Share on other sites

Come to think of it: I have another site where each Pages database record represents a typeface and that typeface should then be loaded and used as webfont when the record is opened. So I would indeed need a way to add the @font-face declaration to the head from within the specific view of the database. 

If anyone has any idea or working code, I would be interested in that. 

Link to comment
Share on other sites

  • 1 month later...

After a lot of trial and error I managed to activate record-specific header elements in Pages based on Marcher’s lead.

In the theme templates I added a new css file under CMS --> Front --> Custom.

In the Pages record view template I then added:

{{\IPS\Output::i()->cssFiles = array_merge(\IPS\Output::i()->cssFiles, \IPS\Theme::i()->css('custom/something.css', 'cms', 'front'));}}

Now I can add CSS for just this database view or even for specific data from the individual record. Yeah!

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...