Documentation | Advanced Web Content Management

This section of the SpryPanel documentation deals with how you include SpryPanel controlled content on your web-pages. Once you have defined all your content elements and various options on the 'document design page' (and possibly added some content to the page) you are all set to actually include the content on your web-page. This procedure is very simple if you are familiar with html, if you aren't and normally do all of your design work through WYSIWYG (in Dreamweaver or similar) then don't worry, we'll guide you through it.

The first thing to do is to load the 'Server side file' page in SpryPanel for the page you want to use (the 'S' icon on the file view page). This page will give you all the necessary information that you need. The next thing is to open your page in a text editor (notepad will do if you don't have anything else), or switch to the code view in Dreamweaver (or whatever you use).

The first thing you need to add to your page is a few lines of code that will cause SpryPanel to format all of the content that you need for your web-page. The code will look something like:

The code that you need for your actually page will differ slight due to the page name, but you can copy the code from your server side file page (which will be correct) into your web-page. You should place this code at the top of your page.

The first and fourth lines tell your server that the code in the middle is to be processed and it will dually do so. The second line tells SpryPanel which page you would like to include the content from, for this reason you can include information from any page, the SpryPanel page and web-page don't need to share the same name. It is also possible due to this to include information from more than one SpryPanel page, so long as you are clever about the database names for the document designs are you are going to be using (i.e. don't use the same one twice). This can allow a simpler layout in some cases for SpryPanel users, for example you might want to have a news page and an events page in SpryPanel, but use them both on the same web-page. The third line asks SpryPanel for the page's content.

Standard content:
Including standard content on your web-page is very easy. All you need to do is print out the variable with the database name you specified on the document design page. That may sound a little complicated if you have never used a programming language before, but all it means is you need to do this:



Where '{variable_name}' is your database name. SpryPanel's server side file page is list all of the options you have for this value. For example, if you had a content element with the database name 'info' (specified on the document design page), you could print it out like this:



Where ever you put that code on your web-page, the content that is in the content element 'info' will appear. You can put it where ever you want; in a table cell, in a div layer or just straight onto the page. Its up-to you. This is where SpryPanel gets its design independence from, and allows its to be as powerful as it is.

List content:
Due to the nature of list content, it is a little bit more complicated to use. SpryPanel will give you the list content as an array. Again, don't panic if you don't know what an array is! Its easy to get the hang of in SpryPanel. What this means is to get your content onto your web-page you need to loop over the array. You can do this with PHP's for loop, as shown below. Also for list content elements you need to append 'list_' to the start of the content elements database name. Again the server side file page shows you a list of what you can use. Since you are taking values out of an array you also need to specify which part of the array you are referring to in the loop. This is very simply done by appending '[$i]' to the database name that you want. For example to loop over and print out a content element called 'info' you would use something like:



Again the first and fifth lines just tell your server that it need to compute what should go in the middle. The second line is the start of the loop, it says count use through the variable 'i' from 0 to the number of elements in it. The third line is what happens inside the loop. Here we just print out the value of the content element. The fourth element ends the loop. An extended example of a SpryPanel list, with more than one content element, is shown below:




In this piece of code we are printing out a table that will be displayed on the web-page. The top part is just the first row - the header of the table. The interesting part here is the output of the SpryPanel list in the 'for' counter. The for loop here says that for every instance of content in the SpryPanel list, print out another row in the table. Inside each row, it will then display the code needed to print out the different content elements that are used here. This example is taken from the turn based game 'diplomacy' where there are seven countries, each needing different content on the web-page for each turn.

SpryPanel provides two additional methods for handling list content; ordering results and conditional results. You can order you lists (for example by date or alphabetically) by telling SpryPanel which variable you want to sort by. The variable is the name of that specific content element as shown on the server side file page in SpryPanel (without the '_list' suffix). You do this on the page you are using the content just after you have defined what page you are using by setting the variable '$order_by'. An example is shown below. You can also limit results by using a traditional SQL where condition if you wish. To do this simply include the where condition by setting the variable '$sprypanel_list_where' just after you define the page. SpryPanel lists all include a special content element called 'id' (which you can use by calling '$id_list'. The id provides a unique identifier for each entry in the list, so you can use the where condition and the id variable in combination to provide links to pages with extended content from that list item (a news summery linking to a full report for example).



Type options:
Several of the different data types have extra options that you can use on your web-site. To make use of the extra options, you just need to append the variable name that you want with the appropriate option. For example to include all the html need to display an image directly from the variable '$image', use '$image_view'.

Option	Description
Image data type options
_view	Include all the code necessary to display the image.
_thumb	Render a 100x100 pixel thumbnail in the browser of the image.
_src	The address to view the image.
default - No option appended	With nothing appended image defaults to the same as the _src option.
Date data type options
_date	Displays only the date part of the data formatted; Day, Day number Month Year (for example: Mon, 26th Jul 2004).
_date_short	Displays only the date part of the data in a short hand manner, Day-Month-Year (for example: 26-07-04).
_time	Displays only the time part of the data formatted: Hours-Minutes-Seconds (for example: 16:49:05).
_full	Displays the date and time in a long manner: Day, Day number Month Year Hours-Minutes-Seconds (for example: Mon, 26th Jul 2004 - 16:49:05).
_unixtime	Displays the date and time in the Unix time format, based on the number of seconds since standard epoch of 1/1/1970 (example - '1090947510').
default - No option appended	With nothing appended date defaults to the same as the _full option.

<-- 3.1. Setting up SpryPanel for Control

3.3. Setting up On Page Editing -->

SpryPanel.com Support FAQs Documentation Demo Panel

© - Allan Jardine 2004 - All rights reserved