Teaser_XH puts several divs on a page, each of which can be filled with content in the plugin backend. These divs can be assigned an internal or external link in order to serve as teasers for other pages.
Via css the teasers can be arranged in rows or one under the other. Their number and order can be changed in the plugin backend. Mouse over effects are possible. Different groups of teasers can get different css-styling which will be shown also in the backend. For backend editing a different site template can be assigned as well to a specific group of teasers.
Keep data and config folders and install the remaining files on top
of the old ones. Delete in Config the line
$plugin_cf['teaser']['selectable_teaser_stylesheets']="rounded;fullwidth;row_of_3;fixed_width";
and add the line
$plugin_cf['teaser']['background_images']="plugins/teaser/images/";
.
When updating from alpha version,
add in config.php the line $plugin_cf['teaser']['editor_height']="300";
.
The css file has again been updated to limit the hover-effect to teasers with global links. Ich you had made some changes there, you may have to reenter them. An editor.css as in the alpha versions isn't used any more and may be deleted.
After updating you may find that the standard teasers has lost the styling. Go to plugin backend and save any standard teaser, and they all will get back their styling.
New in version 1 rc:
To edit a teaser click on the teaser preview in admin mode.
The old selection via radio buttons also works.
Hover effects in teasers will show only when there is actually a link.
Background images and colors of individual teasers are now shown in the editor.
New in version beta 2:
Teaser can take individual backgrounds.
The css style class of a teaser group is always displayed. Css stylesheets have been reduced to one.
New in version beta:
Permanent preview of complete teaser group below the editor.
To put teasers on a page enter the code {{{PLUGINS:teaser();}}}
. This will present the default teaser file.
If you need a specific teaser group, use {{{PLUGINS:teaser('NAME_OF_YOUR_TEASER_FILE');}}}
The plugin menu will display the online editor with the teaser you edited last followed by a preview of the whole teaser group. The height of the editor window can be set in plugin config.
Teaser files always contain a group of teasers in ready HTML code. Thus the plugin doesn't require a lot of computing by the CMS.
For backend editing the plugin extracts a single teaser from the HTML code of the whole teaser group. Select a teaser for editing by clicking on the preview below the editor.
The standard teaser group is teaser_XX.txt
[XX
= language code of your site].
Choosing in the option list either standard file or teaser_XX.txt is the same.
Via the option list you can create, delete or copy teaser group files.
Teaser_XH comes with several examples.
Names for new teaser group files will automatically get the ending .txt
.
Every teaser group has its css style class, which can be selected from an option menu.
If you use CKeditor as online editor to edit your texts, you have to click the "save" symbol of the editor for saving. CKeditor will complain when using the "save" button instead. Tinymce does not insist on its own symbol. Here to save a click on "save" will do.
Single Teasers can get a global Link and an individual background.
The button for displaying the background dialog is shown only, when an image path is specified in plugin config.
Preset is plugins/teaser/images/
.
Repetition, horizontal and vertical adjustment and background color can be added manually next to the image option list.
The editor tries to mimic the style and background of the template. However in complicated templates it doesn't work. The preview however shows the real result.
Note for multilanguage sites: Internal links and background images set in secondary languages usually do work only in secondary languages and not in the main language (and vice versa), as the image path for secondary languages differs from the image path in the main language. Edit teasers for secondary languages from the secondary language, otherwise links, images and background images may not be found.
Teaser_XH creates a basic <div class="teaser STYLE-CLASS-NAME">
wrapper around all teasers of a group. The individual teasers again are surrounded by another <div>
.
Styling is done as usual via the plugin css.
Definitions of the different available Teaser style classes always start with /*startSTYLE-CLASS-NAME*/
and end with /*endSTYLE-CLASS-NAME*/
.
Every css-definition belonging to such a class must begin with div.teaser.STYLE-CLASS-NAME div
or .teaser.STYLE-CLASS-NAME div
.
Please note: As browsers cache css-files (to load pages faster), changes in a css file may not be displayed on normal pages by your browser because the css is not read again. Reloading the page usually makes the browser reload the css, and your changes will become visible.
The examples in the stylesheet.css show how to do it, e.g.
div.teaser.STYLENAME div:hover a ~ h4
here the hover effect works on all
h4 paragraphs, when a global link (div.teaser.STYLENAME div a) is written into the teaser-div.
Since the global link is embedded in a span
, this can be used for hover effect on borders and background of the entire teaser,
e.g. div.teaser.STYLENAME:hover span.teaser {}
If you use different templates on your site, you may want to use teaser on a page with a special template. This template can also be used while editing the teasers.
In plugin config you can set under template change for specific teaserfiles the template as well as morepagedata settings for every teaser group.
The entry mode is as follows:
First enter the teaserfilename (don't forget that these names always end in .txt,
the name of the standard teaser file being teaser_LANGUAGECODE.txt
),
followed by a semicolon, and the name of the wanted template, and, if morepagedata settings are needed, semicolon and morepagedata variables.
If you need to enter data for more teaser files, enter as separator | and proceed as before.
For morepagedata settings, enter the relevant morepagedata variables (without $
) followed by =
,
their value and ;
.
Don't use '' or =
in the value part, as these are reserved signs.
teaser_en.txt;;wide=1;|test.txt;venice
Here are two parts divided by The|
.
The first part means: the standard teaser file uses the standard template (= no entry between ;;),
but there should be a morepagedata template change,
namely the variable $wide should be switched on
(i.e. the textarea should be wider than normal).
Second part means: the teasers of the file test.txt should get the template "venice".
There are basically 3 saving locations possible
userfiles/plugins/teaser/
plugins/teaser/
and enter 1
in path starts in content folder.Depending on your server configuration you may have to give writing permissions to the data folder and its files, as well as to languages, css and config.
Written by svasti March 2013