Simple FAQ¶
Questions, answers, images and a little animation.¶
Classification: | ehfaq |
---|---|
Version: | 1 |
Language: | en |
Description: | Questions, answers, images and a little animation. Just another FAQ based on the Extbase/Fluid combo. No FE editing. |
Keywords: | faq, questions, answers, images, jQuery, foldout |
Copyright: | 2016 |
Author: | Elmar Hinz |
Email: | t3elmar@gmail.com |
License: | This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml |
Rendered: | April 23, 2016 |
The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.
Table of Contents
Introduction¶
What does it do?¶
This extension basically does what you would expect from a simple FAQ extension. It displays a list of questions and answers in the FE, that are editable in the BE.
Features¶
- Questions: Plain text.
- Answers:
RTE
. - Images: If a description is provided, they are rendered as figures.
- Organization: In sysfolders.
- Sorting: Manual.
- Foldout animation: Requires
jQuery
.
Limits¶
- No categories.
- No FE editing.
- No search form.
- No default
CSS
.
Screenshots¶
No screenshots yet.
Administrator Manual¶
Installation¶
The installation follows the usual process. A composer.json
file is provided
to support the administration by composer
.
Developer Manual¶
This usage of this extensions follows the standards of extensions based on
Extbase
and FLUID
. You can adjust the FLUID
templates a usual,
by adding your template folders to the TypoScript
.
Important
Include the static template named Simple FAQ
into TypoScript
.
Important
To use the foldout animation a jQuery
library needs to be included
in the HTML
file.
FAQ¶
How do I set the sys folder with the entries?¶
The sysfolder with the entries is either selected in the plugins form or can
be set in the TypoScript Constants
by providing a
Default storage PID
.
How do I set the size of the images?¶
The maximum size of the images is set in the TypoScript Constants
as
maximum width
and maximum height
. The rest is to be controlled by
CSS styles
.
Why isn’t the JS folding working?¶
The JS
file depends on JQuery
. It needs to be included after the
jQuery
library. The JS
file is included by the Typoscript
page.includeJSFooter
directive. Typically jQuery
would be included by
the page.includeJSFooterlibs.jquery
directive to be included before:
page.includeJSFooterlibs.jquery = path/to/jquery.min.js
page.includeJSFooter.ehfaq = EXT:ehfaq/Resources/Public/JavaScript/main.js
How do I customize the templates?¶
In the TypoScript Constants
you can set your own template root directories
for templates, partials and layout.
I customized the templates. Why isn’t the JS folding working any more?¶
To keep the JS
script working your templates must keep the classes in
the given hierarchy, while you can freely customize the HTML
tags:
.tx-ehfaq
.tx-ehfaq-topic
.tx-ehfaq-topic-header
.tx-ehfaq-topic-body
.tx-ehfaq-topic
.tx-ehfaq-topic-header
.tx-ehfaq-topic-body
There must be a parent-child relation between .tx-ehfaq-topic
and
.tx-ehfaq-header
.
Users Manual¶
Installing the Plugin¶
On the left side select the module WEB > Page
.
Create the page where to output the Simple FAQ
. Create a sysfolder,
where you like to store the FAQ entries.
Tip
It’s a good idea to place this folder below the page where you like to output the FAQ. By this it is easy to spot the location of the folder.
Insert a new content element into the page. Select General Plugin
in the
wizard. In the tab Plugin
open the dropdown Selected Plugin
and choose
Simple FAQ
. In the field Record Storage Page
select the sysfolder where
you store the FAQ.
In the tab Genaral
adjust Column
, Language
and Header
as usual.
Creating and Editing the FAQ Entries¶
On the left side select the module WEB > List
. In the page tree select the
sysfolder where to store the entries. Click the Create new record
icon.
Select Simple FAQ > FAQ
as new record. Edit at least the fields Question
and Answer
. Optionally you may add images like known from other content
elements. Save.
Editing, hiding and deleting work as usual.
Important
After all operations on the records flush the FE caches to rebuild the page.
Manually sorting the FAQ Entries¶
On the left side select the module WEB > List
. In the page tree select the
sysfolder where to store the entries. Below the list mark the checkbox
Extended view
to display the arrow buttons for to sort the entries.
Advanced Features¶
You may organize the entries into multiple sysfolders. It’s possible to select
the folders one by one in the plugins form field Record Storage Page
.
In the form field Recursive
you can set levels of recursion, if you like
to organize the entries as a tree of folders.
Configuration Reference¶
TypoScript Reference¶
Plugin ehfaq_faq¶
Maximum image height¶
- Property
- maxHeight
- Context
- plugin.tx_ehfaq_faq.settings.images
- Data type
- integer
- Default
- 200
- Constant
- $plugin.tx_ehfaq_faq.settings.images.maxHeight
- Description
- Maximum height of images in pixels. Maximum height and maximum width work together so that the proportion of the image is kept.
Maximum image width¶
- Property
- maxWidth
- Context
- plugin.tx_ehfaq_faq.settings.images
- Data type
- integer
- Default
- 200
- Constant
- $plugin.tx_ehfaq_faq.settings.images.maxWidth
- Description
- Maximum width of images in pixels. Maximum height and maximum width work together so that the proportion of the image is kept.
Path to foldout animation JS file¶
- Property
- ehfaq
- Context
- page.includeJSFooter
- Data type
- path
- Default
- EXT:ehfaq/Resources/Public/JavaScript/main.js
- Description
- Path to the JS file that does the foldout animation. It depends on the jQuery library, that needs to be included before.
Storage PID of FAQ records¶
- Property
- storagePid
- Context
- plugin.tx_ehfaq_faq.persistence
- Data type
- integer
- Default
- Not set at all.
- Description
- The ID of the sys folder, that keeps the FAQ records.
- Important
- If set, it will overrule the settings in the plugin form even if an empty value is provided. This strange behaviour may be caused by a possible bug in the current extbase library and may change in future.
Recurse into sub folders of the storage sys folder¶
- Property
- recursive
- Context
- plugin.tx_ehfaq_faq.persistence
- Data type
- bool
- Default
- 0
- Description
- If 1 (true), recurse infinite into sub folders, else the settings of the plugin forms take precedence.
Folder with FLUID templates to customize the HTML¶
- Property
- templateRootPaths
- Context
- plugin.tx_ehfaq_faq.view
- Data type
- fallback list of directory paths with integers as keys
- Default
- EXT:ehfaq/Resources/Private/Templates/
- Constant:
- $plugin.tx_ehfaq_faq.view.templateRootPath
- Description
- Directories with a higher key override directories with a lower one. The default has the key 0. Filling in the constant will set key 1.
- Example
plugin.tx_ehfaq_faq.view.templateRootPaths { 10 = EXT:myextension/Resources/Private/Templates/ }
Folder with FLUID partials to customize the HTML¶
- Property
- partialRootPaths
- Context
- plugin.tx_ehfaq_faq.view
- Data type
- fallback list of directory paths with integers as keys
- Default
- EXT:ehfaq/Resources/Private/Partials/
- Constant:
- $plugin.tx_ehfaq_faq.view.partialRootPath
- Description
- Directories with a higher key override directories with a lower one. The default has the key 0. Filling in the constant will set key 1.
- Example
plugin.tx_ehfaq_faq.view.partialRootPaths { 10 = EXT:myextension/Resources/Private/Partials/ }
Folder with FLUID layouts to customize the HTML¶
- Property
- layoutRootPaths
- Context
- plugin.tx_ehfaq_faq.view
- Data type
- fallback list of directory paths with integers as keys
- Default
- EXT:ehfaq/Resources/Private/Layouts/
- Constant
- $plugin.tx_ehfaq_faq.view.layoutRootPath
- Description
- Directories with a higher key override directories with a lower one. The default has the key 0. Filling in the constant will set key 1.
- Example
plugin.tx_ehfaq_faq.view.layoutRootPaths { 10 = EXT:myextension/Resources/Private/Layouts/ }
ChangeLog¶
See ChangeLog file.
Links¶
TER: | |
---|---|
Git Repository: | |
Bug Tracker: | |
Contact: | |
Local Documentation Rendering: | |