I'm trying to wrap an image with additional HTML elements and parameters, using Typoscript in a Setup Template.
So far, I've managed to wrap elements with HTML, but I'd like to add some parameters as well. The problem occurs, when I try to escape variables in variables - I can't pass UID from one of the parameters.
Below is the sample:
lib.parseFunc_RTE {
tags.img = TEXT
tags.img {
current = 1
preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingController->renderImageAttributes
dataWrap = |
}
}
The problematic part is here: title="file:{parameters:data-htmlarea-file-uid}:title"
I've tried using {file:{parameters:data-htmlarea-file-uid}:title}, but it still doesn't work and shows error within rendered element:
The only working example is when I hardcode the UID ({file:120:title}), but it should be added dynamically, as there are many images.
How can I escape this "double variables"? Or maybe there is another solution to make it work?
==================================================
Here's the full solution of my problem, thanks to #Jo Hasenau
lib.parseFunc_RTE {
tags.img = COA
tags.img {
10 = TEXT
10 {
dataWrap = file:{parameters:data-htmlarea-file-uid}:title
wrap3 = <a href="{parameters:src}" class="lightbox" title="{|}"
insertData = 1
}
20 = TEXT
20 {
dataWrap = file:{parameters:data-htmlarea-file-uid}:description
wrap3 = data-lightbox-caption="{|}" data-lightbox-width="{parameters:width}" data-lightbox-height="{parameters:height}" rel="lightbox-group">
insertData = 1
}
30 = TEXT
30 {
current = 1
preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingController->renderImageAttributes
wrap = |</a>
}
}
}
You can use dataWrap and/or insertData multiple times either by using the official order of stdWrap functions or by squeezing in another "level" of stdWrap functions with stdWrap.functionName
In this case it's the order of functions combined with a COA to separate the original wrap into smaller chunks and some additional braces provided by another wrap.
lib.parseFunc_RTE {
tags.img = COA
tags.img {
10 = TEXT
10 {
preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingController->renderImageAttributes
dataWrap = file:{parameters:data-htmlarea-file-uid}:title
wrap3 = <a href="{parameters:src}" class="lightbox" title="{|}" data-lightbox-caption="{file:120:title}" data-lightbox-width="{parameters:width}" data-lightbox-height="{parameters:height}" rel="lightbox-group">
insertData=1
}
20 = TEXT
20.current = 1
20.wrap = |</a>
}
}
preUserFunc will be executed first, then the first dataWrap will create the actual variable name, followed by wrap3 to get the necessary curly braces, finalized by insertData to fill in all the other variables together with the generated variable.
The order in this code is just for better readability, but the actual order of function calls within stdWrap is predefined in the PHP code and follows exactly the order of function descriptions in the official docs: https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Functions/Stdwrap.html
Related
This is very similar to my question Counter for mask elements in a TYPO3 column
I need to pass a variable (in my case, the value of cObj:parentRecordNumber which is the counter for the current item in it's column) to the template.
In the main page template:
<f:cObject typoscriptObjectPath="lib.content.pageteasers" />
In typoscript:
lib.content {
pageteasers < styles.content.get
pageteasers {
select {
where = colPos=2
max = 8
}
// this passes the variable elementCounter to the fluid template of the rendered mask content element:
renderObj.mask_teaser {
variables {
elementCounter = TEXT
elementCounter.value = {cObj:parentRecordNumber}
elementCounter.insertData = 1
}
}
// this should pass the same value to a rendered tx_news plugin:
variables {
elementCounter = TEXT
elementCounter.value = {cObj:parentRecordNumber}
elementCounter.insertData = 1
}
// it doesn't. what about these trial & error:
renderObj.list < .variables
renderObj.plugin.tx_news < .variables
renderObj.list.20.news_pi1 < .variables
renderObj.news_pi1 < .variables
// none of these seem to work either
}
}
And then in the rendered CE template (News/List.html)
<f:debug title="" inline="1">{_all}</f:debug>
I don't manage to see the above variable in here. What is the correct way to pass the variable from TS to the news fluid template?
PS Another try was using the Good Old Register
pageteasers < styles.content.get
pageteasers {
select {
where = colPos=2
max = 8
}
append = LOAD_REGISTER
append {
elementCounter = TEXT
elementCounter.value = {cObj:parentRecordNumber}
elementCounter.insertData = 1
}
}
And in the template:
{v:variable.register.get(name: 'elementCounter')}
but that is NULL
Your try via register could work. But you have to care, where you are doing what...
Registers
LOAD_REGISTER is of type string/stdWrap and not a cObject per definition. If you wanna use content based on a cObject, you can declare this via the stdWrap-property (as shown in the examples):
1 = LOAD_REGISTER
1.param.cObject = TEXT
1.param.cObject.stdWrap.data = GP:the_id
So, in your case it should like:
elementCounter.cObject = TEXT
elementCounter.cObject.data = cObj:parentRecordNumber
Appending at the right place
You are trying to use append directly as a property of pageteasers (which is a copy of styles.content.get which is of type CONTENT.
CONTENT does not have an append-property. In addition, you would put the register in front of the entire content, not the individual content elements.
=> It's needed as part of the renderObj, so it's rendered per CE.
The renderObj of CONTENT is of type CASE, which also has no stdWrap-properties directly. But it has a property stdWrap with stdWrap-properties...
Conclusion
So, you can end up with this snippet:
lib.content {
pageteasers {
renderObj {
stdWrap {
append = LOAD_REGISTER
append {
elementCounter.cObject = TEXT
elementCounter.cObject.data = cObj:parentRecordNumber
}
}
}
}
}
I have this typoscript:
tt_content.gridelements_pi1.20.10.setup {
3cols.outerWrap = <div>|</div>
3cols.outerWrap.override.insertData = 1
3cols.outerWrap.override = <div id="{field:tx_cewrap_id_input}" class="{field:tx_cewrap_class_input} {field:tx_cewrap_class_select}">|</div>
3cols.outerWrap.override.if.isTrue.field = tx_cewrap_active
}
Which makes sure a wrapper is made around a certain element. The following html is generated as an example:
<div id="" class="full-box full-box-features container pt-75,pb-75"></div>
As you can see there is a comma separated string inserted as "tx_cewrap_class_select". With the {field:tx_cewrap_class_select} part:
pt-75,pb-75
But i want the comma to be a space character so the classes work in html
Now I know about the split option
But how do I fix the code, just need somehow to remove the comma! That's it :)
Thanks in advance for any response I can use.
You can split by comma and join with a space, but in this case it might be easier just to replace the comma by space:
10 = TEXT
10.replacement {
1 {
search = ,
replace.char = 32
}
}
And here the solution with split. it should be obvious why not to use:
10 = TEXT
10.split {
token = ,
cObjNum = 1 || 2
1.current = 1
2.current = 1
2.noTrimWrap = | ||
}
Hint:
on TEXT you can use stdWrap functions immediately,
in other context you might need an explicit .stdWrap:
10.stdWrap.replacement {
10.stdWrap.split {
Either you prepare your values into a register for later use, or you split your override value into a COA. You even might use the replacement on the whole override value in case you are sure no other comma might be needed.
COA-Solution:
(don't forget the noTrimWrap for 20 otherwise the classes are appended without space)
override.cObject = COA
override.cObject {
10 = TEXT
10.value <div id="{field:tx_cewrap_id_input}" class="{field:tx_cewrap_class_input}
10.insertData = 1
20 = TEXT
20.field = tx_cewrap_class_select
20.replacement {
1 {
search = ,
replace.char = 32
}
noTrimWrap= | ||
}
30 = TEXT
30.value = ">|</div>
}
I have the following config
page = PAGE
page {
typeNum = 0
10 = FLUIDTEMPLATE
10 {
templateRootPath = EXT:folder/Resources/Private/Website/Templates/
partialRootPath = EXT:folder/Resources/Private/Website/Partials/
layoutRootPath = EXT:folder/Resources/Private/Website/Layout/
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = whatever.html
1 < .default
2 = TEXT
2.value = whatever-else.html
}
}
Somehow the 'backend_layout_next_level' is not working; it is not sliding down the tree. As a result I have to set a backend_layout for each page which is not what one should expect.
Is there a way of knowing/debugging/finding out what's causing this? I thought it might be something related to a curly brace being in the wrong place (too early, too late or just plain wrong) inside my typoscript. Therefor I looked inside the Typoscript Template Analyzer and found some errors which I've fixed, but the problem still persists.
Thanks already!
Best regards
You use have to give the full path to the file as a value in the .file property or you should use .templateName instead and only provide the name (case sensitive!!!) of the template file without suffix.
#see https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html
Note that in your current setting, the uid of the template record must be 1 or 2.
And you can try to use levelfield: -2 instead of levelfield: -1.
TBH I never understood this #^$#% CASE syntax... Therefore definitely prefer common condition which works perfect, you must to add custom condition like I showed in other post, so you can use it like:
page {
typeNum = 0
10 = FLUIDTEMPLATE
10 {
templateRootPath = EXT:folder/Resources/Private/Website/Templates/
partialRootPath = EXT:folder/Resources/Private/Website/Partials/
layoutRootPath = EXT:folder/Resources/Private/Website/Layout/
file = whatever.html
}
}
[userFunc = user_beLayout(2)]
page.10.file = whatever-else.html
[userFunc = user_beLayout(3)]
page.10.file = yet-other.html
[userFunc = user_beLayout(4)]
page.10.file = etc.html
[end]
Edit - to satisfy some comments
Note: When I say that I don't understand CASE syntax, that doesn't mean that I don't know it... especially that I studied it in details not once, here's the conclusion...
About performance:
Custom conditions solution is faster than using CASE and slide combination as it doesn't involve additional DB queries (slide does), it iterates $GLOBALS['TSFE']->page array, which is already collected, and stops further checks ASAP, so it's cheaper than slide which makes additional queries if it finds slide in TS (doesn't matter if it's required or not) - (examine the code for slide mechanics), so actually conditions are performance-saver not killer :)
Yet more
Using conditions blocks you can change behavior of multiple elements at once (instead writing separate CASE for each) i.e.:
[userFunc = user_beLayout(2)]
page.10.file = whatever-else.html
lib.genericMenu >
config.absRefPrefix = /layout-specific-abs/
// etc...
[end]
Using CASE syntax you'll need to repeat all these checks for each element... (where's DRY?)
Finally
Both solutions are ... usable especially when using with cached pages, (difference between them will be about teens or maybe in drastic situation hundred milliseconds -conditions will be faster), for uncached pages most probably it will be good idea to set be_layout directly for each pages record in both cases.
It is quite some time ago, you probably resolved your issue but here is a working approach:
page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
# select different html files for layouts - ref: backend_layout
file.stdWrap.cObject = TEXT
file.stdWrap.cObject {
data = levelfield:-2,backend_layout_next_level,slide
override.field = backend_layout
split {
token = pagets__
1.current = 1
1.wrap = |
}
wrap = EXT:folder/Resources/Private/Templates/|.html
}
layoutRootPath = EXT:folder/Resources/Private/Layouts/
partialRootPath = EXT:folder/Resources/Private/Partials/
}
}
or you can pass it as a variable:
page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
file = EXT:folder/Resources/Private/Templates/Main.html
layoutRootPath = EXT:folder/Resources/Private/Layouts/
partialRootPath = EXT:folder/Resources/Private/Partials/
variables {
# BE_Layout
BE_Layout = COA
BE_Layout {
stdWrap.cObject = TEXT
stdWrap.cObject {
data = levelfield:-2,backend_layout_next_level,slide
override.field = backend_layout
split {
token = pagets__
1.current = 1
1.wrap = |
}
wrap = |.html
}
}
}
}
i want to add the language id in a typolink
so far
LOGO = COA
LOGO {
10 = TEXT
10 {
value = logo
typolink {
parameter = 116
additionalParams = &L={$config.sys_language_uid}
}
}
}
if L=4 it's working
but if i use L={$config.sys_language_uid} it gets ignored altogether
same with L=GP:L
and L=GPvar:L
what would be the proper syntax here
working if i do something like
additionalParams = COA
additionalParams {
10 = TEXT
10.data = GP : L
10.intval = 1
10.wrap = &L=|
}
You do not need to do that on your own. With the following global TypoScript configuration the parameter L will added to every link:
config.linkVars = L(int)
So, if you use HMENU.special = language this will be managed on the switch automatically, too:)
http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Config/Index.html
I do not know about {$config.sys_language_uid}, but your code will output it as plain text. In order to use variables like {GP:L}, you got to dataWrap it or insert "insertData" after the value.
10 = TEXT
10 {
value = logo
typolink {
parameter = 116
additionalParams.dataWrap = &L={GP:L}
}
}
OR (the best way I'd say):
10 = TEXT
10 {
value = logo
typolink {
parameter = 116
additionalParams.cObject = TEXT
additionalParams.cObject {
wrap = &L=|
data = GP:L
}
}
}
Using {TSFE:sys_language_uid} might be a better option if you are querying the database.
There is no need to make a cObject or COA
additionalParams = type=0&L={GP:L}
additionalParams.insertData = 1
You can do this kind of URL using addQueryString = 1. https://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Typolink/Index.html#addquerystring
It there any way to apply special formatting for the menu item immediately after the current item,
that is CUR + 1. Something like:
lib.menu = HMENU
lib.menu {
1 = TMENU {
NO = 1
NO = {
...
}
...
# The currently selected item
CUR = 1
CUR {
allWrap = ...
}
# The next item
CUR + 1 = 1
CUR + 1 {
allWrap = ...
}
}
}
I would appreciate any feedback you might have. Also alternatives: Can write a PHP class/function instead of writing this in typoscript.
Unfortunately this is not possible with just TypoScript. I don't really see a good solution with PHP really either. You could however do it with PHP, but you will need to load the same menu items like in your menu itself inside PHP. Which makes it very inefficient and not flexible at all.
I would say add a special class attribute to the link or wrap and perform your formatting with JavaScript. Where the item coming after the active one is modified.
So I manage to solve this myself. The answers is to use a so-called register to mark if we've passed the current object or not. For example:
lib.menu = HMENU
lib.menu {
1 = TMENU {
NO = 1
NO = {
# Render using Common Object Array (COA)
stdWrap.cObject = COA
stdWrap.cObject {
# Normal Case (However the an item should normally be rendered
10 = TEXT
10 {
if {
isTrue.data = register:cid
value = NORMAL RENDERING
}
}
20 = TEXT
20 {
if {
isTrue.data = register:data
value = RENDERING (IMMEDIATELY) AFTER THE CURRENT ITEM
}
}
# Unset the register (after we've done with our special formatting)
30 = LOAD_REGISTER
30.cid= 0
}
}
...
# The currently selected item
CUR = 1
CUR {
# Render using Common Object Array (COA)
stdWrap.cObject = COA
stdWrap.cObject {
# However the Current item should normally be rendered
10 = TEXT
10.field = title
# Mark that we've reached the current item
20 = LOAD_REGISTER
20.cid= 1
}
}
}
}
A register, set using LOAD_REGISTER, is basically a type of run-time variable, which can be set and reset in the course of iterating through the menu items (or whatever). As such it can be used to note our progress through the menu items, particularly noting if we've passed the current menu item (CUR) or not.
rant begin Hardly an elegant solution considering that typoscript is domain-specific language which is mainly used for this normatting stuff like menus./rant end