Search code examples
tridiontridion-2011

How to add external JavaScript or CSS files to our Tridion page?

I have an external JavaScript and a CSS file . I am not getting the idea how to add this file to my page. I am using DWT TBBs for both CTs and PTs.

I am writing internal CSS in my page TBB for getting the output for the time being. but I am not getting how to implement JavaScript. Can somebody help me?

Should I make these file as component and render them on my page? Is this the correct way? If yes, please tell me the steps to be followed.

Solution

  • This is a topic for wide discussion, I'll try to outline the various possibilities:

    1. Create CSS & JS as Binary Components, link to these from DWT template
    2. Create CSS & JS as Binary Components, publish to Server as DCP, link with url to binary
    3. Create CSS & JS as Text components, place in page, publish to server, link url to page
    4. Copy CSS & JS to delivery server (not Tridion), link with url to css & js

    Option #1 is the easiest, with quite a few drawbacks.

    • Create Multimedia Components in Tridion with the CSS and JS files you need.
    • Note down the URIs then use something like this in your DWT:
    <link href="tcm:27-2762" rel="stylesheet" type="text/css" />
<script src="tcm:27-2763" type="text/javascript"></script>

    If your template uses the Default Finish Actions Building Block, then Tridion will resolve the references to those binaries and publish it with your page. This has the side-effect that these binaries would be published with ALL pages that use the same template.

    Option #2 requires you to write a Dynamic Component Template, possibly with some code to determine where files get published to. This is more in line with what I normally implement, but at this point in time I would not recommend that you do this. As you grow Tridion knowledge, you'll feel comfortable enough to do this by yourself. Using this option you can then publish the CSS/JS files to a given location, then use references in your DWT that instead of using the TCM URIs (as above) would use the URL that the files get published to.

    Option #3 requires you to create a "code component & template", meaning a simple schema with just one large text field (not rich text) where copy/paste the content of your CSS or JS. Then write a simple component template that will just output the content as is. Something like @@Fields.Code@@. Lastly you create 2 page templates (one with extension .js, the other with extension .css) with only one DW Template:

    <!-- TemplateBeginRepeat name="Components" -->
@@RenderComponentPresentation()@@
<!-- TemplateEndRepeat -->

    Last, and definitely not least (there's many ways to skin this cat) you could just place these CSS/JS files directly on your webserver, and add a link in your DWT to the URLs where these files are available.

    Hope this gives you some options. Remember that including CSS/JS should be done at Page Template Level (ideally in the <head> portion of your page), and not in your Component Template.