Setting up our demo

In the homepage of our demo site we have setup a Slideshow which is based on a K2 Content module *. We also provide styles for the Frontpage Slideshow extension from JoomlaWorks in case you want to use that instead *.

In this Demo site two different setup categories are used. Due to the nature of the content (movie posters) there is a different template for Movie listings and a different one for News listings.

For the News listing two different groups of items are used, the Leading and the Primary group. Alternatively, you can set only one group, since the same image size is used for both. The default K2 template is what you need for these listings with the Large image size for the category listings in a single column. The number of items is set to one Leading, three Primary for the Homepage and three Leading, three Primary for the listings.

The Movie listing uses a different K2 template, the movieListings. The main difference between this type of list and the one for News is that due to the movie posters format the Medium image size is used instead. The setup for this list is: three Leading items and three Primary items in a single column.

Image sizes

The following image sizes are recommended for this template:

• XSmall 100
• Small 200
• Medium 478
• Large 648
• XLarge 900
• Generic 300
• Category image 100
• Avatar size 100
• Commenter image 48

Module suffixes

• .sideVideoGallery to be used with the Video Gallery module.
• .banner300 to be used with rectangle banners.
• .mostCommented produces the most commented lists.
• .movieReviews is used on the K2 Content module 'Movie Reviews' located in the right sidebar on the Demo site.
• .listModule suffix is used to style modules such as K2 Content with large unorderded (<ul>) lists of data.
• .condensed class renders the entire module with the 'Open Sans Condensed' font.
• .blockmod is used with gridded style content modules. In the Demo site the 'Editor’s Picks' module uses the .blockmod suffix.
• .slidingModule should be used for the K2 Content module with the nuSlider template.
• .whiteBg renders the module with a white background (#FFFFFF), a 3px radius and a light CSS3 box shadow.

Template specific module and component overrides

K2 component 

There are two template overrides. One for the default item listings and one with a smaller image for the movie listings. The latter is very useful if you have large portait images, (eg. movie posters) and you do not want your article area to be too tall.

K2 Content Module

• Agenda Module
• Most Commented items Module
• Editor’s Pick Module
• Default and Default list module
• Opinion module
• Quotes module
• Movie Slider Module
• nuSlider Module (upcoming Events)
• Video Gallery module (sidebar)

K2 Users Module

Default and the “Articles by Users” module

nuContent Module

• Agenda Module
• Editor’s Pick Module
• Default and Default list module
• Opionion module
• Quotes module
• nuSlider Module (upcoming Events)

Extra Fields

In some modules (eg. the 'DON'T MISS' module on the frontpage of our Demo site) there is some extra information, such as the date (as title) and place (at the bottom of each item in black bold letters) of an event.

This extra information uses a K2 feature called Extra Fields. For better content management we have set up one Extra Field Group containing these two Extra Fields (both of them are Text Fields) and we have associated it with the Events category.

These Extra Fields are shown only inside the item page and the Events ('DON'T MISS') module. The styling is a little different in each case.

The pattern we use for styling Extra Fields is:
Inside the Extra Fields loop (foreach) of our K2 Content module we set up another parameter called $key which is the auto-increment number of each Extra Field starting from zero (0). For instance, the Text Field that has an output of the event’s date and duration will have the CSS classes .field0 assigned to it while the place will have the class .field1. This way it's easier to add more Extra Fields and style them anyway you want.

Extra Fields are also used for the 'Quotes'. The Author (by) and the Movie (in) are Text Fields belonging to the Quotes Extra Field Grοup assigned to the Quotes category.

Finally, all movie details such as the 'Director', the 'Cast', the 'Genre' and 'when it is anticipated to appear in cinemas' are Text Fields belonging to the Movie Info Extra Field Grοup assigned to relative categories.

Setting up the tabs

On the frontpage there are four tabbed modules. These are four different module positions called nuMovies_tab1 -  4.
After assigning the modules to those positions you will notice that the tab headers have not been changed. Due to the limited space and wanting to preserve a somehow logical module naming, the tab headers are NOT the module titles.

To name the tabs go to Extensions → Template Manager, locate your template, open it, and through the Template Specific Tab you will find the Tabs. Name them through the appropriate fields.

Commercial Extensions

Simple Image Gallery Pro - After installing it go to the Extension's parameters Layout template for image galleries and choose the one named after the template, i.e. nuMovies.
Frontpage SlideShow - After installing it go to the Component to setup your Slides category, add your slides (advise the Visual Walkthrough on how to set them up) and through the module's parameters (Extensions → Module Manager) select the NuMovies template.

Note *: The Slideshow template is also available through nuContent Items module in case you don't want to use the K2 component on your site.

• If you chose to use the Quickstart package, you can locate the K2 Content module in the position nuMovies_slideshow, through Extensions → Module Manager and check how it is setup.
• If you chose not to use the Quickstart package, you need to follow the steps below in order to setup the K2 Content module (similar for nuContent Items module) to be used as a Slideshow:
  • Go to Extensions → Module Manager,
  • Create a K2 Content module by clicking on the New button from the top toolbar,
  • Select the Slideshow as the module's template,
  • Either get items through a category you have created for this purpose or just select specific items,
  • Select to show the Title, XLarge image, Category and Created date and time,
  • Publish it in nuMovies_slideshow position.

Visual Walkthrough

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•