Styles

Jango User guide - Components/Image Collections/Styles


	Image Collection Styles are table layouts that define how the Image Collection looks on the page. These can include text information such as file names, descriptions and other data you have collected.


	Styles explained

The Styles section of Image Collections defines how many images are in each row, how many rows there are etc.

Creating a New Style

To create a new style click on 'New' while in the styles section of Image Collections. The creation of new styles has been made easy with the addition of 'Display Variables'. These variables can be easily integrated into the code to save the hassle of knowing what the actual path is to things like file names etc.

First, define a name for the new style.
The text area labelled 'Style' is where the html code is entered that will define what your layout and structure will be for each individual image within the collection. Ideally, what is needed here is a simple table design that takes advantage of the 'Display Variables'. The layout of the Image Collection page as a whole is determined by how many rows and columns you choose to display. If you are having difficulty getting the new style to work then it is advisable to look at one of the predefined styles and see exactly how it is done.
The next box labeled 'Image Click-through popup style' defines what actually happens when someone clicks the image they are after. Once again it would be a good idea to have a look at the examples if difficulty arises.
Now set the number of rows, columns and the max image size for the collection.
When done, click on save to create the new collection.

Editing Styles

Editing a style is very similar to creating a new style. Click on the name of the style that is to be edited and a page will load with all the above sections filled in. Click on 'Preview' to view any changes that may have been made in case something goes wrong.

Applying styles to collections

To apply a style to a collection simply make sure that the current page is the Image Collection default page. Click on a collection to bring up its details. Select the style for the drop down box and click on save when done.