I have to make a backend and a frontend-layout with grid-elements. To clarify it a bit: I have 10 containers, 5x2
It looks in the backend like this:
con 1_1 | con 2_1 | con 3_1 | con 4_1 | con 5_1
con 1_2 | con 2_2 | con 3_2 | con 4_2 | con 5_2
(con stands for container)
There might be smarter ways to realize this, maybei with just "text with image"-content elements, but in this case this was the requirement.
Now the problematic part. I need to wrap each container differently. My expected output is something like this:
<div class="left w-clearfix">
<div class="organe_50_stapel_logo">
IMAGE // works
</div>
<div class="organe_50_stapel_text">
TEXT // works
</div>
</div>
(2nd - 4th container would be wrapped in "middle" and the 5th container in "right).
Now for my setup, I get the fields wrapped (marked with // works), however, I'm stuck wrapping certain fields which belong together.
Here is my setup:
21 < lib.gridelements.defaultGridSetup
21 {
columns {
11 < .default
11.wrap = <div class="organe_50_stapel_logo">|</div>
12 < .default
12.wrap = <div class="organe_50_stapel_logo">|</div>
13 < .default
13.wrap = <div class="organe_50_stapel_logo">|</div>
14 < .default
14.wrap = <div class="organe_50_stapel_logo">|</div>
15 < .default
15.wrap = <div class="organe_50_stapel_logo">|</div>
21 < .default
21.wrap = <div class="organe_50_stapel_text">|</div>
22 < .default
22.wrap = <div class="organe_50_stapel_text">|</div>
23 < .default
23.wrap = <div class="organe_50_stapel_text">|</div>
24 < .default
24.wrap = <div class="organe_50_stapel_text">|</div>
25 < .default
25.wrap = <div class="organe_50_stapel_text">|</div>
}
}
11 + 21 belongs in the container "left"
12,13,14,22,23,24 in the container "middle"
15,25 in the container "right"
You should go for another approach in this case and get rid of the individual wraps for the columns in favor of an overall cObject making use of the so called "virtual fields" of Gridelements.
These fields get filled with content during the rendering process and then made available via cObj->data, thus accessiable via TypoScript field, data, insertData and dataWrap as well as variables within a FLUIDTEMPLATE.
21 < lib.gridelements.defaultGridSetup
21 {
cObject = TEXT
cObject {
dataWrap (
<div class="left w-clearfix">
<div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_11}</div>
<div class="organe_50_stapel_text">{field:tx_gridelements_view_column_21}</div>
</div>
<div class="middle">
<div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_12}</div>
<div class="organe_50_stapel_text">{field:tx_gridelements_view_column_22}</div>
</div>
<div class="middle">
<div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_13}</div>
<div class="organe_50_stapel_text">{field:tx_gridelements_view_column_23}</div>
</div>
<div class="middle">
<div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_14}</div>
<div class="organe_50_stapel_text">{field:tx_gridelements_view_column_24}</div>
</div>
<div class="right">
<div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_15}</div>
<div class="organe_50_stapel_text">{field:tx_gridelements_view_column_25}</div>
</div>
)
}
}
This is working for flexform_fieldname, parentgrid_fieldname, tx_gridelements_view_column_123 and tx_gridelements_view_child_123. Additionally there are tx_gridelements_view_children and tx_gridelements_view_columns, but these contain arrays for the FLUIDTEMPLATE people, since TypoScript can't deal with arrays.
The fields are called "virtual" because they don't exist in the database, but will be filled into cObj->data during the rendering process. Still you can do anything with them that can be done with real fields, except writing them back to the database.
See https://docs.typo3.org/typo3cms/extensions/gridelements/Chapters/Typoscript/Reference/Index.html for the TypoScript Reference describing those fields.
I have got similar error in gridelement by rending using typoscript.
I have used exact TypoScript which you used !
Please add this line in your template > setup at last
tt_content.gridelements_pi1.20 = COA
My problem solved by adding this line , I hope it will help you !
EXT : gridelements 8.0.0-dev
TYPO3 : 8.7.8
Thanks :)
Related
I want to create a popup menu with content elements of the items.
The structure in the backend is basically as follows:
Menu1
Submenu1.1
Submenu1.2
Submenu1.3
Menu2
Submenu2.1
Submenu2.2
Submenu2.3
Where Menu1 and Menu2 have content elements on the page.
I managed to access the content elements, however, the elements are rendered BEFORE the sub menu items. I need them after that.
What I get:
<div class="headeroverlay">
<div class="dropdown-overlay" id="overlay_4">
<!-- CONTENT ELEMENTS -->
<div class="contentimagesandtext">
<div class="item"><!-- Content Element 1 of Menu 1 --></div>
<div class="item"><!-- Content Element 2 of Menu 1 --></div>
</div>
<!-- SUB MENU -->
<div class="subnav-block">
<div class="subnav-link">Submenu1.1</div>
<div class="subnav-link">Submenu1.2</div>
<div class="subnav-link">Submenu1.3</div>
</div>
</div>
<div class="dropdown-overlay topdropdown" id="overlay_5">
<!-- same for Menu 2 -->
</div>
</div>
But I need content and submenu switched:
<div class="headeroverlay">
<div class="dropdown-overlay" id="overlay_4">
<!-- SUB MENU -->
<div class="subnav-block">
<div class="subnav-link">Submenu1.1</div>
<div class="subnav-link">Submenu1.2</div>
<div class="subnav-link">Submenu1.3</div>
</div>
<!-- CONTENT ELEMENTS -->
<div class="contentimagesandtext">
<div class="item"><!-- Content Element 1 of Menu 1 --></div>
<div class="item"><!-- Content Element 2 of Menu 1 --></div>
</div>
</div>
<div class="dropdown-overlay topdropdown" id="overlay_5">
<!-- same for Menu 2 -->
</div>
</div>
Here's my script so far:
lib.menuOverlay = HMENU
lib.menuOverlay{
1 = TMENU
1.expAll = 1
1.NO.doNotShowLink = 1
1.NO.wrapItemAndSub = <div class="dropdown-overlay topdropdown" id="overlay_{field:uid}">|</div>
1.NO.wrapItemAndSub.insertData = 1
# Append Content Elements to stdWrap2
1.NO.stdWrap2.append = CONTENT
1.NO.stdWrap2.append {
table = tt_content
select {
pidInList.stdWrap.data = field:uid
}
wrap = <div class="contentimagesandtext">|</div>
renderObj.stdWrap.wrap = <div class="item">|</div>
}
2 = TMENU
2.insertData = 1
2.wrap = <div class="subnav-block">|</div>
2.NO.wrapItemAndSub = <div class="subnav-link">|</div>
}
I tried adding the append to wrapItemAndSub. This will put the content elements after the submenus, but then I don't have a wrapper keeping them togehter.
Note that I need the Level-1 Page UID in the id tag of the wrapper
Question: How can I force the append to be AFTER the items, or alternatively, how can I add a wrapper around my wrapItemsAndSub, containing the parent UID?
you should care for your wraps.
you use stdWrap2 where you append your content. The append wraps the wrap-string of stdWrap2(which is empty), leaving the append the only value for stdWrap2.
now stdWrap2 has no marker where to split the wrap in before and after. So everything goes before the wrapped content. You need a split-marker in stdWrap2:
stdWrap2 = |
stdWrap2.append = ...
on the other side: you could use append as the only wrapping to get its value after the content.
Inspired by this answer, I managed to do what I need.
I append a COA to my first level menu, and put there the CONTENT and another HMENU with the sub-menu items, like this:
lib.menuOverlay = HMENU
lib.menuOverlay {
1 = TMENU
1.expAll = 1
1.NO.doNotShowLink = 1
1.NO.wrapItemAndSub = <div class="dropdown-overlay topdropdown" id="overlay_{field:uid}">|</div>
1.NO.wrapItemAndSub.insertData = 1
1.NO.stdWrap2.append = COA
1.NO.stdWrap2.append {
10 = HMENU
10 {
special = directory
special.value.data = field:uid
1 = TMENU
1.insertData = 1
1.wrap = <div class="subnav-block">|</div>
1.NO.wrapItemAndSub = <div class="subnav-link">|</div>
}
20 = CONTENT
20 {
table = tt_content
select {
pidInList.stdWrap.data = field:uid
}
wrap = <div class="contentimagesandtext">|</div>
renderObj.stdWrap.wrap = <div class="item">|</div>
}
}
}
I try to display a message, if it is 11 oclock.
This is what I've tried:
temp.contentHome.20 {
wrap = <div class="clearfix heading_wrapper">|</div>
10.stdWrap.wrap = <div class="col-xs-12 col-sm-4 col-md-2 image-left">|</div>
20.wrap = <div class="col-xs-12 col-sm-8 col-md-7 text-center">|</div>
30 = TEXT
30.value = <p>default</p>
30.stdWrap.wrap = <div style="margin-top: 1em" class="col-xs-12 col-sm-12 col-md-3 text-right">|</div>
}
[hour = 11]
temp.contentHome.20.30.value = <p>Success! It is 11 o'clock</p>
[ELSE]
temp.contentHome.20.30.value = <p>It is not 11 o'clock!</p>
[END]
However, the output is always It is not 11 o'clock!, even though it is 11 oclock like date proves.
Why is the condition not working?
On the first look it seems to be correct.
Try to add the current time to the COA:
temp.contentHome.20.40 = TEXT
temp.contentHome.20.40 {
data = date:U
strftime = %H:%M
}
Maybe your server time doesn't match your localtime. Please Check the timezone settings in the install tool ([SYS][phpTimeZone]).
Also it is possible that the caching is not refreshed so the condition is not checked.
To the end: Have you an COA or COA_INT on temp.contentHome.20?
Is there a way to have the Frontend layout determine the Backend layout, template file and columns?
At the moment I have the following code that allows you to set the Backend layout and it uses the appropriate template file. But this gets very messy when there are different column positions for each layout.
page.10 = FLUIDTEMPLATE
page.10 {
#format = html
file= fileadmin/templates/example/partials/example_home.html
partialRootPath = fileadmin/templates/example/partials/
layoutRootPath = fileadmin/templates/example/layouts/
variables {
# Assign the Columns
main < styles.content.get
main.select.where = colPos = 0
news < styles.content.get
news.select.where = colPos = 1
}
}
}
# Assign the Template files with the Fluid Backend-Template
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
# Set the default Template
default = TEXT
default.value = fileadmin/templates/example/partials/example_home.html
# Set a second Template
23 = TEXT
23.value = fileadmin/templates/example/partials/example_internal.html
}
Not messy at all, here's a real world example:
page.10 = FLUIDTEMPLATE
page.10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = pagelayout
default = TEXT
default.value = {$customPagesTemplatePath}/Standard.html
1 = TEXT
1.value = {$customPagesTemplatePath}/Home.html
2 = TEXT
2.value = {$customPagesTemplatePath}/Landing.html
10 = TEXT
10.value = {$customPagesTemplatePath}/NewsDetail.html
11 = TEXT
11.value = {$customPagesTemplatePath}/LandingMini.html
12 = TEXT
12.value = {$customPagesTemplatePath}/FullWidth.html
}
layoutRootPath = {$customPagesLayoutPath}
partialRootPath = {$customPagesPartialPath}
}
Think about it like this:
As you say, forget about frontend layout. That's legacy; be layout serves for BE and FE.
If a page was a city, the colPos would be the street. Or rather, imagine the Backend is a map you're drawing, and the frontend is a LEGO City you build according tho that map :-)) If it's OK, I'll stick with that metaphor.
ColPos is a determined part of a page where a record lives. If you can, take a look at the tt_content table in the database: you'll see that colPos is just a column with a number. So in the city "Page 1", there's a street called "colPos 7", and it contains some records (those would be houses). With the be_layout wizard in TYPO3 you'll create an administrative map of that city: how the editor should see these streets.
In the FLUIDTEMPLATE you call depending on the selected be_layout, you will create the city itself; the rendered frontend.
Here's another real world example for such a fluid template (Home.html):
<f:render partial="Mobilenav" />
<f:render partial="Header"/>
<div class="row">
<f:cObject typoscriptObjectPath="lib.home-teaser" />
</div>
<aside>
<div class="row">
<div class="columns">
<div class="row">
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<f:cObject typoscriptObjectPath="lib.home-something" />
</div>
</div>
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<f:cObject typoscriptObjectPath="lib.home-somethingelse" />
</div>
</div>
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<div class="fp-teaser-box">
<f:cObject typoscriptObjectPath="lib.home-news-plugin-title" />
<div class="fp-teaser-hr"></div>
<div class="fp-teaser-content">
<f:cObject typoscriptObjectPath="lib.home-news" />
</div>
</div>
</div>
</div>
<div class="fp-teaser-outer small-48 medium-24 large-12 columns">
<div class="fp-teaser-box-wrapper">
<div class="fp-teaser-box">
<f:cObject typoscriptObjectPath="lib.home-blog-plugin-title" />
<div class="fp-teaser-hr"></div>
<div class="fp-teaser-content">
<f:cObject typoscriptObjectPath="lib.home-blog" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<f:render partial="Footer"/>
... well, but where's the correlation with the colPos?
Nowhere yet! I (while being positive that there are other approaches) do this in TypoScript:
lib.home-something < styles.content.get
lib.home-something {
select.where = colPos = 7
}
So by this we prepare content for the fluid template: get all content of that page's column 7 (using the extension fluid_styled_content) and put it into a "lib" content object.
That's then inserted into the page via the f:cObject viewhelper:
<f:cObject typoscriptObjectPath="lib.home-something" />
Like this, all houses in 7th street are put into the city in exactly this location – and thus rendered in your page.
Programmatically,
$backendLayout=$GLOBALS['TSFE']->cObj->getData('pageLayout');
If None was selected in the backend [-1], it will output 'none'.
If nothing was selected it will output 'default'. Otherwise it will output the correct backend layout prefixed with your extension, taking into account subpage layouts up the page ancestry chain.
I am trying to get a wrapper element around an image including its caption in the single view in tt_news for Typo3 6.1. How would I do that?
So far I only figured out how to do that for either all images
plugin.tt_news.displaySingle.imageWrapIfAny = ...
or the caption itself
plugin.tt_news.displaySingle.caption_stdWrap.dataWrap = ...
. But I have no clue how to create a wrapper for each single image including its caption...
Thanks in advance!
I know this is quite old, but as a follow-up that works in TYPO3 6.x you can use:
displaySingle.image.wrap = <div class="news-img">|
displaySingle.caption_stdWrap >
displaySingle.caption_stdWrap.wrap = <p class="news-single-imgcaption">|</p></div>
So each image and caption gets wrapped by <div class="news-img">...</div>
The following HTML will be provided by the below TS:
<div class="newsImage">
<div class="imageHolder">
<img />
</div>
<div class="captionHolder">
Caption
</div>
</div>
TypoScript:
displaySingle {
imageWrapIfAny = <div class="newsImage">|</div>
image {
file.maxW >
file.maxH >
file.width = 220
stdWrap.wrap = <div class="imageHolder">|</div>
altText.field = imagealttext
}
caption_stdWrap >
caption_stdWrap.wrap = <div class="captionHolder">|</div>
}
I dont come forth. I want to wrap each given PID in its own unique wrap.
Here my code:
menutab.list = HMENU
menutab.list.special = directory
menutab.list.special.value = 7,8,9,10,11,12,13
menutab.list.1 = TMENU
menutab.list.1.wrap = <div>|</div>
...
So thats working fine. I get every submenu of given PIDs but now i'm searching for something like that:
menutab.list.special.value.wrap = <div id="current PID!"> | </div>
I hope someone understand my issue.
Big thanks!!
It depends which field you would like to display, but basically any field from the page record can be displayed into the output.
menutab.list = HMENU
menutab.list {
special = directory
special.value = 7,8,9,10,11,12,13
1 = TMENU
1 {
# stdWrap2 wraps the whole item, including the link
NO.stdWrap2.dataWrap = <div id="p{field:uid}">|</div>
}
}
This will give the following output:
<div id="p26">Test 0</div>
<div id="p27">Test 1</div>
<div id="p30">Test 2</div>
<div id="p31">Test 3</div>
<div id="p35">Test 4</div>
<div id="p36">Test 5</div>
<div id="p37">Test 6</div>
For more options, please take a look at the TSref and the stdWrap functions.
TSref
http://typo3.org/documentation/document-library/references/doc_core_tsref/4.4.0/view/toc/0/
stdWrap
http://typo3.org/documentation/document-library/references/doc_core_tsref/4.4.0/view/1/5/#id2618234
I think the easiest is to do something like that, not sure of the syntax... :
menutab.list.1 = HMENU
menutab.list.1 {
special = directory
special.value = 7
1 = TMENU
1.wrap = <div id="7"> | </div>
}
menutab.list.2 < menutab.list.1
menutab.list.2.special.value = 8
menutab.list.2.1.wrap = <div id="8"> | </div>
...
Not the best solution, but can work