How do you include a javascript or CSS file only on a certain article in Joomla?
I have one article which requires the jQuery UI and associated theme. Since this isn't being used on any other pages, I only want it for this particular article. Adding in the necessary <script> and <link rel="stylesheet"> tags in the HTML of the article doesn't work, since they get stripped out when saved.
If there was a method to include certain files, or to stop the stripping of those tags, that'd be really good.
How do you include a javascript or CSS file only on a certain article in Joomla?
I have one article which requires the jQuery UI and associated theme. Since this isn't being used on any other pages, I only want it for this particular article. Adding in the necessary <script> and <link rel="stylesheet"> tags in the HTML of the article doesn't work, since they get stripped out when saved.
If there was a method to include certain files, or to stop the stripping of those tags, that'd be really good.
Share Improve this question asked Apr 17, 2009 at 1:21 nickfnickf 547k199 gold badges658 silver badges727 bronze badges 1- Duplicate: stackoverflow./questions/1573831/… – Casebash Commented Apr 7, 2010 at 1:41
3 Answers
Reset to default 7I ended up creating a plugin to do this for a site I maintain; I may release the code for it, but it's pretty simple to explain. You build a content plugin that searches for tags like {css path/to/a/css/file.css}, strips them out, then adds the files to the HTML <head>. Once you have the name of the CSS or JS file you want to include, here is the code you use to get it in the header:
$document =& JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'path/to/style.css');
$document->addScript(JURI::base() . 'path/to/script.js');
For this job use the Joomla plugin "Sourcerer". You can put PHP and Javascript in articles with it and still have time left to bake a pie! I just added the code to the article and it worked like a charm. Beware of evil editors that will strip parts of the code. Html Entities are your friend - you can use them. Sample code:
{source}<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet( JURI::root( true ).'/example.css' );
$doc->addCustomTag( '<script src="/example.js" type="text/javascript"></script>' );
$doc->addScript( JURI::root( true ).'/example.js' );
?>{/source}
Set your editor to Editor - None, and use any <script> and <style> that you want.
Don't forget that you should avoid editing that article using TinyMCE or other editors later.