by

Creating a CSS or JS Razor Component Template for multimedia components in Tridion

Today was a rough day. I’ve got a new Tridion implementation that I’m working with, and I was feeling a little defeated by DD4T. It’s no beef on the framework, it’s just a lot to wrap my head around. So I decided to do something that I thought should be an easy win: Create a component template for the CSS and JavaScript.

Then I realized that the last time I wrote a Razor CT for this, the CSS and JavaScript were managed as code components, not multimedia components. So… crud. How do I do this?

The Backstory

The plan in this implementation is to manage the CSS and JavaScript files inside of Tridion. We will maintain those files in multimedia components. We’ve created CSS and JS multimedia component schemas for this purpose. What we’re going to do is assemble these components onto CSS or JS page templates, and publish them as “pages” in Tridion.

The Problem

If these were ordinary content schemas, they’d be what are affectionately called “Code components”; a schema with a single plain text field for copying and pasting code. If you’ve got a code component, the Razor is straightforward:

@Fields.Code

That’s it. A single-line of Razor.

But, I don’t have fields. I have a binary file — that just so happens to be encoded in text. What’s a guy to do?

While (doubt) { return Google}

When in doubt, Google things. So, I did. Turns out, Jonathan Whiteside at Building Blocks worked out a C# solution a few years back.

This is a good thing because Razor supports C#. All we have to do is figure out how to adapt Jonathan’s C# solution into a Razor Mediator C# solution. And we can do it like this:


@using System.Text
@{
var c = Component.TridionObject.BinaryContent;
UTF8Encoding encoding = new UTF8Encoding();
byte[] binary = c.GetByteArray();
string output = (binary != null) ? encoding.GetString(binary, 0, binary.Length) : string.Empty;
}
@output

Starting off, we need @using System.Text so that we can access the UTF8Encoding object. Then, we use the Razor Mediator bits to replace Component c = GetComponent(); with a Razor Mediator getter. After that, we’ll leave Jonathan’s code alone. We’ll then output the string with @output.

Now, we’re all set.

The Big Idea

If you’ve got CSS and JavaScript as a multimedia component in Tridion, but you want a component template that renders text, this is an option for you.

Most assuredly as I post this, half a dozen Tridionnauts will come back with 10 solutions that are better. And if you have a better solution, share it!

5 Comments


  1. //

    I’m starting a project for which a developer oversees Tridion, and I create HTML / CSS / JavaScript assets for use in the CMS. I’m trying to perfect a workflow / stack that will automate compilation of Bootstrap CSS and concatenation of JS in preparation for entry into the CMS. Are there any best practices you’ve observed for this workflow?


    1. //

      Hi Mike,

      That’s a really solid question. First I’ll drop an obligatory plug for SDL’s newest “Thing” which is DXA (Digital eXperience Accelerator). It’s Schemas, DD4T, and Bootstrap all bundled in together.

      within the DXA bundle, SDL has Grunt (a node.js-based task runner) which concatenates the Less (preprocessed CSS) and JavaScript. So, DXA essentially contains the workflow that you’re looking for.

      now, I personally am not a fan of Less, and I loathe Bootstrap.

      With that said, regardless of being in a Bootstrap situation, my preference would be to set up Gulp (another node.js-based task runner) to build and minify the CSS.

      Set up a repository for your static files (HTML, CSS, JS). Use Gulp:
      Create a live-reload server. Have your HTML files connect to the live-reload css and JS.
      Then, set a watcher on the files. When Gulp sees a change, it rebuilds the respective collection. It would work the same for JS, too. Every time your front-end dev updates the CSS, he or she gets the browser automatically refreshed for the latest changes.

      Create a secondary Gulp task for “build for CMS”. When the developer finishes whatever static development and testing he needs, he runs something like, “Gulp CMSBuild” (or however you named that task).

      That would concatenate your files, but then minify and lint them as well.

      From there, it’s a manner of transferring those files into Tridion. For that, I’ll have to do some research to see how you could automate the step of putting those binaries directly in to Tridion.


        1. //

          Glad to help. I’m also researching options for how it would be possible to use a node.js-based tool to transfer those files into Tridion automagically.

          Webdav is the technology that I’m most familiar with, in that regard. it would be possible to find a node.js-based WebDav tool. You just then have to find a gulp/grunt webdav connector.

          I asked around, and another option could be a SOAP client. I’m looking into exactly how that might work. I’ll get back to you when I know more.

Comments are closed.