Loading external js/css file in a single page controller (in a package)

Permalink
Hey C5-Devs!

I'm struggling on a fairly simple task: I want to load a js and a css file in a single page controller which is in a package.

Mnkras pointed out in a different thread to do the following:
$html = Loader::helper('html');
$this->addHeaderItem($html->css('somecss.css'), 'pkghandle');
$this->addHeaderItem($html->javascript('somejs.js'), 'pkghandle');

http://www.concrete5.org/community/forums/customizing_c5/adding-jav...

I implemented it into the on_start()-method of my single page controller, but the result in the source code is always that c5 tries to load it from the concrete/ directory instead of my package.

Has somebody a hint for me?

Thanks in advance!
Matthias

programmieraffe
 
Remo replied on at Permalink Reply
Remo
That usually happens when c5 can't find your files.

Wrong package handle, different directory name (not css..)
12345j replied on at Permalink Reply
12345j
make sure somecss.css is in the css dir, and likewise for the js.
ScottC replied on at Permalink Reply
ScottC
Sorry I could be TOTALLY wrong here, but what about:
$html = Loader::helper('html');
$this->addHeaderItem($html->css('somecss.css','pkghandle'));
$this->addHeaderItem($html->javascript('somejs.js','pkghandle'));

I think your parameters are slightly off :)

-Scott
WillemAnchor replied on at Permalink Reply
WillemAnchor
yes, note the difference:
$this->addHeaderItem($html->css('somecss.css'), 'pkghandle');

$this->addHeaderItem($html->css('somecss.css','pkghandle'));
Job replied on at Permalink Reply
Job
I had trouble with this when I did a package of mine, I never really got a proper solution:

$this->addHeaderItem(Loader::helper('html')->javascript(BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/' . 'scout_news/single_pages/dashboard/scout_news/js/chosen.jquery.min.js'));
$this->addHeaderItem(Loader::helper('html')->css(BASE_URL . DIR_REL . '/' . DIRNAME_PACKAGES . '/' . 'scout_news/single_pages/dashboard/scout_news/css/chosen.css'));


Messy, but it works.
Mireck78 replied on at Permalink Reply
Mireck78
Thanks Job!!! Same for me. I use a similar workaround to add JavaScript or CSS files to the header that are not in the js or css folder of the package. In this example I load a JavaScript-File from the package library folder:

/*inside block controller*/
public $packageHandle = 'your_package_handle';
public function on_page_view() {
    $html = Loader::helper('html');
     $this->addHeaderItem($html->javascript('/' . DIRNAME_PACKAGES . '/' . $this->packageHandle . '/libraries/yourlibraryhandle/yourscript.js'));        
     $this->addHeaderItem($html->css('/' . DIRNAME_PACKAGES . '/' . $this->packageHandle . '/libraries/yourlibraryhandle/yourstyle.css'));
   }
cherrycake replied on at Permalink Reply
cherrycake
Had major issues with this as well at first. Here's a bit "nicer" way of doing it.

PageTheme::getSiteTheme()->getThemeURL()


That will work from inside all controllers including Page Type Controllers and it will also work for themes residing in packages.

Complete solution (any Controller scope):
$this->addHeaderItem($this->helperObjects['html']->css(PageTheme::getSiteTheme()->getThemeURL().'/somecss.css'));
$this->addHeaderItem($this->helperObjects['html']->js(PageTheme::getSiteTheme()->getThemeURL().'/somejs.js'));