The following is for site developers/administrators who are wanting to setup this extension on their system.
The Flexform options are detailed above in the Setup Options in the Users Manual (section 1.2.2). Please see that section for a full reference.
A number of constants are setup so you can customize the extension to fit your needs.
To change the constants, you can either use the Constants Editor or change them in Typoscript. Both ways are shown below. First though you will need to create a new template. If you already have a template, then proceed to the Edit Constants or Change Constants in Typoscript below.
First, before you edit constants, you will need to create a new template. Creating a template is easy.
Click on your Connector page in the page tree.
Go to the Template action in the main menu. Click on “Info/Modify” in the upper right drop-down menu.
Choose “Click here to create an extension template” under “Create Extension Template”.
You can “edit the whole template record” and setup the name or change constants. See below.
An easy and user-friendly way to edit the constants is to use the Constant Editor. Here are the steps to do that:
Select the page where your Connector is installed.
Select the Template action icon.
Choose Constant Editor in the dropdown menu in the top right.
Choose PLUGIN.wecconnector_pi1 from the Category list.
Choose one or more of the constants by clicking on the checkbox. Doing this indicates that you want to change that constant. When you are done with selecting items, click the Update button.
Now you can change the values to what you want. Click on Update button again to save them.
You can now preview your page and see the changes.
You need to have a template defined in the installation of your Connector as mentioned above. You can then set the constants using Typoscript by adding them to this template.
The steps to setup the template record:
Select the page where your Connector is installed
Select the Template icon
Choose Info/Modify in the dropdown in the upper right
Choose “Click here to edit the whole template record”.
Now you can add to the Constants or Setup field.
An example to add to the Constants field would be:
page.templateFile = fileadmin/wec_connector/my_wecconnector.tmpl
You can then preview your page and see the changes.
The following constants are available to be changed in Typoscript and/or the Constant Editor.
PROPERTY | DATA TYPE | DESCRIPTION | DEFAULT |
templateFile | string | The template file. Include the full URL path if you change it from the default (i.e., http://www.yourwebsite.com/fileadmin/wec_connector/template/mytempl.tmpl). | EXT:wec_connector/pi1/wecconnector.tmpl |
imageWidth | number | The width limit for images. The images used are for categories. Without any value, the image will be imported the full width | 100 |
imageHeight | number | The height limit for images. Without any value, the image will be shown in the full height. You can specify just the imageWidth or the imageHeight. | 100 |
contentWidth | number | The width of the content for the Connector. If set to a % as the default, it will resize according to the browser. If set to a fixed width, i.e. 500px, then it will stay that width. | 100% |
contentMaxWidth | number | The maximum width of the content for the Connector. This allows the contentWidth to be flexible, but not get too big. This is called a liquid layout where the content resizes with the brower width. | 750px |
listingWidth | number | The width of the listings for the Connector. This should be less than the contentWidth. | 100% |
entryFormWidth | number | The width of the entry form. | 95% |
entryFormLabelWidth | string | The width of a label for the entry form. | 25% |
entryFormInputWidth | string | The width of the input field for the entry form. | 70% |
entryBackColor | string | The background color of an entry. | #FFFFFF |
entryColor | string | The text color of an entry. | #202020 |
alternatingEntry | string | If you want the entries to alternate colors (or styles), then you can set CSS for this. For text colors, you would add something like: “color: #F0F0F0;” or for the background color, you would add something like: “background-color:#E0E0E0”. If you want to combine CSS, you could add something like: “color: #F0F0F0;background-color:#E0E0E0”. Note that it must be valid CSS, and any CSS is possible here. | |
formBackColor | string | The background color of the form. | #F0F0E0 |
msgInfoColor | string | The color for the “Message Info”, which includes the name, location, date, and time. | #404040 |
subjectBackColor | string | The background color for the subject. | #FFFFFF |
subjectTextColor | string | The text color for the subject. | #000000 |
btnBackColor | string | The background color for the button. | #888888 |
btnColor | string | The foreground color for the button. | #FFFFFF |
btnHoverBackColor | string | The background color for when hovering over a button. | #AC0000 |
btnHoverColor | string | The foreground color for when hovering over a button. | #FFFFFF |
chooseCatBackColor | string | The background color for choosing a category. The choosing a category is when you see the list of categories at top. | #B0A080 |
chooseCatSelBackColor | string | The background color for the currently selected category. | #F0E080 |
chooseCatHoverBackColor | string | The background color for when hovering over a category. | #FF4020 |
chooseCatColor | string | The foreground color for choosing a category. | #202010 |
showCatBackColor | string | The background color for when showing a category in the list view.This allows you to differentiate and customize the category. | #D0D0A0 |
showCatColor | string | The foreground color for when showing a category in the list view. | #202000 |
sortOrder | string/option | Can set the entry sort order. The default is by date_added, but if you want to sort by name (used for a business directory) or by subject, you can set this here. | date_added |
spamWords | string | List of words to filter for spam. Includes obscene and spam words. If you put * in the Flexform under Spam->Word filter list, these are the words that are used. The list is comma-separated and is reversed, so “test,spam” would become “maps,tset”. If you have access to PHP, you can use strrev() to easily generate or decode these. | see them in Template>Constant Editor |
addSpamWords | string | List of additional words to filter for spam. The difference between this and 'spamWords' above is that these are not in reverse order. If you just want to add words and not bother with reversing them, then you can do that here. | blank |
duplicateCheckDelaySeconds | string | Whenever a new post is made, the plugin will check to see if this is a duplicate by checking all posts made within last 'x' seconds and see if the message fields are the same. If so, will report an error to user. This most likely happens when they refresh the browser. | 15 |
The template file determines how the Connector will be displayed. It contains HTML code along with markers that show where the data should be inserted.
The following details the template tags:
TEMPLATE TAG | DESCRIPTION |
###TITLE### | The title of the Connector can be shown. This is from the Flexform configuration. |
###SUBSCRIBE_BTN### | The subscribe button. This is for the main Connector screen. |
###MODERATE_BTN### | The moderate button. This will only appear if the logged in user is a moderator. |
###RESPONSE_MSG### | The response message for an action. This can also be an error message if they did not fill in a required field in the form. |
###INSTRUCTIONS### | The instructions for the Connector. This comes from the Flexform. |
###ENTRY_FORM_TOGGLEOFF### | This allows you to wrap the entry form in a CSS tag such that the display can be toggled between shown and hidden. The TOGGLEOFF refers to the user not initially seeing the entry form, but just a button to open up the Entry Form. You need to put this above the ###ENTRY_FORM###. |
###ENTRY_FORM_TOGGLEON### | This allows you to wrap the entry form so it can be toggled but starts in the TOGGLEON position which shows the entry form. |
###ENTRY_FORM### | The actual Entry Form. |
###DISPLAY_ENTRIES### | The display of entries or list of entries. |
###PAGELINK### | This is a wrapper for the links to the pages and you put in the ###PAGELINK### begin and then ###PAGELINK### end around. If you did not need or support the page links, then this would have a blank output. |
###LINK_PREV### | The link to the previous page. |
###PAGE_NUM### | The current page number. |
###LINK_NEXT### | The link to the next page. |
###DISPLAY_LISTHEADER### | The wrapper for the header that goes on top of the Display Entries. |
###CHOOSE_CATEGORY### | The choose category interface where the user can select a category to view – or “view all”. This will have the categories listed as horizontal buttons. This is good for 4-6 categories. |
###CHOOSE_CATEGORYDROPDOWN### | The choose category interface that is useful when you have many categories. This puts all the categories in a dropdown menu (including “view all”). |
###DISPLAY_HEADER### | The header for the entry list. This includes the Connector entry name. |
###DISPLAY_TOTAL### | The total number of entries. |
###DISPLAY_CATEGORY### | The wrapper for the display of categories. This will not be used if there are no categories so you can leave this in even if you do not have categories. |
###CATEGORY_NAME### | Will show the current category name. Note in previous versions this was ###SHOW_CATEGORY###. |
###CATEGORY_IMAGE### | Will show the category image if it is available. |
###ENTRY### | The wrapper for an entry. |
###SUBJECT### | The subject of the entry. |
###MESSAGE### | The main message. |
###RESPOND### | The respond button/link for the entry. |
###MODIFY### | The edit button/link for the entry. Only administrators will see this. |
###DELETE_BTN### | The delete button for an entry. Only administrators will see this. |
###HIDE_BTN### | The hide button for an entry. Only administrators will see this. |
###VIEW_SINGLE### | The view single button. This is not in the default template and must be added if you want to support viewing an item by itself. |
###NAME### | The name of the user who posted this. |
###SHOW_LOCATION### | The wrapper for showing the location. If all the location elements are blank, nothing within this wrapper will be shown. |
###LOCATION### | The location field is for a generic location, as opposed to specific fields such as city,state,country. |
###ADDRESS### | The address field. |
###CITY### | The city field. |
###STATE### | The state (could be used for province). |
###COUNTRY### | The country. |
###CATEGORY### | The current category. |
###DATE### | The date this entry was posted. (i.e., July 25, 2005). |
###TIME### | The time this entry was posted (i.e., 10:20pm) . |
###ALTERNATING_COLOR### | For handling if any 'alternatingEntry' CSS code is added. It could be more than colors, btw. If this is not set, then this is blank. If you remove this, the alternating colors will not work. |
###FORM_ERROR### | The listing of any errors in the form. |
###FORM_ERROR_FIELDS### | The listing of fields with errors. |
###FORM_NNN###...etc. | You can use FORM_NNN, FORM_NNN_REQUIRED, ORIG_NNN, and VALUE_NNN where NNN can be: NAME, SUBJECT, EMAIL, LOCATION, ADDRESS, CITY, STATE, COUNTRY, CATEGORY, and any other entry fields. The ###FORM_NNN### is the text for the given field (i.e., NAME, SUBJECT) in the form. |
###FORM_NNN_REQUIRED### | If the field is required for user to enter, then will put up the “required field” marker -- usually a “*”. You should put these in for every field in your template so that the required fields can be configurable. If this field is not required, then nothing is added. (example: If Subject is required, ###FORM_SUBJECT_REQUIRED### is set and so you will see.... Subject * : [_______] ... in the form.) |
###SHOW_NNN### begin...###SHOW_NNN### end | This will allow for most fields the ability to turn them on or off. If a field is wrapped in this ###SHOW_NNN###, then if you do not set the field to display in the Flexform or through TypoScript, then all fields will be shown. |
###VALUE_NNN###" | The current value for the field that is used within the form field. The extension may fill in default values where they are known. (i.e., ###VALUE_NAME### may be filled in if logged in user and know name). If there was an error in the form, then these are filled with the previously entered values. |
###ORIG_NNN### | The original value of a given field – this is only used in the Response Form to show the message that you are responding to. This is not for use in the form. The result may be the same as ###VALUE...### but will always be set to the given message. |
###PID### | The page ID. This is used as a hidden variable so the Connector can process the forms correctly and make sure they are coming from the right place. |
###MSGID### | The message ID. Another hidden variable. |
###MSGNUM### | The message ID for the Response form. Another hidden variable. |
###FORM_SUBMIT### | The submit button value for the entry and response forms. |
###HIDDEN_VARS### | Extra hidden variables generated by the Connector board. This must be included. |
###FORM_CANCEL### | The cancel button value. |
###FORM_SUBMIT_SUB### | The submit button value for the Subscribe/Unsubscribe Form for subscribing. |
###FORM_SUBMIT_UNSUB### | The submit button value for the Subscribe/Unsubscribe Form for unsubscribing. |
###CANCEL_BUTTON### | The cancel button for the entry form. |
###ACTION_URL### | The URL for processing the form. |
###RESPONSE_TITLE### | The title of the response form. |
###SUBSCRIBER_EMAIL### | The wrapper for the email info in the Subscribe/Unsubscribe Form. |
###CAPTCHA_INSERT### ###SR_FREECAP_NOTICE### ###SR_FREECAP_CANT_READ### ###SR_FREECAP_IMAGE### | For using the Image Captcha extension called sr_freecap. It is built into the template, but only if you have it active and extension installed will it work. |
###SHOW_TEXT_CAPTCHA### ###TEXT_CAPTCHA_LABEL### ###TEXT_CAPTCHA_FIELD### | These have the Text Captcha information. The Field is the one with the input, and the Label is the question. |
The following are marker sections within the template file. To change one or all of these, make sure you keep the same template names and the same sub-sections (wrappers) that the template section contains.
TEMPLATE NAME | DESCRIPTION |
|---|---|
###TEMPLATE_MAIN### | The main display of the entry form and entries. |
###TEMPLATE_DISPLAYENTRIES### | The template that shows the list of entries. |
###TEMPLATE_DISPLAYSINGLE### | The template that shows one item -- only used if have setup single view. |
###TEMPLATE_ENTRYFORM### | The entry form. |
###TEMPLATE_RESPONSEFORM### | The response form. |
###TEMPLATE_SUBSCRIBEFORM### | The subscribe/unsubscribe form. |
Included is the default template file in the extension pi1 directory called wecconnector.tmpl. The default template directory is EXT:wec_connector/pi1/wecconnector.tmpl.
Also, included in the extension are two example templates. One is for the “Light A Candle” and the other is for “Business Directory”. You can see how these are setup and modify them however you would like. If you wish to use them exactly as is, you could create a template file where the Connector is, and then put this in your TypoScript template Constants field:
plugin.tx_wecconnector_pi1.templateFile = typo3conf/ext/wec_connector/res/wecconnector-candle.tmpl
plugin.tx_wecconnector_pi1.entryBackColor = #300050content
plugin.tx_wecconnector_pi1.entryColor = #F0E030
plugin.tx_wecconnector_pi1.msgInfoColor = #F09030
Note that the constants are just a few to customize it. These give very close to the look at Ginghamsburg site. Hardcoded in the template is a 3 column and boxes. Note that the animated candle image, candle.gif, is located in the /res/ folder.For a business directory, you can use the following. Note that the business directory must have the display fields set for all fields you will use because they are included in this template. Also, an optional image is included for the business listing. You could customize this business directory to be used in whatever other manner you want.
plugin.tx_wecconnector_pi1.templateFile = typo3conf/ext/wec_connector/res/wecconnector-busdir.tmpl
plugin.tx_wecconnector_pi1.entryBackColor = #202020
plugin.tx_wecconnector_pi1.entryColor = #F0F0F0
plugin.tx_wecconnector_pi1.showCatBackColor = #4020A0
plugin.tx_wecconnector_pi1.showCatColor = #660000
To customize these templates, you can get the files from the /res/ folder and then upload them to fileadmin (i.e., fileadmin/wecconnector/ or wherever you would like to in fileadmin) and then set the templateFile to the location that you put them in.
This extension features a few items to configure in TypoScript. You can set these in the template SETUP or change the ext_typoscript_setup.txt.Date format (for showing up on posts)
The format for date and time can be found in php.net/date or in the TypoScript Reference (TS Ref) manual under date-conf.
general_dateWrap {date = n/d/Y
}
general_timeWrap {date = h:iA
}
This allows you to change it to English, European or Asian date/time formats.
This extension has extensive CSS support for all display items. Some CSS can be entered directly into the template file, if needed. However, we recommend that you change the CSS and setup your own file if you will be modifying the look extensively. The CSS file can be found in ext_typoscript_setup.txt file in the extension directory (usually this is at typo3conf/ext/wec_connector/ext_typoscript_setup.txt).
You can override the CSS by creating your own CSS file and putting it in the fileadmin folder. Note that with this method you must override the whole CSS file – you cannot just add or modify pieces. You can edit and then upload it using the Filelist utility. We would recommend to put it in a location like fileadmin/wec_connector/. After you go to Filelist, you have to create the wec_connector folder. Then upload the files and put them there. To let the extension know about this new location, you need to set the Typoscript page variable headerData to include the CSS file. You can do this by changing the Typoscript Setup for a page. You also must clear out the old CSS references. An example is below:
# Clear out the existing CSS
plugin.tx_wecconnector_pi1._CSS_DEFAULT_STYLE >
# Include the new CSS file on your page.
page.headerData.10 = TEXT
page.headerData.10.value = <link rel="stylesheet" type="text/css" href="fileadmin/wec_connector/myconn.css"
Some CSS elements of note that should be mentioned are:
CSS ELEMENT | DESCRIPTION |
|---|---|
.tx-wecconnector-content | This encapsulates all the content displayed in the main template. |
.x-wecconnector-button | The special button for the connector. |
.tx-wecconnector-navbar | Where the subscribe and moderate buttons will go. |
.tx-wecconnector-chooseCategory | The look and layout of the choose category section. |
.tx-wecconnector-entry | This encapsulates what is displayed for the entry. |
.tx-wecconnector-showCategory | The look and layout of the show category section. |
.tx-wecconnector-date .tx-wecconnector-name .tx-wecconnector-subject .tx-wecconnector-message .tx-wecconnector-messageinfo | Various parts of the entry that you can customize the look and layout of. |
.tx-wecconnector-form | The general form layout for the entry, response, and subscribe form. |
As of version 1.6.0, the Connector extension supports various ways to control spam on posts. These controls also enable you to customize the output. The following details these features:
You can set what HTML tags you want allowed in the post. If you set it to 0, then no HTML tags are allowed. If it is set to 1, then all HTML tags are allowed except <script>. If you want only certain tags, you can just add those. Example HTML tags include:<b> or <strong> - bold text<i> - italicize text<h1> -- header #1 (and also <h2>, <h3>, and<h4>)<a> -- link tag<script> -- script tag which allows complex (recommended to never allow this)<div>, <span> -- CSS tags for controlling layout<font> -- allows to set fonts<hr> -- allows horizontal rule<img> -- allows an image<p> - create a new paragraphother HTML tags for tables and HTML pagesNormally, someone would have to enter these in by hand and understand HTML coding. With the planned upgrade of the message section so it supports a FrontEnd Rich Text Editor, this field will be more useful.
An image captcha requires the user to enter in the distorted letters/numbers shown in an image. This prevents spammers from finding your form and submitting their spam easily. It requires a human-interaction for the form. The good about this is that it prevents 99% of spam. The problem is that it requires an extra step for people, and sometimes the distorted letters are hard to read and may take users a few tries – which can be quite frustrating. Also, the image captcha may limit people with visual disabilities from using your form.
A text captcha is an extra field in a form that requires the user to respond. We have just implemented a very simple one that requires the user to click on a checkbox that says “Are you a person?”. You can change this question to be whatever you want also using the tx_wecconnector_p1._LOCAL_LANG.default.textcaptcha_field = “your question”. The good about this is that it takes one click for a real person to do this. The problem is that some spammers will set and try to fill in all fields, and so this could easily be set. It would likely eliminate a large number of spammers, but not as effective as the Image Captcha.
Most spammers want you to visit their site and often their messages will have many links in them. The default links allowed is 1 and if someone adds more, they are all removed. If you set the links allowed to remove all links, then no one can post any links. A link is considered to be an <a href=”...”>...</a> or anything that begins with http://
The word filter is for both spammers and for those who may abuse your Connector by adding hateful or obscene posts. These allow you to filter, moderate or delete them. With moderating, you can double check to make sure the post has obscene words. This may be helpful at first to make sure no posts get rejected.
You can add onto the existing filter, which includes many spam words by saying “*,spam,superspam...”, etc. where 'spam' is a word you want to filter. If you want to have your own set of words, do not use the *.
To change or add to the spam words, you can also edit the 'spamWords' or 'addSpamWords' constants to add your own spam words. You access these through Template->Constant Editor->tx_wecconnector_pi1. See the Constant List for more information about these.
One sure way to control spam is to make it so that you have to login to post or comment. This will eliminate most of your spam problems but will usually limit the number of public users from posting because they do not want to signup at your site just to comment or post.
Out of research done, additional ways that could improve your spam control are...
#1 Add a fake form in your template
You would go to your template (or copy the weconnector.tmpl file from the typo3conf/ext/wec_connector/pi1 folder). You would find the ###TEMPLATE_ENTRYFORM### section and copy the whole form (except the <a name> tag) and then paste it right at the top. Then change the first <div> so it hides the form, and then add a ###INPUT_FAKE_FORM### after the <form>. This will add an “ignore” parameter which will ignore any input. You could also change ###ACTION_URL### to one of your own that goes nowhere.
<span class="tx-wecconnector-form-error">###FORM_ERROR### ###FORM_ERROR_FIELDS###</span>
<div class="tx-wecconnector-form">
<form name="submitrequest" method="post" action="###ACTION_URL###" enctype="multipart/form-data">
###INPUT_FAKE_FORM###
#2 Add onclick for your form processingMany spammers just scan HTML code and look for the action parameter in a form to submit. If you use onclick, this can make it more difficult because they need to run the Javascript interpreter on it – not just scan the text. It should be as simple as saying:
<form name="submitrequest" method="post" onclick="###ACTION_URL###" enctype="multipart/form-data">
Or what you can do is make the form action bogus and put the real action in your submit button like so:
<form name=”submitrequest” method=”post” onclick=”www.bogus.com” enctype="multipart/form-data">
<input type="submit" value="###FORM_SUBMIT###" onclick=”this.form.action='###ACTION_URL###'” />
-------
As we find other methods, we will add to the extension to help combat spam. If you know of any good techniques, please email us and let us know.
The text for this extension has been placed in the typo3conf/ext/wecconnector/ folder under pi1/locallang.php file and locallang_db.php file. You can extend to support different languages by adding translations to these files.
To configure a different language, you should refer to the TYPO3 documentation and check out the one-page tree description in http://typo3.org/documentation/tips-tricks/multi-language-sites-in-typo3/ .
As an overview, you would set the following in Typoscript:
# Set up the language variable "L" to be passed along with links
config.linkVars = L
# For German/Deutsch language, sys_language.uid = 2
config.sys_language_uid = 2
config.language = de
config.locale_all = de_DE
# For Dutch language,
config.sys_language_uid = 1
config.language = dk
config.locale_all = danish
If you find other needs for supporting other languages, please contact the developers so we can accommodate you.
This extension does support single view if you need it. To make it work in your template, you can add the ###VIEW_SINGLE### in the TEMPLATE_DISPLAYCONTENT or make a link to the single view directly. The ###VIEW_SINGLE### creates a button that links to a given request. To link directly, you add tx_wecconnector[single]=<id of request>.
Also, there is a ###TEMPLATE_SINGLE### if you want to customize the entry display. If you do not have a customized entry, it will use the ###ENTRY### in the TEMPLATE_DISPLAYCONTENT. In this template, you will find a back button that can be changed or altered in the template as needed.
