Install the extension via the Extension Manager (EM).
Select either the “CSS-based template (ab_linklist)” or the “Table-based template (ab_linklist)" in the "Include static (from extensions)"-section of your main/extension TypoScript template. You can also select “Default CSS-styles (ab_linklist)” if you want to get some basic CSS-definitions.
If you don't know how to do this see section "Templates" in the "Getting Started" document: http://typo3.org/documentation/document-library/doc_tut_quickstart/Templates/
Illustration 11 - Include the default TypoScript template in your main template
Insert a new Content element “Plugin” on the page where the linklist shall be displayed. Therefore choose “Modern Linklist” according to the following Illustration:
Illustration 12 - Insert plugin “Modern Linklist” on the page
After that you can configure the plugin using the following FlexForms (have a look at the reference for further information about the different options and their meaning):
Illustration 13 - The “General Settings” FlexForm
Now you can start adding (sub)category and link records to the page where you just inserted the plugin or to any other page/sysfolder if you set the “Startingpoint” appropriately.
Illustration 20 - Adding category and link records
Have fun! ;)
If you want to import your categories and links from cmw_linklist you can also use the import functionality described below but the recommended way is to follow these instructions which also do the trick.
Create a backup of your cmw_linklist database tables (tx_cmwlinklist_{link|category|category_catuid_before_mm}).
Deinstall cmw_linklist with the Extension Manager (EM) and also make sure to delete all cmw_linklist plugins you added to your site.
Rename the database tables tx_cmwlinklist_{link|category|category_catuid_before_mm} to tx_ablinklist_{link|category|category_catuid_before_mm}. You can use for example phpMyAdmin to do this.
After that install the “Modern Linklist” extension, the EM should update/change the database tables automatically.
Add your plugins to your pages again and configure the extension according to the “Configuration” section.
Enjoy “Modern Linklist” and perhaps delete your backup created in step 1 ;)
If you want to import your categories and links from other (TYPO3) linklists or database tables an appropriate SQL query can be generated automatically in the “Import categories/links” backend view. Just follow the instructions step by step and use for example phpMyAdmin in your TYPO3 backend afterwards to execute the query.
How can I change the appearance of the pagebrowser?
When looking at the generated html source code you can see that the pagebrowser and its components are wrapped in several <div> tags which you can freely modify by adding appropriate CSS definitions to your site.
Since version 1.6.6 you also have the possibility to substitute the built-in pagebrowser with your own pagebrowser script. The file "example_userPageBrowserFunc.php" was added in folder "res/" of the extension which contains a example pagebrowser userfunction you can change to fit your needs (see the file for a description and the needed TypoScript setup).
How can I enable the PiBasePagebrowser/use the new features of the extended TYPO3 v3.8.0 pagebrowser?
Just overwrite the provided (static) TypoScript setup in your extension/main template. The following default settings have been predefined:
usePiBasePagebrowser = 0
pageBrowser {
maxPages = 50
showResultCount = 1
showPBrowserText = 0
dontLinkActivePage = 1
tableParams = cellpadding="2" align="center"
hscText = 1
# settings for the extended pagebrowser from TYPO3 3.8.0
showFirstLast = 0
pagefloat = center
showRange = 0
disabledLinkWrap = <span style="color:#bbb;">|</span>
inactiveLinkWrap = |
activeLinkWrap = <b>|</b>
browseLinksWrap = |
showResultsWrap = |<br />
showResultsNumbersWrap = |
browseBoxWrap = <div class="tx-ablinklist-pi1-browsebox">|</div>
}
How can I change the display of date and time?
First make sure to set the correct language and locale in your main template (please refer to the TYPO3 Documentation on how to do this). After that just overwrite the provided (static) TypoScript setup in your extension/main template.
For example a possible German format:
plugin.tx_ablinklist_pi1 {
date_stdWrap.strftime = %d. %B %Y
time_stdWrap.strftime = %H:%M:%S Uhr
}
How can I change the labels of the pagebrowser?
Create an extension template for the page you added the “Modern Linklist” to and add the following TypoScript code in the “Setup” field of the template.
For example a possible German format (not using the PiBasePagebrowser):
plugin.tx_ablinklist_pi1 {
_LOCAL_LANG.de {
pi_list_browseresults_prev = < vorherige Einträge
pi_list_browseresults_next = weitere Einträge >
pi_list_browseresults_displays = Anzeige: <b>%s bis %s</b> von <b>%s</b>
}
}
Another German example (using the PiBasePagebrowser in this case):
plugin.tx_ablinklist_pi1 {
# enable the PiBasePagebrowser
usePiBasePagebrowser = 1
_LOCAL_LANG.de {
pi_list_browseresults_prev = < vorherige Einträge
pi_list_browseresults_next = weitere Einträge >
pi_list_browseresults_displays (
Anzeige: <b>###FROM### bis ###TO###</b> von <b>###OUT_OF###</b>
)
}
}
How can I change the label of the search button?
Create an extension template for the page you added the “Modern Linklist” to and add the following TypoScript code in the “Setup” field of the template.
For example a possible German format:
plugin.tx_ablinklist_pi1 {
_LOCAL_LANG.de {
pi_list_searchBox_search = Suchen
}
}
How can I change the appearance and layout of the linklist?
In subfolder “pi1” of the extension you will find an example template file called “tx_ablinklist_pi1.tmpl” which is used by the extension by default. Copy this file to some other place (perhaps where you store your other templates) and edit it to fit your needs. Afterwards select it in the plugin options under “Template file”. As (since version 1.6.0) the ATagParams of the frontend links can be defined/changed you can also use this additional method.
How can I define/change the parameters (ATagParams) of the frontend links?
Just overwrite the provided (static) TypoScript setup in your (extension) template. The following default style classes for the links have been predefined:
# listView link/category parameter settings
listView {
# ATagParams
categoryLabel.ATagParams = class="tx_ablinklist_listView_categoryLabel"
linkAddNew.ATagParams = class="tx_ablinklist_listView_linkAddNew"
linkLabel.ATagParams = class="tx_ablinklist_listView_linkLabel"
linkDetails.ATagParams = class="tx_ablinklist_listView_linkDetails"
linkReportBroken.ATagParams = class="tx_ablinklist_listView_linkReportBroken"
linkRate.ATagParams = class="tx_ablinklist_listView_linkRate"
linkImage.ATagParams = class="tx_ablinklist_listView_linkImage"
}
# treeView link parameter settings
treeView {
# ATagParams
linkAddNew.ATagParams = class="tx_ablinklist_treeView_linkAddNew"
linkLabel.ATagParams = class="tx_ablinklist_treeView_linkLabel"
linkDetails.ATagParams = class="tx_ablinklist_treeView_linkDetails"
linkReportBroken.ATagParams = class="tx_ablinklist_treeView_linkReportBroken"
linkRate.ATagParams = class="tx_ablinklist_treeView_linkRate"
linkImage.ATagParams = class="tx_ablinklist_treeView_linkImage"
}
# searchView link parameter settings
searchView {
# AtagParams
categoryLabel.ATagParams = class="tx_ablinklist_searchView_categoryLabel"
linkLabel.ATagParams = class="tx_ablinklist_searchView_linkLabel"
linkDetails.ATagParams = class="tx_ablinklist_searchView_linkDetails"
linkReportBroken.ATagParams = class="tx_ablinklist_searchView_linkReportBroken"
linkRate.ATagParams = class="tx_ablinklist_searchView_linkRate"
linkImage.ATagParams = class="tx_ablinklist_searchView_linkImage"
}
# topView link parameter settings
topView {
# ATagParams
linkLabel.ATagParams = class="tx_ablinklist_topView_linkLabel"
linkDetails.ATagParams = class="tx_ablinklist_topView_linkDetails"
linkImage.ATagParams = class="tx_ablinklist_topView_linkImage"
}
# catalogView link parameter settings
catalogView {
# AtagParams
categoryLabel.ATagParams = class="tx_ablinklist_catalogView_categoryLabel"
subcategoryLabel.ATagParams = class="tx_ablinklist_catalogView_subcategoryLabel"
linkAddNew.ATagParams = class="tx_ablinklist_catalogView_linkAddNew"
linkLabel.ATagParams = class="tx_ablinklist_catalogView_linkLabel"
linkDetails.ATagParams = class="tx_ablinklist_catalogView_linkDetails"
linkReportBroken.ATagParams = class="tx_ablinklist_catalogView_linkReportBroken"
linkRate.ATagParams = class="tx_ablinklist_catalogView_linkRate"
linkImage.ATagParams = class="tx_ablinklist_catalogView_linkImage"
}
How can I define/change the wraps for the generated output?
Just overwrite the provided (static) TypoScript setup in your (extension) template. The following wraps, crops, etc. have been predefined:
# General stdWraps
categoryPath_stdWrap.wrap = |
linkLabel_stdWrap.wrap = <b>|</b>
addLink_stdWrap.wrap = <b>|</b>
addLinkText_stdWrap.wrap = <b>|</b>
mandatoryField_stdWrap.wrap = <span style="color:red;">*</span>|
reportLinkBrokenText_stdWrap.wrap = <b>|</b>
rateLinkText_stdWrap.wrap = <b>|</b>
formErrorMsg_stdWrap.wrap = |
nonPublicLinkMessage_stdWrap = |
linkLabel_stdWrap.wrap = |
linkDescription_stdWrap.wrap = |
# listView link/category parameter settings
listView {
# Wraps
categories_stdWrap.wrap = |
category_stdWrap.wrap = |
categoryPath_stdWrap.wrap = |
categoryLabel_stdWrap.wrap = |
categoryDescription_stdWrap {
wrap = <br/><i>|</i>
crop =
}
links_stdWrap.wrap = <b>|</b>
linkAddNew_stdWrap.wrap = |
linkTeaser_stdWrap {
wrap = |
crop = 30 | ... | 1
}
linkDescription_stdWrap.wrap = |
linkLabel_stdWrap.wrap = |
linkDetails_stdWrap.wrap = |
linkReportBroken_stdWrap.wrap = |
linkRate_stdWrap.wrap = |
}
# treeView link parameter settings
treeView {
# Wraps
categoryLabel_stdWrap.wrap = <b>|</b>
categoryDescription_stdWrap {
wrap = <br/><i>|</i>
crop =
}
linkAddNew_stdWrap.wrap = |
linkTeaser_stdWrap {
wrap = |
crop = 30 | ... | 1
}
linkDescription_stdWrap.wrap = |
linkLabel_stdWrap.wrap = |
linkDetails_stdWrap.wrap = |
linkReportBroken_stdWrap.wrap = |
linkRate_stdWrap.wrap = |
}
# searchView link parameter settings
searchView {
# Wraps
resultMessage_stdWrap.wrap = |
noLinksMessage_stdWrap.wrap = |
categoryPath_stdWrap.wrap = |
categoryLabel_stdWrap.wrap = <b>|</b>
categoryDescription_stdWrap {
wrap = <br/><i>|</i>
crop =
}
links_stdWrap.wrap = <b>|</b>
linkTeaser_stdWrap {
wrap = |
crop = 30 | ... | 1
}
linkDescription_stdWrap.wrap = |
linkLabel_stdWrap.wrap = |
linkDetails_stdWrap.wrap = |
linkReportBroken_stdWrap.wrap = |
linkRate_stdWrap.wrap = |
}
# topView link parameter settings
topView {
# Wraps
topMessage_stdWrap.wrap = <b>|</b>
categoryPath_stdWrap.wrap = |
categoryLabel_stdWrap.wrap = <b>|</b>
categoryDescription_stdWrap {
wrap = <br/><i>|</i>
crop =
}
linkTeaser_stdWrap {
wrap = |
crop = 30 | ... | 1
}
linkDescription_stdWrap.wrap = |
linkLabel_stdWrap.wrap = |
linkDetails_stdWrap.wrap = |
}
# catalogView link parameter settings
catalogView {
# Wraps
categoryPath_stdWrap.wrap = |
categoryLabel_stdWrap.wrap = |
categoryDescription_stdWrap {
wrap = <br/><i>|</i>
crop =
}
subcategoryLabel_stdWrap.wrap = |
subcategoryDescription_stdWrap {
wrap = <br/><i>|</i>
crop =
}
links_stdWrap.wrap = <b>|</b>
linkAddNew_stdWrap.wrap = |
linkTeaser_stdWrap {
wrap = |
crop = 30 | ... | 1
}
linkDescription_stdWrap.wrap = |
linkLabel_stdWrap.wrap = |
linkDetails_stdWrap.wrap = |
linkReportBroken_stdWrap.wrap = |
linkRate_stdWrap.wrap = |
}
How can I define/change the indention factor for the TREE view?
Just overwrite the provided (static) TypoScript setup in your (extension) template. The following indentionFactor has been predefined:
# treeView link parameter settings
treeView {
# indentionFactor
indentionFactor = 40
}
How can I define/change the separator and the appendix for the CATALOG view?
Just overwrite the provided (static) TypoScript setup in your (extension) template. The following separator and appendix have been predefined:
# catalogView link parameter settings
catalogView {
# Separator and appendix
separator = ,
appendix = ...
}
How can I access/use arbitrary database fields of categories or links with TypoScript?
For example, to access/use the “label” database field, create an extension template for the page you added the “Modern Linklist” to and add the following TypoScript code in the “Setup” field of the template:
# Condition is true if a category is shown[globalVar = GP:tx_ablinklist_pi1|category_uid > 0]lib.linkTitle = COAlib.linkTitle {10 = RECORDS10 {source = {GPvar:tx_ablinklist_pi1|category_uid}source.insertData = 1tables = tx_ablinklist_categoryconf.tx_ablinklist_category >conf.tx_ablinklist_category = TEXTconf.tx_ablinklist_category.field = label}}# Condition is true if a link is shown[globalVar = GP:tx_ablinklist_pi1|uid > 0]lib.linkTitle = COAlib.linkTitle {10 = RECORDS10 {source = {GPvar:tx_ablinklist_pi1|uid}source.insertData = 1tables = tx_ablinklist_linkconf.tx_ablinklist_link >conf.tx_ablinklist_link = TEXTconf.tx_ablinklist_link.field = label}}[GLOBAL]
This creates a TypoScript object called "lib.linkTitle" filled with the label of a) the current category or b) the current link. This objectt could for example be used to fill the description HTML metatag:
page.headerData.20 >page.headerData.20 < lib.linkTitelpage.headerData.20.wrap = <meta name="description" content=" | " />
How can I enable the frontend edit panels for link records?
First, make sure the adminPanel is enabled in the TypoScript “Setup” of your main/extension template:
config.admPanel = 1
Afterwards, enable “Display Edit Panels” in the “Editing” section of the admin panel and click “Update”. Given that you have added the ###EDIT_PANEL### marker to your template, the edit panels will show up in the frontend.
