Initial commit - Typo3 11.5.41
This commit is contained in:
Matteo Gallo
@@ -0,0 +1,50 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatesGroupNews:
|
||||
|
||||
==================
|
||||
Group news records
|
||||
==================
|
||||
|
||||
.. tip::
|
||||
This is a feature delivered by Fluid, so you can use it also in other extensions and projects.
|
||||
|
||||
|
||||
The following example will group all given news records by the property "firstCategory".
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:if condition="{news}">
|
||||
<f:then>
|
||||
<div style="border:1px solid red">
|
||||
<f:groupedFor each="{news}" as="groupedNews" groupBy="firstCategory" groupKey="cat">
|
||||
<div style="border:1px solid blue;padding:10px;margin:10px;">
|
||||
<h1>{cat.title}</h1>
|
||||
<f:for each="{groupedNews}" as="newsItem">
|
||||
<div style="border:1px solid pink;padding:5px;margin:5px;">
|
||||
{newsItem.title}
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:groupedFor>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="no-news-found">
|
||||
<f:translate key="list_nonewsfound"/>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
|
||||
Keep an eye on performance!
|
||||
===========================
|
||||
|
||||
To be able to group the records, Fluid will load every record itself and
|
||||
groups those afterwards.
|
||||
|
||||
If you plan to group many records just for getting something like a count,
|
||||
maybe it is better to fire the query directly and don't use Fluid for that.
|
||||
|
||||
However if the result is on a cacheable page, the issue is only relevant on the
|
||||
first hit.
|
||||
@@ -0,0 +1,135 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatingExamples:
|
||||
|
||||
=========
|
||||
Templates
|
||||
=========
|
||||
|
||||
.. container:: row m-0 p-0
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Getting started <templatingStart>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
on using Fluid templates with EXT:news
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Bootstrap Templates <templatesBootstrap>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Include the templates for Twitter Bootstrap version 3 or 5 provided
|
||||
by this extension.
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Assorted snippets <templatesSnippets>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Helpful Fluid Snippets that you can use in your own news templates.
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`ViewHelpers <viewHelpersTutorial>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
A quick tutorial on how to use ViewHelpers in Fluid
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Template Selector <tutorialExtendNews>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Use this technique to provide different templates for the list view
|
||||
and enable your editors to chose between them in the plugin settings.
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Render content elements<renderContentElements>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Influence how content elements used within news records should be
|
||||
rendered.
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Group news records <templatesGroupNews>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Group news by a certain property in the output.
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`Group news records <templatesMultipleCats>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Filter news by multiple categories.
|
||||
|
||||
.. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
|
||||
|
||||
.. container:: card px-0 h-100
|
||||
|
||||
.. rst-class:: card-header h3
|
||||
|
||||
.. rubric:: :ref:`overwriteDemand <templatesMultipleCats>`
|
||||
|
||||
.. container:: card-body
|
||||
|
||||
Set overwriteDemand in links.
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 5
|
||||
:titlesonly:
|
||||
:hidden:
|
||||
|
||||
Start/Index
|
||||
TwitterBootstrap/Index
|
||||
Snippets/Index
|
||||
ViewHelpers/Index
|
||||
TemplateSelector/Index
|
||||
RenderContentElements/Index
|
||||
GroupNewsRecords/Index
|
||||
MultiCategorySelection/Index
|
||||
OverwriteDemandInFrontend/Index
|
||||
@@ -0,0 +1,68 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatesMultipleCats:
|
||||
|
||||
==================================
|
||||
Filter news by multiple categories
|
||||
==================================
|
||||
|
||||
The default category template `Category/List` allows only filtering by a single category. If you need to filter by multiple categories, you can use such template:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<html xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
|
||||
<f:layout name="General" />
|
||||
<!--
|
||||
=====================
|
||||
Templates/Category/List.html
|
||||
-->
|
||||
|
||||
<f:section name="content">
|
||||
<f:if condition="{categories}">
|
||||
<f:then>
|
||||
|
||||
|
||||
<f:render section="categoryTree" arguments="{categories:categories,overwriteDemand:overwriteDemand}" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:translate key="list_nocategoriesfound" />
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
<f:section name="categoryTree">
|
||||
<ul>
|
||||
<f:for each="{categories}" as="category">
|
||||
<li>
|
||||
<n:multiCategoryLink.isCategoryActive list="{overwriteDemand.categories}" item="{category.item.uid}">
|
||||
<f:then>
|
||||
<f:link.page title="{category.item.title}" class="active" pageUid="{settings.listPid}"
|
||||
additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.item.uid}}}">{category.item.title}
|
||||
</f:link.page>
|
||||
|
||||
(<f:link.page title="{category.item.title}" class="active" pageUid="{settings.listPid}"
|
||||
additionalParams="{n:multiCategoryLink.arguments(mode:'remove',item:category.item.uid,list:overwriteDemand.categories)}">remove
|
||||
</f:link.page>)
|
||||
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:link.page title="{category.item.title}" pageUid="{settings.listPid}"
|
||||
additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.item.uid}}}">{category.item.title}
|
||||
</f:link.page>
|
||||
|
||||
(<f:link.page title="{category.item.title}" class="active" pageUid="{settings.listPid}"
|
||||
additionalParams="{n:multiCategoryLink.arguments(mode:'add',item:category.item.uid,list:overwriteDemand.categories)}">add
|
||||
</f:link.page>)
|
||||
</f:else>
|
||||
</n:multiCategoryLink.isCategoryActive>
|
||||
|
||||
<f:if condition="{category.children}">
|
||||
<f:render section="categoryTree" arguments="{categories: category.children,overwriteDemand:overwriteDemand}" />
|
||||
</f:if>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</f:section>
|
||||
</html>
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _overwriteDemand-in-frontend:
|
||||
|
||||
============================
|
||||
Set overwriteDemand in links
|
||||
============================
|
||||
|
||||
Sometimes it can be nice to define links with overwriteDemand properties in the
|
||||
frontend. Use cases are:
|
||||
|
||||
- Change the sorting in the frontend
|
||||
- Define some category filter
|
||||
- ...
|
||||
|
||||
The following example defines the ordering
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:link.page additionalParams="{tx_news_pi1:{overwriteDemand:{order: 'datetime desc'}}}">
|
||||
Order datetime descending
|
||||
</f:link.page>
|
||||
|
||||
.. important::
|
||||
The checkbox **Disable override demand** in the list plugin (Tab Additional)
|
||||
must **not** be set to allow overriding the properties.
|
||||
@@ -0,0 +1,53 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _renderContentElements:
|
||||
|
||||
=======================
|
||||
Render content elements
|
||||
=======================
|
||||
|
||||
If news is configured to use relations to content elements, those are shown
|
||||
by default in the detail view.
|
||||
|
||||
There are two options how to render those elements
|
||||
|
||||
Using TypoScript
|
||||
================
|
||||
|
||||
This is the default way in EXT:news. A basic TypoScript configuration is used to render those. This look like this:
|
||||
|
||||
.. code-block:: typoscript
|
||||
|
||||
lib.tx_news.contentElementRendering = RECORDS
|
||||
lib.tx_news.contentElementRendering {
|
||||
tables = tt_content
|
||||
source.current = 1
|
||||
dontCheckPid = 1
|
||||
}
|
||||
|
||||
If you need to extend this, the best way is to introduce your own TypoScript which can be saved anywhere.
|
||||
This needs then to be referenced in the template.
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:if condition="{newsItem.contentElements}">
|
||||
<f:cObject typoscriptObjectPath="lib.yourownTypoScript">{newsItem.contentElements}</f:cObject>
|
||||
</f:if>
|
||||
|
||||
|
||||
Using Fluid
|
||||
===========
|
||||
|
||||
You can also use Fluid render the content elements. As an example:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:if condition="{newsItem.contentElements}">
|
||||
<f:for each="{newsItem.contentElements}" as="element">
|
||||
<h3>{element.title}</h3>
|
||||
<f:if condition="{element.CType} == 'text'">
|
||||
{element.bodytext -> f:format.html()}
|
||||
</f:if>
|
||||
</f:for>
|
||||
</f:if>
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatesSnippets:
|
||||
|
||||
=================
|
||||
Assorted snippets
|
||||
=================
|
||||
|
||||
This section contains snippets making EXT:news more awesome which might be useful for your projects as well.
|
||||
|
||||
.. only:: html
|
||||
|
||||
.. contents::
|
||||
:local:
|
||||
:depth: 1
|
||||
|
||||
Show FAL properties in fluid
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
Every property of a file, e.g. the copyright (available via EXT:filemetadata) can be rendered in templates by using e.g. `{file.originalResource.properties.copyright}`.
|
||||
|
||||
A full example can look like this
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:for each="{newsItem.mediaNonPreviews}" as="mediaElement">
|
||||
<div class="thumbnail">
|
||||
<f:media file="{mediaElement}" class="img-fluid" />
|
||||
<f:if condition="{mediaElement.originalResource.properties.copyright}">
|
||||
<small>{mediaElement.originalResource.properties.copyright}</small>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:for>
|
||||
|
||||
Use `<f:debug>{mediaElement.originalResource.properties}</f:debug>` to get all available properties
|
||||
|
||||
Improved back links
|
||||
^^^^^^^^^^^^^^^^^^^
|
||||
The back link on a detail page is a fixed link to a given page. However it might be that you use multiple list views
|
||||
and want to change the link depending on the given list view.
|
||||
|
||||
A nice solution would be to use this JavaScript jQuery snippet:
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
if ($(".news-backlink-wrap a").length > 0) {
|
||||
if(document.referrer.indexOf(window.location.hostname) != -1) {
|
||||
$(".news-backlink-wrap a").attr("href","javascript:history.back();");
|
||||
}
|
||||
}
|
||||
|
||||
Creating links with Fluid
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
||||
Besides the ViewHelper :html:`<n:link />` you can also use the ViewHelpers of Fluid itself:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:link.page pageUid="13" additionalParams="{tx_news_pi1: {controller: 'News',action: 'detail', news:newsItem.uid}}">{newsItem.title}</f:link.page>
|
||||
<a href="{f:uri.page(pageUid:13,additionalParams:'{tx_news_pi1:{controller:\'News\',action:\'detail\',news:newsItem.uid}}')}">{newsItem.title}</a>
|
||||
|
||||
Set n:link target page in Fluid
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
If the detail page should not be set in the plugin or by a category, it can also be set within the template:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<n:link
|
||||
newsItem="{newsItem}"
|
||||
configuration=“{parameter:settings.somePid}"
|
||||
settings="{settings}" title="{newsItem.title}"><f:translate key="more-link"/></n:link>
|
||||
|
||||
The setting `settings.somePid` can e.g. set with `plugin.tx_news.settings.somePid=123`.
|
||||
|
||||
Render category rootline
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
If you want to show not only the title of a single category which is related to the news item but the complete category rootline use this snippets.
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:if condition="{category:newsItem.firstCategory}">
|
||||
<ul class="category-breadcrumb">
|
||||
<f:render section="categoryBreadcrumb" arguments="{category:newsItem.firstCategory}" />
|
||||
</ul>
|
||||
</f:if>
|
||||
|
||||
and
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:section name="categoryBreadcrumb">
|
||||
<f:if condition="{category}">
|
||||
<f:if condition="{category.parentCategory}">
|
||||
<f:render section="categoryBreadcrumb" arguments="{category:category.parentCategory}" />
|
||||
</f:if>
|
||||
<li>{category.title}</li>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
Use current content element in the template
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
If you ever need information from the content element itself, you can use :html:`{contentObjectData.header}`.
|
||||
|
||||
Use current page in the template
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
If you ever need information from the current page, you can use :html:`{pageData.uid}`.
|
||||
|
||||
Sort tags
|
||||
^^^^^^^^^
|
||||
If you want to sort the tags of a news item, you can use a custom ViewHelper or :file:`EXT:vhs`:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<ul>
|
||||
<f:for each="{newsItem.tags->v:iterator.sort(order: 'ASC', sortBy: 'title')}" as="tag">
|
||||
<li>{tag.title}</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
|
||||
|
||||
Render news items in columns
|
||||
----------------------------
|
||||
|
||||
If you need to list news next to each other and need some additional CSS
|
||||
classes, you can the following snippet.
|
||||
The provided example will wrap 3 items into a div with the class "row".
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:for each="{news -> n:iterator.chunk(count: 3)}" as="col" iteration="cycle">
|
||||
<div class="row">
|
||||
<f:for each="{col}" as="newsItem">
|
||||
<div class="col-md-4">
|
||||
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}"/>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:for>
|
||||
|
||||
@@ -0,0 +1,269 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatingStart:
|
||||
|
||||
============================
|
||||
Changing & editing templates
|
||||
============================
|
||||
|
||||
EXT:news is using Fluid as templating engine. If you are used to Fluid
|
||||
already, you might skip this section.
|
||||
|
||||
This documentation won't bring you all information about Fluid but only the
|
||||
most important things you need for using it. You can get
|
||||
more information in the TYPO3 Documentation
|
||||
:ref:`TYPO3 Explained: Fluid <t3coreapi:fluid>`,
|
||||
:doc:`Developing TYPO3 Extensions with Extbase and Fluid
|
||||
<t3extbasebook:Index>` or many third party sites, videos and books.
|
||||
|
||||
.. _templatingSitepackage:
|
||||
|
||||
Use a site package extension
|
||||
============================
|
||||
|
||||
It is recommended to always store overwritten templates in a custom TYPO3
|
||||
extension. Usually this is done in a special extension called the
|
||||
**site package**.
|
||||
|
||||
If you do not have a site package yet you can create one manually following
|
||||
this :doc:`Official Tutorial: Site Package <t3sitepackage:Index>`.
|
||||
|
||||
There is also a `site package generator <https://sitepackagebuilder.com/>`__
|
||||
available (Provided by Benjamin Kott).
|
||||
|
||||
Create a directory called
|
||||
:file:`EXT:mysitepackage/Resources/Private/Extensions/News` for example and
|
||||
create 3 directories therein called :file:`Templates`, :file:`Partials` and
|
||||
:file:`Layouts`. In these directories you can store your version of the Fluid
|
||||
templates that you need to override.
|
||||
|
||||
As any Extbase based extension, you can find the original templates of the
|
||||
extension news in the directory :file:`EXT:news/Resources/Private/`.
|
||||
|
||||
If you want to change a template, copy the desired files to the
|
||||
directory in your site package. If the template is in a sub folder you have to
|
||||
preserve the folder structure.
|
||||
|
||||
For example the template:
|
||||
|
||||
.. code-block:: none
|
||||
|
||||
EXT:news/Resources/Private/Templates/News/Detail.html
|
||||
|
||||
would have to be copied to
|
||||
|
||||
.. code-block:: none
|
||||
|
||||
EXT:mysitepackage/Resources/Private/Extensions/News/Templates/News/Detail.html
|
||||
|
||||
Since your site package extends the extension news you should require news in
|
||||
your :file:`composer.json`:
|
||||
|
||||
.. code-block:: json
|
||||
:caption: :file:`EXT:mysitepackage/composer.json`
|
||||
|
||||
{
|
||||
"require": {
|
||||
"georgringer/news": "^9.0"
|
||||
}
|
||||
}
|
||||
|
||||
And / or :file:`ext_emconf.php`:
|
||||
|
||||
.. code-block:: php
|
||||
:caption: :file:`ext_emconf.php`
|
||||
|
||||
$EM_CONF[$_EXTKEY] = [
|
||||
// ...
|
||||
'constraints' => [
|
||||
'depends' => [
|
||||
'news' => '9.0.0-9.99.99',
|
||||
],
|
||||
// ...
|
||||
],
|
||||
];
|
||||
|
||||
.. note::
|
||||
It is not recommended anymore to store Fluid templates in the
|
||||
:file:`fileadmin` directory.
|
||||
|
||||
Changing paths of the template
|
||||
==============================
|
||||
|
||||
.. warning::
|
||||
You should never edit the original templates of an extension as those changes
|
||||
will vanish if you upgrade the extension.
|
||||
|
||||
In the most common case, where you want to override the standard news template
|
||||
with your own templates you can use the TypoScript **constants** to set the
|
||||
paths:
|
||||
|
||||
.. code-block:: typoscript
|
||||
:caption: TypoScript constants
|
||||
|
||||
plugin.tx_news {
|
||||
view {
|
||||
templateRootPath = EXT:mysitepackage/Resources/Private/Extensions/News/Templates/
|
||||
partialRootPath = EXT:mysitepackage/Resources/Private/Extensions/News/Partials/
|
||||
layoutRootPath = EXT:mysitepackage/Resources/Private/Extensions/News/Layouts/
|
||||
}
|
||||
}
|
||||
|
||||
If needed, multiple fallbacks can be defined with TypoScript setup:
|
||||
|
||||
.. code-block:: typoscript
|
||||
:caption: TypoScript setup
|
||||
|
||||
plugin.tx_news {
|
||||
view {
|
||||
templateRootPaths >
|
||||
templateRootPaths {
|
||||
0 = EXT:news/Resources/Private/Templates/
|
||||
10 = EXT:mynewsextender/Resources/Private/Templates/
|
||||
15 = EXT:myothernewsextender/Resources/Private/Templates/
|
||||
20 = {$plugin.tx_news.view.templateRootPath}
|
||||
}
|
||||
partialRootPaths >
|
||||
partialRootPaths {
|
||||
0 = EXT:news/Resources/Private/Partials/
|
||||
10 = EXT:mynewsextender/Resources/Private/Partials/
|
||||
15 = EXT:myothernewsextender/Resources/Private/Partials/
|
||||
20 = {$plugin.tx_news.view.partialRootPath}
|
||||
}
|
||||
layoutRootPaths >
|
||||
layoutRootPaths {
|
||||
0 = EXT:news/Resources/Private/Layouts/
|
||||
10 = EXT:mynewsextender/Resources/Private/Layouts/
|
||||
15 = EXT:myothernewsextender/Resources/Private/Layouts/
|
||||
20 = {$plugin.tx_news.view.layoutRootPath}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
It is recommended to always include the path from the TypoScript constants
|
||||
last (with the highest numeral) so that the site package can still override
|
||||
the templates.
|
||||
|
||||
|
||||
Change path of the pagination widget
|
||||
------------------------------------
|
||||
The path of the pagination widget can be changed by using a configuration like below.
|
||||
|
||||
.. code-block:: typoscript
|
||||
:caption: TypoScript setup
|
||||
|
||||
plugin.tx_news {
|
||||
view {
|
||||
widget.GeorgRinger\News\ViewHelpers\Widget\PaginateViewHelper {
|
||||
templateRootPath = EXT:mysitepackage/Resources/Private/Extensions/News/Templates/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Layouts, templates & partials
|
||||
=============================
|
||||
|
||||
If using Fluid, the templates are structured by using Layouts, templates and partials.
|
||||
|
||||
Layouts
|
||||
-------
|
||||
|
||||
Layouts are used to structure the output of a plugin. A simple example is to
|
||||
wrap every output with the same :html:`<div>` element. Therefore it is not
|
||||
needed to repeat this code and write it only once.
|
||||
|
||||
A layout can look this:
|
||||
|
||||
.. code-block:: html
|
||||
:caption: :file:`EXT:mysitepackage/Resources/Private/Extensions/News/Layouts/General.html`
|
||||
|
||||
<div class="myFancyNews">
|
||||
<f:render section="content" />
|
||||
</div>
|
||||
|
||||
This means that the output of the section :html:`content` will be rendered
|
||||
inside a div with the class :html:`myFancyNews`.
|
||||
|
||||
Templates
|
||||
---------
|
||||
|
||||
Every action (like the :guilabel:`List View`, the :guilabel:`Detail View`,
|
||||
:guilabel:`Date Menu` or a :guilabel:`Category Listing`) needs its own
|
||||
template which can be found at
|
||||
:file:`EXT:news/Resources/Private/Templates/<Model>/<ActionName>.html`.
|
||||
|
||||
If :file:`Layouts` are used, it is required to define the name of the Layout
|
||||
(which is identical to the file name of the layout file without file extension).
|
||||
|
||||
.. code-block:: html
|
||||
:caption: :file:`mysitepackage/Resources/Private/Extensions/News/Templates/<Model>/<ActionName>.html`
|
||||
|
||||
<f:layout name="General" />
|
||||
|
||||
<f:section name="content">
|
||||
This will be rendered
|
||||
</f:section>
|
||||
|
||||
|
||||
.. note::
|
||||
It is optional to use layouts. If those are not used, the complete
|
||||
content of the template is shown.
|
||||
|
||||
Partials
|
||||
--------
|
||||
|
||||
Partials are used within templates to be able to reuse code snippets.
|
||||
If you open the template :file:`Templates/News/List.html` you will see the
|
||||
render ViewHelper:
|
||||
|
||||
.. code-block:: html
|
||||
:caption: :file:`EXT:news/Resources/Private/Templates/News/List.html`
|
||||
:linenos:
|
||||
|
||||
<f:render
|
||||
partial="List/Item"
|
||||
arguments="{
|
||||
newsItem: newsItem,
|
||||
settings: settings,
|
||||
className: className,
|
||||
view: 'list'
|
||||
}"
|
||||
/>
|
||||
|
||||
This will embed the output of the partial which is located at
|
||||
:file:`Partials/List/Item.html` (attribute *partial*, line 2). All
|
||||
arguments which are used in the attribute *arguments* (line 3ff)
|
||||
are available in the partial itself.
|
||||
|
||||
You can override existing partials or create your own and name them as you like.
|
||||
|
||||
Sections
|
||||
--------
|
||||
|
||||
Sections are very similar to partials. The difference is that sections
|
||||
are defined in the same file as the template.
|
||||
|
||||
ViewHelpers
|
||||
-----------
|
||||
|
||||
Every Fluid ViewHelper starts with :html:`<f:`. The view helpers supplied by
|
||||
TYPO3 are documented in the :doc:`ViewHelper Reference <t3viewhelper:Index>`.
|
||||
|
||||
Any other ViewHelpers from other extensions can be used by using a
|
||||
namespace declaration like
|
||||
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
|
||||
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
|
||||
xmlns:x="http://typo3.org/ns/Vendor/SomeExtension/ViewHelper"
|
||||
data-namespace-typo3-fluid="true">
|
||||
...
|
||||
</html>
|
||||
|
||||
|
||||
Then ViewHelpers of EXT:news can be used with prefix :html:`n:`. You can find
|
||||
the available ViewHelpers in the chapter
|
||||
:ref:`ViewHelper reference <viewHelpersReference>`.
|
||||
@@ -0,0 +1,82 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatesSelector:
|
||||
|
||||
=================
|
||||
Template selector
|
||||
=================
|
||||
|
||||
This entry should help you to use different templates for different (list) views.
|
||||
|
||||
Using the following Page TsConfig the editor can select the layouts in the news plugin:
|
||||
|
||||
.. code-block:: typoscript
|
||||
|
||||
tx_news.templateLayouts {
|
||||
1 = A custom layout
|
||||
99 = LLL:fileadmin/somelocallang/locallang.xlf:someTranslation
|
||||
}
|
||||
|
||||
You can use any number to identify your layout and any label to describe it.
|
||||
|
||||
Now it is possible to use a condition in the template to change the layouts, and e.g. load a different partial:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:if condition="{news}">
|
||||
<f:then>
|
||||
<f:if condition="{settings.templateLayout} == 99">
|
||||
<f:then>
|
||||
<div class="news well news-special">
|
||||
<f:for each="{news}" as="newsItem">
|
||||
<f:render partial="List/Item-special" arguments="{newsItem: newsItem, settings:settings}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="news news-list-view">
|
||||
<f:for each="{news}" as="newsItem">
|
||||
<f:render partial="List/Item-special" arguments="{newsItem: newsItem, settings:settings}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="no-news-found"><f:translate key="list_nonewsfound" /></div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
As you can see in this example a different partial is loaded if the layout 99 is used.
|
||||
|
||||
|
||||
Custom Templates by using TypoScript
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
||||
You can define a custom TypoScript setting which you can check in the view later on.
|
||||
|
||||
The TypoScript could look like:
|
||||
|
||||
.. code-block:: typoscript
|
||||
|
||||
plugin.tx_news {
|
||||
settings {
|
||||
isLatest = 1
|
||||
}
|
||||
}
|
||||
|
||||
And then you can use a condition like this:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:if condition="{settings.isLatest}">
|
||||
<f:then>
|
||||
do something if it is set
|
||||
</f:then>
|
||||
<f:else>
|
||||
do something if it is not set
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _templatesBootstrap:
|
||||
|
||||
===================
|
||||
Bootstrap templates
|
||||
===================
|
||||
|
||||
The following Twitter Bootstrap Template variants are available:
|
||||
|
||||
- v3
|
||||
- v5
|
||||
|
||||
To be able to use it, include **additionally** the entry **News Styles Twitter Bootstrap** or **News Styles Twitter Bootstrap V5** in the section "Include Static (from extensions)" in the template record.
|
||||
|
||||
By changing the following constants, you can use those templates as base for your work.
|
||||
|
||||
.. code-block:: typoscript
|
||||
|
||||
# v5
|
||||
plugin.tx_news {
|
||||
view.twb5 {
|
||||
templateRootPath = EXT:news/Resources/Private/Templates/Styles/Twb5/Templates
|
||||
partialRootPath = EXT:news/Resources/Private/Templates/Styles/Twb5/Partials/
|
||||
layoutRootPath = EXT:news/Resources/Private/Templates/Styles/Twb5/Layouts/
|
||||
}
|
||||
}
|
||||
|
||||
# v3
|
||||
plugin.tx_news {
|
||||
view.twb {
|
||||
templateRootPath = EXT:news/Resources/Private/Templates/Styles/Twb/Templates
|
||||
partialRootPath = EXT:news/Resources/Private/Templates/Styles/Twb/Partials/
|
||||
layoutRootPath = EXT:news/Resources/Private/Templates/Styles/Twb/Layouts/
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.. include:: /Includes.rst.txt
|
||||
|
||||
.. _viewHelpersTutorial:
|
||||
|
||||
===========
|
||||
ViewHelpers
|
||||
===========
|
||||
|
||||
ViewHelpers are used to add logic inside the view.
|
||||
There basic things like if/else conditions, loops and so on. The system
|
||||
extension Fluid has the most important ViewHelpers already included.
|
||||
|
||||
To be able to use a ViewHelper in your template, you need to follow always the
|
||||
same structure which is:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<f:fo>bar</f:fo>
|
||||
|
||||
This would call the ViewHelper :code:`fo` of the namespace :code:`f` which stands for Fluid.
|
||||
If you want to use ViewHelpers from other extensions you need to add the namespace
|
||||
declaration at the beginning of the template. The namespace declaration for the news extension is:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
|
||||
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
|
||||
xmlns:x="http://typo3.org/ns/Vendor/Someextension/ViewHelper"
|
||||
data-namespace-typo3-fluid="true">
|
||||
...
|
||||
</html>
|
||||
|
||||
|
||||
Now you can use a ViewHelper of news with a code like:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<n:headerData><!-- some comment --></n:headerData>
|
||||
|
||||
If you want to know what a ViewHelper does, it is very easy to find the related
|
||||
PHP class by looking at the namespace and the name of the ViewHelper.
|
||||
Having for example :php:`GeorgRinger\News\ViewHelpers` and :php:`headerData`
|
||||
you will find the class at :file:`news\Classes\ViewHelpers\HeaderDataViewHelper.php`.
|
||||
|
||||
The most of awesome thing is that you can use ViewHelpers of any extension in
|
||||
any other template by just adding another namespace declaration like:
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
{namespace something=Tx_AnotherExtension_ViewHelpers}
|
||||
|
||||
and call the ViewHelper like
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<something:NameOfTheViewHelper />
|
||||
|
||||
See also
|
||||
========
|
||||
|
||||
* :ref:`EXT:news ViewHelper reference <viewHelpersReference>`
|
||||
* :ref:`Core ViewHelper reference <viewHelpersReference>`
|
||||
Reference in New Issue
Block a user