What

This recipe will show you how to create a "Brand Repository" on your Rock Intranet... a central place where staff can go to get different versions of your logo and branding. We called ours Brand Central Station... Yeah, we're clever like that.

Why

If your organization is anything like ours, your staff is constantly emailing the creative dept (or each other) asking "Where can I get a copy of the logo?" or "Can I get a scalable version of our logo instead of the PNG I have?"...or (worst of all), they're simply grabbing a tiny version right off of your website homepage and blowing it up 1000%!

Ain't nobody got time for that! Having a central location for all branding will eliminate those incessant requests and (literally) keep everyone on the same page. It also allows you to provide new formats, sizes, and colors of your logos without having to distribute them to everyone. They will just see your new assets every time they visit the page. Of course you could just provide the same content on a shared file system somewhere, but then you risk people "accidentally" deleting them, or dealing with rights to prevent that... and in general you can't easily "see" files sitting on a shared drive, either. Putting them in Rock just made sense for us.

How

It should come as no surprise that we're going to use a Content Channel to drive this page as it's the perfect mechanism for such a task. First, we need to create the content channel.

Content Channel

Go to Admin | CMS Config | Content Channels and click the + to add a new channel.

1. Give it a Name like Brand Central and change the Type to Universal No Date Channel Type
2. Set Items Manually Ordered to Yes.
3. Add an Item Attribute named Content Image (with key of ContentImage).
4. Select Image as the Field Type then select Content Channel Item Image as the File Type.

5. Save the attribute.

At this point you should add a few items to your new Content Channel. Hopefully your creative/art/communications dept can give you a bunch of variations in differnet formats, sizes, and colors. You can add them from where you are (Admin | CMS Config | Content Channels) but once a channel is created you'd normally do it under Tools | Content. Each item will hold one file (version of logo, letterhead doc, brand font file, etc.)

1. The Title of the item is what will show on the Brand Central page. It should accurately describe the item, for example, Logo Horizontal Charcoal PNG 1104 x 305.
2. The Content Image attribute should be populated with (duh) the file that represents that logo, etc.
3. We chose to order them manually to have complete control over the order they are displayed. Just drag the items into the order you want them to appear.

Brand Central Page

Now that we've got the Content Channel created, we need to create a page to display our items.

1. Go to Admin | CMS Config | Pages and drill down to Internal Site | Intranet | Office Information and "Add Child to Selected" to create a new page under the Office Information sub-menu. (Obviously, if you want this new page to appear somewhere else in your Rock menu, just add it wherever you prefer.)
2. Give it a name like Brand Central Station and leave the layout at Full Width.

3. Save the new page.
4. Add a new Content Channel View block to the Main Zone on your Brand Central page.
5. Edit the Content Channel View block and choose the Brand Central Content Channel in the Channel drop-down.
6. Add the following code to the Format section:

   <style>
   .row.is-flex {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
       display: flex;
       -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   }
   
   .row.is-flex > [class*='col-'] {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
       flex-direction: column;
   }
   
       [class*="col-md-3"] {
           padding-bottom: 3em;
           //border: 1px solid; 
           border-color: #dbd4c7;
       }
   </style>
   
   <div class="container-fluid">
       <div class="row is-flex">
         {% for item in Items %}
             {% assign image = item | Attribute:'ContentImage','Url' %}
             <div class="col-md-3">
                 <h5><strong>{{ item.Title }}</strong></h5>
   			    <a href="{{ image}}"><img src="{{image}}" class="img-thumbnail" width="400"></a>
             </div>
         {% endfor %}
       </div>
   </div>

7. Set Order Items By to Order By | Ascending
8. Save the block.

If all has gone well, you should see your content channel items display when you refresh the page. The page will do its best to display your items in four columns with even rows, though depending on the aspect ratio of different logos and the size of your browser window this may be impossible. Feel free to play with the styling to lay them our differently, but the styling provided here has worked well for us. It's also important to know that the items are ALL shown at the same width (400px), not their actual (pixel-perfect) size, and will adjust responsively as your browser window changes. When a user saves the file to their own system it will of course be the actual size.

Odds & Ends

There are a few extra things you can do to make your Brand Central Station page better.

1. Add a HTML block above the Content Channel block with some explanation on what the page is for, tips on using the Logos, etc. On our page we created a list of "Do's and Don'ts" with pictures telling staff what NOT to do with the logo. Here's an example, but I'll leave it to you to roll your own.


2. You might also give instructions on how to download a content item. Some staff might not be familiar with Right-click, Save-As to save an image or other file.


3. Don't limit your content items to just logos! There are several other useful things you can provide your users.
   • Add a Word (or PDF) doc of your Letterhead.
   • Add a color swatch with hex codes for your brand colors
   • Add a zip of the special fonts used in your branding.

Hopefully you now have a working Brand Central Station page that will be THE place your staff goes to get logos and branding content. This is by no means all you can do with such a page, but you now have a solid starting point. Now go make something cool!