With the introduction of Wrap6, Brian Brinegar developed a set of "widgets" that can be used to display the contents of event managers in a number of different formats. When I set about converting the CoE site to Wrap6, I built on his fine work to create a widget for displaying larger feature banners using a similar mechanism: the HomePageFeature widget.

The HomePageFeature widget displays a rotating set of features, cycling through your published event documents as many times as you like, fading from one to the next at an interval of your choice. Your headlines and intro text appear on top of background images, and each feature can be individually styled.

Adding a HomePageFeature widget to your site

This widget is available for use on other sites as well. If you'd like to give it a try, start by copying the index_html page template at the root of your site so you have a safe sandbox to play in. Call it index_html_new, or something like that.

Next, you'll need to add this to your new page template:

<tal:top metal:fill-slot="top">
 
  <tal:feature tal:define="feature_statuses python:request.get('feature_statuses','published').split(',');
                           max_features python:int(request.get('max_features', '100'));
                           cycles python:int(request.get('cycles', '3'));"
               tal:content="structure python:root.Wraps.Widgets.HomePageFeature(
                                            em=container.AboutUs.News.HomepageFeatures,
                                            max=max_features,
                                            randomize=0,
                                            statuses=feature_statuses,
                                            display_time=10,
                                            cycles=cycles
                                          )" />

</tal:top>

You'll need to change the line that reads "container.AboutUs.News.HomepageFeatures" so it points to the actual location of the event manager that contains your features.

Configuring the widget code

The code above allows your widget to be accept query parameters in the URL to control the event document statuses that it will display, the number of features to show, and the number of times to cycle through the published features before stopping. The first option will be particularly useful once your widget is installed on the home page, because you'll be able to preview unpublished ('draft' status) features while you're tweaking the styles in them, but you won't mess up the home page for others.

You'd do that by adding ?feature_statuses=draft or ?feature_statuses=draft,published to the URL of your home page, like so:

https://engineering.purdue.edu/Engr?feature_statuses=draft,published

Alternatively, you could keep your sandbox page on the site all the time, and change the widget code in it so that index_html_new always displays the draft features:

  <tal:feature tal:define="feature_statuses string:draft;

or displays both draft and published features:

  <tal:feature tal:define="feature_statuses python:['draft','published'];

...etc. Whenever you want to build and tweak a new feature, you'd just go to that page to preview it. In that case you might want to change the page template's name to index_feature_test or index_draft_features to help remind you of it's function in the future.

Here's the full list of configuration options you can set within the parentheses following root.Wraps.Widgets.HomePageFeature, along with the default values:

em
This is the event manager that houses the features. It's a required parameter, and has no default.

max=100
The maximum number of features to display. The 100 default value is probably enough to show all the features you'll ever have published at any one time.

randomize=0
If you set randomize to 1, the order of features will be shuffled. The default value shows them in the order that you have them positioned on the event manager's Documents tab.

statuses=['published']
Possible values are 'draft', 'published', and 'archived'. For your actual home page, you'll only want published items.

display_time=10
This is the number of seconds that each feature will be displayed before the next one replaces it.

cycles=3
This controls how many times the set of features will be repeated. The default will rotate through the set 3 times. The first item displayed is also the one that remains visible after the cycling is over.

Setting up your features

In order for the widget to work properly, the event manager will need to contain only your features, and it should only allow event documents of the "Home Page Centerpiece" type. If you don't already have such an event manager, make one now and add a feature or two to it.

To add a feature, you'll need to make a background image and add it as a thumbnail image in the feature. It's not really used as a thumbnail, but by checking that option when you add it, the widget is able to use the event document's getThumbnail() method, which simplifies things on the back end.

The image should be 270 pixels high by 960 pixels wide. Because you'll typically be superimposing the headline and intro text on top, you should aim to have 1/2 to 2/3 of the image be relatively featureless and fairly even in tone (either light or dark). If it's busy and detailed all over, it will make any text placed on top very difficult to read. An alternative approach would be to style your text so that it's inside a colored box that covers the background.

Feature CSS

Home Page Centerpiece event documents now have a Feature CSS field which is used by the HomePageFeature widget to let you control how the feature looks. This lets you use CSS to position your text on top of the image. That's preferable to making the text actually part of the image, because it's more accessible, and it's easier for you to make quick changes to the text.

Here's an outline of the HTML structure that the widget constructs from your feature event documents:

  <div id="feature-container">
    <div class="feature" id="IdOfYourFeatureEventDoc">
      <div class="feature-text">
        <h1 class="feature-title">
          <span class="title1">Main Headline</span>
          <span class="title1">Secondary Headline</span>
        </h1>
        <div class="feature-intro">
          Your intro text is placed here. You can include HTML in your intro.
          <a class="more-link" href="/URL/of/your/Feature">Continue reading &raquo;</a>
        </div>
      </div>
    </div>
  </div>

In your Feature CSS, you can use the classes above to control the appearance of each of those elements. Note that the widget will automatically preface each of your CSS selectors with the id of the feature, so the styles will only take effect when that particular feature is displayed. Here's an example, showing the CSS I used for one of my first features:

.feature-text {
  position: absolute;
  top: 25px;
  left: 375px;
  width: 525px;
}

.feature-title {
  border-bottom: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.feature-title .title1 {
  color: #969ca1;
  font-size: 50px;
  letter-spacing: 1px;
  font-weight: normal;
  position: relative;
  left: -10px;
  margin-bottom: 10px;
  text-shadow: 0px 0px 16px rgba(0,0,0,.7);
}

.feature-title .title2 {
  color: #eee1be;
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: normal;
  margin-bottom: 0;
}

.feature-intro {
  color: #eee;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
}

.feature-intro .more-link,
.feature-intro .more-link:hover,
.feature-intro .more-link:visited {
  color: #d6dce1;
}

I won't get into a detailed explanation of the CSS. You'll need a good working knowledge of CSS to be able to take advantage of the widget's abilities, and if you have that, you should be able to figure it out.

Email me if you'd like to try out the widget and would like some help getting started.

-Hilary Mark Nelson
hmnelson@purdue.edu