Welcome to Morepagedata_XH 1 beta 3

for CMSimple_XH
Tested on Version 1.5.4 (slide show requires jQuery plugin)

Morepagedata enables the webmaster to set all kinds of predefined design elements per page without changing the template.

different colors of details like menu or content background on every page
different background images in prepared areas on every page
different newsbox content per page
page specific text entries outside the standard content area
display a slide show of different images on every page, even with different effect on differnt pages
and change other aspects like content width etc. per page with a
checkbox, options menu or free input field with pop up help.

Morepagedata does this by entering new variables into the pagedata.php. Similar effects may be achieved by changing the template. However with morepagedata the webmaster can easily change the desired modification per page.

The possibilities are endless, only the configuration of the plugin used to be a little challenging. Now however templates can come with prepared Morepagedata definitions to make things simple.

Update from version 1 beta 2 to version 1 beta 3

Keep your config folder as it is and install the new version over the old files. Go to plugin main and you will find that you can "import" you old settings. Click on "import" and your done.

Same change may be needed in the templates as the color picker will now produce values with preceeding '#'.

New in beta 3: Template specific Morepagedata

Without entry in the "templates" field, your morepagedata will be availabe for every page. A comma separated list of templates will restrict the availability of morepagedata variables to these templates.

New in beta 3: Templates can come with build-in Morepagedata definitions

These Templates come with the file morepagedata.csv in their main folder. If you have such templates, go to Plugin main of Morepagedata. The plugin will offer to import the prepared morepagedata. Simply press Import these definitions and the definitions will appear in the main variable table. You can rearrange the order of the variables by clicking on the arrow , add a <hr> (horizontal line) after a variable and change the displayed wordings.

After import morepagedata variables are ready to be used on every page of the specified template.

Removing Morepagedata plugin

Delete all variables first, otherwise they remain in the pagedata.php. Alternatively you can remove unused pagedata variables with Pdeditor_XH.

If you don't intend to program your own morepagedata-prepared templates, you may stop reading here.

Entering help text

For color picker and slide show a prepared help text from the language file will be used automatically.

Preparing morepagedata.csv for your template

If you want to give your template to others, you may want to add a morepagedata.csv to it, so that other users can easily use the morepagedata. Create a new file named morepagedata.csv and enter your variables line by line in this way:

var=Name of your variable;display=What should be displayed in the page data field;type=Type of your variable [;options=if your type is option list, enter the options here, separated by || or, if you add special text to your option, option|text|option2|text2 etc.][;help=if you want a help pop up, enter the text here]

Code between [] is optional. The order of the entries is free. Put this file into the main folder of your template.

Programming your own morepagedata capable templates

General procedure

(1) First think about which aspects of your template you want to make changable.
(2) Then prepare your template accordingly with some new php-variables.

If you want to change css-values with morepagedata, it is practical to do this in the html head of the template.

Example: You want to introduce 3 new variables to control the head image ($headimage), the background color ($color1) and the color ($color2) of the navigation. Add the following code just before </head>:
<style type="text/css"><?php if(isset($headimage)) { echo '#head {background-image:url(' . $pth['folder']['template'] . $plugin_cf['morepagedata']['path_template_images'] . $headimage . ');}'; } if(isset($color1)) { echo '#body {background-color:'.$color1.';}'; } if(isset($color2)) { echo '#nav {background-color:'.$color2.';}'; } ?></style>
Note: The path to the template background images has the path to the template $pth['folder']['template'] followed by the path specified in plugin config $plugin_cf['morepagedata']['path_template_images'].
The color codes of the color picker are without #, so you have to add # into your code.

A php call can also be put inside an html call in the html body section, e.g.:

<div <?php if(isset($your_new_variable)) echo 'do something, usually some css;?>>

The body section of the template is also the place for more complex calls like the slide show, e.g.
<?php if(isset($sideimages) && !$edit) { echo '<div class="slideshow">'.slideShowImages($sideimages).'</div>'; } ?>
The variable in this example is $sideimages, another name could also do. The slide show will not be visible in edit mode in this example because of && !$edit.

(3) Finally enter these new variables as new fields in Morepagedata plugin main settings. Morepagedata will check if these new variables are already in use by the system. If this is the case, you should give your variable in the template a different name and try again to enter it.

In plugin main a click on + will open a new entry line. After entering and saving, the new variable will be added to the pagedata.php and changing the variable will be disabled. You can however delete it, which will delete the variable in pagedata.php as well.

Display, type and options can always be edited freely.
To group the display of the variables in pagedata view, you can add a horizontal line (<hr>) to be dispayed after a field.
To display a variable only for certains templates, enter the template names in the respective field. Separate more than one templates by comma.
Move a variabel up in the display by clicking on the arrow in the variables table.

Available field types

Checkbox

Here is an example with a variable "wide", which makes the content area wider. You can proceed in a similar way for other aspects of your page. The call in the html head area of the template would be:
<style type="text/css"> <?php if(isset($wide)) {echo '#content {width:650px;}';} ?> </style>

Color picker

uses Jan Odvárko's jscolor. It is preset to add # to the color code, so that color names can also be entered. (This preset could be changed in morepagedata/jscolor/jscolor.js.)

Image folder

presents an option list with all the images from a folder specified in plugin config.

Input field

provides free input. In an additional line you can enter a help text, which will be shown as a pop up tool tip.

Option list

An additional line will appear where the options are to be entered as:
option value 1|shown_text 1|option value 2|shown text 2|option value 3|shown text 3 etc.
No | at the end! If you use || as divider, the option values will be shown as text.

Select hiddenpages

gives an option list with all hidden pages. Useful to select the contents of a newsbox. The code could be:
<?php if (isset($news)){echo '<div>'.newsbox($news).'</div>';} else{echo '<div>'.newsbox('News').'</div<';} ?>

Template image

presents an option list with all the images of the templates folder. Path can be set in plugin config.

Textarea

gives the possibility to put a little content into an prepared area of the template instead of using a newsbox. You can set in plugin config, whether the standard editor is used or not.

Slide show

uses jQuery plugins cycle.lite and cycle.all by malsup, see http://jquery.malsup.com/cycle/

The jQuery plugin will only be loaded, when the slide show is used. So if you don't want the slide show, the plugin will not load it.

If you use the slide show but don't specify any slide show effect, the much smaller cycle.lite version (8kb) will be loaded and the fade effect will be dispayed as soon as at least 2 images are selected.

If you specify an effect in plugin config or for a page, the larger (51kb) cycle.all version will be loaded. Available effects of this version are:

blindX — blindY — blindZ — cover — curtainX — curtainY — fade — fadeZoom — growX — growY — scrollUp — scrollDown — scrollLeft — scrollRight — scrollHorz — scrollVert — shuffle — slideX — slideY — toss — turnUp — turnDown — turnLeft — turnRight — uncoverq — wipe — zooms

Putting the slide show into the template

Specify the path to the images in plugin config. Enter into your template code similar to this:

<?php if(isset($NAME_OF_YOUR_VARIABLE)) { echo '<div class="slideshow">'.slideShowImages($NAME_OF_YOUR_VARIABLE).'</div>';} ?>
A possible name for the variable is $slideshow

In order to be able to center or right align the images (default = left aligned), all the images are wrapped into a <div> by morepagedata. The resulting source code will be something like: <div class="slideshow"> <div><img src="./images/image1.jpg" ></div> <div><img src="./images/image2.jpg" ></div> </div>

Css example for centered or right aligned images: /* ============= Slideshow ============= */ .slideshow { float:right; width:350px; height:300px; margin-left:10px; } .slideshow div { width:350px; height:300px; overflow: hidden; } .slideshow div img { margin: 0 0 0 auto; /* this line for right aligned images */ margin: auto; /* or this line for centered images */ display:block; }

Slide effect

To set different slide show effects per page the field of the type "slide_effect" is used. Enter the name you give to this variable as second value into calling the slideshow in your template, e.g.:
<?php if(isset($NAME_OF_YOUR_SLIDESHOW_VARIABLE)) { echo '<div class="slideshow">'.slideShowImages($NAME_OF_YOUR_SLIDESHOW_VARIABLE, $NAME_OF_YOUR_SLIDESHOWEFFECT_VARIABLE).'</div>';} ?>

This field will present an option list with as default 27 effects. Often this is too much for the Webmaster and some effects may also not be useful in your case. The list can be edited in plugin config, e.g. for right aligned images a usefule list is:
blindX,blindY,blindZ,fade,scrollUp,scrollDown,scrollRight,scrollVert,toss,turnUp,turnDown