Description

I've had a few requests recently for details on how I built our staff updates section of our internal Rock home page so I figured I should take a little extra time to make a recipe out of it.

This recipe is inspired by the built in Internal Communication View block that is included with Rock by default, but with some extra features and a little more flexibility. It displays an image slider with one or more graphics that can be linked to whatever you want, with three smaller feature graphics with links and short text descriptions below that. All of the features can be scheduled with a start and end date, and each one can optionally be shown in the big slider or as a smaller feature.

Summary

For this recipe you will be creating the following new entities:

• 1 × Content Channel Type
• 1 × Content Channel
• 2 × Content Channel View Blocks

How-To

Add a Content Channel Type

Go to Admin Tools > CMS Configuration > Content Channel Types and add a new content channel type.

Item Attributes:

• Key: BigImage
• Show in Grid: Yes
• Field Type: Image
• File Type: Content Channel Item Image

• Key: SmallImage
• Show in Grid: Yes
• Field Type: Image
• File Type: Content Channel Item Image

• Description: Describe the image for people with visual impairments, unstable internet connections and search engines.
  (I use this channel type for our public website as well)
• Key: ImageAltText
• Field Type: Text

• Key: DisplayType
• Required: Yes
• Show in Grid: Yes
• Field Type: Single-Select
• Values: Big Feature,Small Feature
• Default Value: Big Feature

• Key: LinkURL
• Field Type: Url Link

• This is only used for our public website, so you can ignore it for the purposes of this recipe.

• Key: Active
• Show in Grid: Yes
• Field Type: Boolean
• Control Type: Checkbox

Add a Content Channel

Go to Admin Tools > CMS Configuration > Content Channels and add a new content channel.

Big Features Block

Go to your internal Rock home page and add a new block to the Main zone.

• Block Type: Content Channel View
• Block Properties > Pre-HTML:
  (Replace the content admin page ID with the ID of your own content channel admin page)

  {%- assign contentAdminPageID = 1052 -%}
  <div class="panel panel-block">
      <div class="panel-heading rollover-container">
          <h2 class="panel-title">
              <i class="far fa-newspaper"></i> 
              Staff Updates
          </h2>
  {%- assign hasRights = contentAdminPageID | HasRightsTo:'View','Rock.Model.Page' -%}
  {%- if hasRights == true -%}
          <span class="pull-right rollover-item"><a href="/page/{{ contentAdminPageID }}" title="Manage the staff updates"><i class="fas fa-edit"></i><span class="sr-only"> Manage Staff Updates</span></a></span>
  {%- endif -%}
      </div>
      <div class="panel-body">
  

• Block Criteria:

  

• Format:

  {% stylesheet id:'home-feature' %}
      .feature a { display: block; }
      .feature-image {
          width: 100%;
          height: 300px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
      }
      .slick 
      { 
          position: relative; 
          height: 300px; 
          width: 100%; 
      }
      .slick .item 
      { 
          position: absolute; 
          top: 0; left: 0; 
          height: 100%; width: 100%; 
      }
      .slick .item:first-child { z-index: 1; }
      .slick-initialized { height: auto; }
      .slick-initialized .item { position: static; height: auto; }
      .slick-prev { left: 20px; z-index: 1; }
      .slick-next { right: 20px; z-index: 1; }
      .slick-dots { bottom: -18px; }
      .slick-dots li button:before { font-size: 10px; }
  {% endstylesheet %}
  <div id="big-features" class="communicationview">
      <!-- Wrapper for slides -->
      <div class="slick feature">
  {%- for item in Items -%}
      {%- assign itemPrimarySlug = item.PrimarySlug | Trim -%}
      {%- assign linkURL = item | Attribute:'LinkURL','RawValue' | Default:'' -%}
          <div class="item{%- if forloop.index == 1 %} active{%- endif -%}">
              <a href="{{ linkURL }}" title="{{ item.Title }}"><div class="feature-image" style="background-image:url('{{ item | Attribute:'BigImage','Url' }}')" alt="{{ item.Title }}"></div></a>
          </div>
  {%- endfor -%}
      </div>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function()
      {
          $('.slick').slick(
          {
              autoplay: true,
              autoplaySpeed: 5000,
              dots: true,
              fade: true,
              speed: 500,
              cssEase: 'ease'
          });
      });
  </script>
  

Small Features Block

Go to your internal Rock home page and add a new block to the Main zone.

• Block Type: Content Channel View
• Block Properties > Post-HTML: </div></div>
• Block Criteria:

  

• Format:

  {% stylesheet id:'small-features' %}
      .homepage-article .photo
      {
          width: 100%;
          height: 140px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
      }
      .homepage-article .btn { padding: 0; }  
      .articles .row:nth-child(n+2) { display: none; }
      .btn-block-link
  	{
  	    display: block;
  	    color: inherit; 
  	    text-decoration: none;
  	}
      .btn-block-link:hover { text-decoration: none; }
  {%- endstylesheet -%}
  <div class="margin-v-lg articles">
      <div class="row">
  {%- for item in Items limit:3 -%}
      {%- assign itemPrimarySlug = item.PrimarySlug | Trim -%}
      {%- assign linkURL = item | Attribute:'LinkURL','RawValue' | Default:'' -%}
          <div class="homepage-article col-md-4">
              <a href="{{ linkURL }}" title="{{ item.Title }}" class="btn-block-link">
                  <div class="photo" style="background-image: url('{{ item | Attribute:'SmallImage','Url' }}')" alt="{{ item.Title }}"></div>
                  <h5 class="title">{{ item.Title }}</h5>
                  {{ item.Content }}
              </a>
              <a class="btn btn-xs btn-link" href="{{ linkURL }}">More Info</a>
          </div>
  {%- endfor -%}
      </div>
  </div>
  

Add Slider Styles

Add the following stylesheet links to the Page Properties > Advanced Settings > Header Content of your internal Rock home page:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />

Add Featured Items

Now you're ready to start adding some content. Go to Admin Tools > CMS Configuration > Content Channels > Internal Home Page Features and add at least four content items (at least one big feature and three small ones.)

Image Sizes

For the big features I recommend 2200×850 and try to keep any text within about an 820×380 area in the center of the graphic.

For the small features I recommend 740×280 and try to keep any text within about a 500×130 area in the center of the graphic.

Follow Up

Please don't hesitate to leave a comment below or hit me up on Rock Chat (@JeffRichmond) if you have questions or find any issues with this recipe.

If you come up with better or more efficient ways of doing anything in this recipe, please let me know. Thanks!

Change Log

• 2022-09-07 - Initial Version
• 2022-09-20 - Added missing Slick Carousel stylesheet links