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

StackOverflow https://stackoverflow.com/questions/10555177

  •  07-06-2021
  •  | 
  •  

Question

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.

Was it helpful?

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.

OTHER TIPS

There is a great series of how to articles from Building Blocks that explains this

Check out these links:

  1. http://blog.building-blocks.com/publishing-code-files-from-sdl-tridion
  2. http://blog.building-blocks.com/css-in-sdl-tridion-part-2-handling-image-references
  3. http://blog.building-blocks.com/tridion-tbb-automatically-minify-css-javascript-on-publish

If you want to keep things really simple (but I don't recommend this as it will republish your CSS or JS every time you publish a page). You can store the CSS as a Multimedia Component (and write down its URI) and reference it like this in your DWT Page Layout:

<link rel="stylesheet" href="tcm:1-2-16" />

    or

<script type="text/javascript" src="tcm:1-2-16"></script>

Then use the Default Finish Actions to make sure the binary is published and the links are resolved.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top