Home ▻ T4 Training▻Training▻Training Examples▻News, Events, and Features

News, Events, and Features

The news events and features widgets show 3 items each.  They were originally designed for college home pages but with a little design tweak, they work great in other homepages too, as you can see below:

See how this content type looks in different page types:
With Rightbar, Without Rightbar, Widescreen, and Ultra-Wide (sub-site) / Ultra-Wide (top-level) pages
or else
Normal, Widescreen, and Ultra-Wide (Sub-Site) / Ultra-Wide (Top-Level) Landing pages

Note: You change a page's width (and other options) using its section's DC.Keywords field - see my interactive demonstration for full information.

What the widgets do

The news widget shows the 3 latest news items (based on the 'date released' field). Future news events are not shown.
The events widget displays the top 3 future events (based on the 'event date' field).  If there are none, the top 3 past events are shown.
The features widget displays the first 3 features it finds (in a hidden section).

Options, Requirements, and Limitations

You can elect to have a news or an events section on your site (or both).

The three widgets are an optional extra for your homepage.  But to have them, you must have news, events, and features sections already set up correctly.
All 3 widgets will appear together - you cannot pick and choose which widgets will display (its all or nothing).  However, an alternate, events-only widget is available (more information).
The below instructions show how to embed the widgets as they appear on this page (with the widget ribbon removed).  However they can also appear in three columns as per above.

Your 'news' and 'events' sections can appear on your site menu, if you like, but the 'features' section is always hidden from navigation (as they only appear in the widget).

How to set up a News page

  1. Using the Actions button menu of the section you want to add this feature to, click 'Create Section'
    • - Name: News
    • - Output URI: news
    • - Optionally un-check 'show in navigation'
    • - Click 'Save Changes'
  2. Using the Actions button menu of the new News section. click 'Edit section'
  3. Click on the Enable automatic ordering toggle button to turn it on
  4. Choose 'Publish Date (newest)' from the dropdown menu below the toggle button and then. Click 'Save Changes'
  5. In the site structure, expand NUI Galway » T4 Training » Training » Training Examples
  6.  Find 'News Page Example' and click on the Actions button. Then click 'Edit section'
  7.  You need to duplicate the truncation code
    • Click on the Actions button beside 'JS to truncate news items (code only)' and choose  'Duplicate'
    • The Duplicate content popup appears - click on the new News section in your website (be careful not to click on any other section's name).
  8. You're brought back to the t4 News Page Example's content list. You need to go to your new News section.
    • Click Cancel to go back to the site structure and edit your own News section.
    • In the 'Content' Tab approve the Pending content type called 'JS to truncate news items (code only)' by clicking on the Actions button beside it and choosing Approve.
    • Go to the 'Page Layouts' tab. To the right of 'University of Galway', make sure the page layout drop-down is set to 'Inherited' and the Inheritable page layout is set to 'News Article: School'
    • Go to the 'Metadata' tab. Insert 'newsPage article showNav' (without the quotes) in to the DC.keywords field
    • Click 'Save Changes'
  9. Add as many 'NUIG News' content types as you like into this section.
  10. Images in the NUIG News content type should be 705x400 at minimum.
  11. Remember, your images need to be added to the Media Library as a Background Image (Image Path CSS) when adding an image to a News Item

How to set up an Events page

  1. Using the Actions menu of the section you want to add this feature to, click 'Create Section'
    • - Name: Events
    • - Output URI: events
    • - Optionally un-check 'show in navigation'
    • - Click 'Save Changes'
  2. Edit the new Events section, click on the Enable automatic ordering button and choose  Publish Date (newest) from the dropdown menu below it. Click 'Save Changes'.
  3. Add as many 'College Event' content types as you like into this section.

How to set up a Features Section

  1. Using  the Actions menu of the section you want to add this feature to, click 'Create Section'
    • - Name: Features
    • - Output URI: features
    • - Optionally un-check 'show in navigation'
    • - Click 'Save Changes'
  2. Edit the new Features section, click on the Enable automatic ordering button and choose  Publish Date (newest) from the dropdown menu below it. Click 'Save Changes'.
  3. Add as many 'Feature' content types as you like into this section. Features can have 56 x 56px images, which you'll upload to the media library as 'Image Path (CSS)'.

How to set up the optional homepage widgets

  1. In the site structure, expand NUI Galway » T4 Training » Training » Training Examples
  2. Go to the 'News, Events, and Features' example section and click on the Actions button, choose 'Edit section'
  3. Check the checkboxes to the left of both 'Remove widget ribbon' and 'News Events & Features'
  4. At the top of your content list there are three Action buttons, Click on 'Bulk actions', choose 'Bulk duplicate' from the dropdown menu. (If these buttons are not visible you might need to widen the browser window on your screen).
  5. A Duplicate content popup will appear
  6. Scroll to your webpage and click on your homepage. It's ok to expand sections with the + button (if you need to) but don't click on any section name until you've found your homepage's section.
  7. Go to your homepage section. You'll find the 2 copied pieces of content listed there - their status will be 'Pending'.   
  8. Approve both contents by clicking on the Actions button for each one and choose Approve.