i've configured typo3 to enable a multi-line navigation title. So if there is a linebreak there should be also a linebreak in the menu-link.
I'm splitting the Text with the following code
30 = COA
30.10 = TEXT
30.10 {
field = {nav_title//title}
listNum = 0
listNum.splitChar = 13
}
30.20 < .30.10
30.20.listNum = 1
30.20.wrap = <br />|
30.20.required = 1
My Menu-Creation basicily the following
1 = TMENU
1.expAll = 1
1.NO {
doNotLinkIt = 1
stdWrap.override.cObject =TEXT
stdWrap.override.cObject {
typolink.parameter.field = uid
if.isTrue.numRows {
table = tt_content
select {
pidInList.field = uid
where = colPos = 0
}
}
}
}
The stdWrap.override-Block disables clickable links if the page if there is no content for the page.
Now to my question: It feels that i'm too dumb to merge those parts - How is it done the right way?
Guessing, untested:
1 = TMENU
1.expAll = 1
1.NO {
doNotLinkIt = 1
stdWrap.override.cObject = COA
stdWrap.override.cObject {
10 = TEXT
10 {
field = {nav_title//title}
listNum = 0
listNum.splitChar = 13
}
20 < .30.10
20 {
listNum = 1
wrap = <br />|
required = 1
}
typolink.parameter.field = uid
if.isTrue.numRows {
table = tt_content
select {
pidInList.field = uid
where = colPos = 0
}
}
}
}
Related
I did a upgrade from 9.5 to 10.4 and i guess Typoscript is not working right. There are no errors displayed (also the log files..)
The Header is rendering right but the Body-Tag stays empty.
I'm kinda lost right now.. it's always a pleasure upgrading Typo3.
Any Idea? Are there any Typoscript Tags which are out of date?
config {
absRefPrefix = /
disableBodyTag = 1
metaCharset = utf-8
prefixLocalAnchors = all
contentObjectExceptionHandler = 0
}
# HEADER MAINNAV MENU
headermainnav = HMENU
headermainnav {
entryLevel = 0
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
}
}
2 < .1
}
# LANGUAGE SELECTOR
languagemenu = COA
languagemenu {
20 = HMENU
20 {
special = language
special.value = 0,2
special.normalWhenNoLanguage = 0
wrap =
1 = TMENU
1 {
noBlur = 1
NO = 1
NO {
doNotLinkIt = 1
linkWrap = <li>|</li>
stdWrap.override = DE || EN
stdWrap {
typolink {
parameter.data = page:uid
additionalParams = &L=0 || &L=2
ATagParams = hreflang="de-DE" || hreflang="en-GB"
addQueryString = 1
addQueryString.exclude = L,id,no_cache
addQueryString.method = GET
no_cache = 0
}
}
}
ACT < .NO
ACT.linkWrap = <li class="active">|</li>
USERDEF1 < .NO
USERDEF1 {
linkWrap = <li class="text-muted">|</li>
stdWrap.typolink >
}
USERDEF2 < .ACT
USERDEF2 {
linkWrap = <li class="text-muted">|</li>
stdWrap.typolink >
}
}
}
wrap = <ul id="language_menu" class="language-menu">|</ul>
}
# FOOTER MAINNAV MENU
footermainnav = HMENU
footermainnav {
entryLevel = 0
excludeUidList = 2,3,4,5,6
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
}
}
2 < .1
}
page = PAGE
page {
# set baseURL on the flow
headerData.5 = TEXT
headerData.5.data=getIndpEnv:HTTP_HOST
headerData.5.wrap = <base href="{$websiteConfig.protocol}://|/"></base>
meta {
description = page:description
viewport = width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no
X-UA-Compatible = IE=edge
X-UA-Compatible.attribute = http-equiv
}
shortcutIcon = fileadmin/t3/img/favicon.png
includeCSS {
googlefontscss = https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,600,600i,800,800i|Oswald:500
googlefontscss.external = 1
file1 = fileadmin/t3/css/normalize.css
file2 = fileadmin/t3/css/grid12.css
file3 = fileadmin/t3/css/slick.min.css
file4 = fileadmin/t3/css/style.css
file5 = fileadmin/t3/custom.css
}
includeJS {
file1 = fileadmin/t3/js/jquery.min.js
}
includeJSFooter {
file2 = fileadmin/t3/js/lottie.min.js
file3 = fileadmin/t3/js/slick.min.js
file4 = fileadmin/t3/script.js
file5 = fileadmin/t3/js/custom.js
}
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/t3/layout.html
relPathPrefix = fileadmin/t3/
workOnSubpart = DOCUMENT
substMarksSeparately = 1
marks {
COPYRIGHT = TEXT
COPYRIGHT {
data = date : U
strftime = %Y
noTrimWrap = |© | TYPO3 All Rights Reserved.|
}
BODYTAG = TEXT
BODYTAG.insertData = 1
BODYTAG.dataWrap = <body class="no-touch" data-page="{tsfe:id}">
CONTACTFORM = CONTENT
CONTACTFORM {
table = tt_content
select {
pidInList = 23
includeRecordsWithoutDefaultTranslation = 1
}
}
HEADERMAINNAV < headermainnav
LANGUAGESELECTOR < languagemenu
FOOTERMAINNAV < footermainnav
CONTENT = CONTENT
CONTENT {
table = tt_content
select {
languageField = 1
orderBy = sorting
includeRecordsWithoutDefaultTranslation = 1
}
}
NEWSBANNER = CONTENT
NEWSBANNER {
table = tt_content
select {
pidInList = 47
includeRecordsWithoutDefaultTranslation = 1
}
}
COOKIEHINTCONTENT = CONTENT
COOKIEHINTCONTENT {
table = tt_content
select {
pidInList = 14
includeRecordsWithoutDefaultTranslation = 1
}
}
IMPRINTCONTENT = CONTENT
IMPRINTCONTENT {
table = tt_content
select {
pidInList = 16
includeRecordsWithoutDefaultTranslation = 1
}
}
PRIVACYCONTENT = CONTENT
PRIVACYCONTENT {
table = tt_content
select {
pidInList = 17
includeRecordsWithoutDefaultTranslation = 1
}
}
JOBROWS = CONTENT
JOBROWS {
table = tt_content
select {
pidInList = 27
orderBy = sorting
includeRecordsWithoutDefaultTranslation = 1
}
}
DOWNLOADS_DE = CONTENT
DOWNLOADS_DE {
table = tt_content
select {
pidInList = 31
where = sys_language_uid = 0
languageField = 0
orderBy = sorting
includeRecordsWithoutDefaultTranslation = 1
}
}
DOWNLOADS_EN = CONTENT
DOWNLOADS_EN {
table = tt_content
select {
pidInList = 31
where = sys_language_uid = 2
languageField = 0
orderBy = sorting
}
}
FAQDATA = CONTENT
FAQDATA {
table = tt_content
select {
pidInList = 34
orderBy = sorting
includeRecordsWithoutDefaultTranslation = 1
}
}
}
}
}
Keep in mind that TEMPLATE, MARKERS and SUBPARTS will be removed in TYPO3 11.
the 10.template = FILE was removed in TYPO3 10.
You will have to switch to FLUID.
Read more here: https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Template/Index.html
10 = FLUIDTEMPLATE
10 {
# also dynamic with .stdWrap
templateName = TemplateName
layoutRootPaths {
# if you set <f:layout name="Whatever" /> in your template, create Whatever.html there
10 = fileadmin/t3/Layouts/
}
partialRootPaths {
10 = fileadmin/t3/Partials/
}
templateRootPaths {
# make sure you have TemplateName.html inside (whatever templateName will be)
10 = fileadmin/t3/Templates/
}
variables {
# use as {copyright} in template
copyright = TEXT
copyright{
data = date : U
strftime = %Y
noTrimWrap = |© | TYPO3 All Rights Reserved.|
}
}
}
// untested, but should be right
I have a little problem, the following code works, but to not show what I do not want to display, I'm forced to put style =" display: none " with invalid HTML code, because I'm in <ul> <li> ... </ ul>. How could I not display anything at all?
40 = CONTENT
40 {
table = tt_content
select {
orderBy = sorting
pidInList.field = uid
where = {#colPos}=99 and deleted = 0 and hidden = 0
}
renderObj = COA
renderObj {
20 = TEXT
20.stdWrap.field = header
20.stdWrap.wrap = <b>|</b>
# OVERRIDE for <ul><li> ...
20.stdWrap.wrap.override = <span style="display:none">|</span>
20.stdWrap.wrap.override.if.value = 1
20.stdWrap.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <i>|</i>
# OVERRIDE for <ul><li> ...
30.stdWrap.wrap.override = <span style="display:none">|</span>
30.stdWrap.wrap.override.if.value = 1
30.stdWrap.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
40 = FILES
40 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file {
import.data = file:current:originalUid // file:current:uid
#width = 232c
#height = 145c
}
required = 1
wrap = <div class="img-wrap">|</div>
}
}
# OVERRIDE for <ul><li> ...
40.stdWrap.wrap.override = <span style="display:none">|</span>
40.stdWrap.wrap.override.if.value = 1
40.stdWrap.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
}//COA
}//CONTENT
In fact, I tried a lot of stuff before resigning myself to <span style =" display: none "> | </ span>, do you have a better solution?
Best regards
Did you try these propositions?
40.renderObj.40.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
}
or
40.renderObj.40.stdWrap.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
}
if that's not working you've to check if the register is filled with any data, you can check that just by rendering it too in 40.renderObj.50:
40.renderObj.50 = TEXT
40.renderObj.50.data = {register:typeOfMenu}
As it seems that {register:typeOfMenu} is defined outside that CONTENT and you want to render the whole block only if {register:typeOfMenu}=1 you could also note it like this:
40 = CONTENT
40 {
table = tt_content
select {
orderBy = sorting
pidInList.field = uid
where = {#colPos}=99 and deleted = 0 and hidden = 0
}
renderObj = COA
renderObj {
20 = TEXT
20.stdWrap.field = header
20.stdWrap.wrap = <b>|</b>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <i>|</i>
40 = FILES
40 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file {
import.data = file:current:originalUid // file:current:uid
#width = 232c
#height = 145c
}
required = 1
wrap = <div class="img-wrap">|</div>
}
}
}//COA
stdWrap.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
}
}//CONTENT
Sorry, but I did not put all the code, there was before a COA. Now, thanks to your advice I have solved the problem. Here is the complete code:
NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.wrap = <h1>|</h1>
10.field = nav_title // title
10.typolink.parameter.field = uid
# OVERRIDE for <ul><li> ...
10.wrap.override = <li class="laclasse">|
10.wrap.override.if.value = 1
10.wrap.override.if.equals.dataWrap = {register:typeOfMenu}
40 = CONTENT
40 {
table = tt_content
select {
orderBy = sorting
pidInList.field = uid
where = {#colPos}=99 and deleted = 0 and hidden = 0
}
renderObj = COA
renderObj {
20 = TEXT
20.stdWrap.field = header
20.stdWrap.wrap = <b>|</b>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <i>|</i>
40 = FILES
40 {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file {
import.data = file:current:originalUid // file:current:uid
#width = 232c
#height = 145c
}
required = 1
#wrap = <div class="img-wrap">|</div>
titleText.data = page:subtitle
altText.data = page:subtitle
stdWrap.typolink.parameter.data = leveluid:0
}
}
}//COA
}//CONTENT
}//COA
# OVERRIDE for <ul><li> ...
stdWrap.cObject.40.if {
value = 1
equals.dataWrap = {register:typeOfMenu}
negate = 1
}
Thanking you,
Best regards
I have the following menu-type, which works correctly for the main-part.
However, i want to add a fallback image, if no image is found.
tt_content.menu {
20 {
108 = HMENU
108 {
special = directory
special.value.field = pages
1 = TMENU
1.wrap = <div class="special_menu">|</div>
1.NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
10 = FILES
10 {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
width = 263c
height = 155c
maxW = 263c
maxH = 155c
import.data = file:current:publicUrl
# if file:current:publicUrl is empty, use default image
if.isFalse = fileadmin/my/path/to/image.jpg
}
altText.field = title
imageLinkWrap = 1
imageLinkWrap {
enable = 1
typolink.parameter.field = uid
}
}
stdWrap.wrap = <div class="menu10_bild">|</div>
}
20 = TEXT
20.field = title
20.typolink.parameter.field = uid
20.wrap = <div class="menu10_text">|
30 = TEXT
30.field = abstract
30.wrap = <p>|</p></div><div class="w-clearfix"> </div>
}
}
}
}
}
for some reason, it just ignores the line. Can someone help me with that?
You should check the TypoScript Reference stdWrap.ifEmpty.
In your case the code should look like this
tt_content.menu {
20 {
108 {
1.NO {
stdWrap.cObject {
10 = FILES
10 {
# ....
stdWrap.ifEmpty.cObject = IMAGE
stdWrap.ifEmpty.cObject{
file = fileadmin/.../my_image.png
}
# ....
}
}
}
}
}
}
You can use every cObject you want.
Check out Content Objects (cObject)
Try this:
tt_content.menu {
20 {
108 = HMENU
108 {
special = directory
special.value.field = pages
1 = TMENU
1.wrap = <div class="special_menu">|</div>
1.NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
# default image
value = fileadmin/my/path/to/image.jpg
10 = FILES
10 {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
width = 263c
height = 155c
maxW = 263c
maxH = 155c
import.data = file:current:publicUrl
}
altText.field = title
imageLinkWrap = 1
imageLinkWrap {
enable = 1
typolink.parameter.field = uid
}
}
stdWrap.wrap = <div class="menu10_bild">|</div>
}
20 = TEXT
20.field = title
20.typolink.parameter.field = uid
20.wrap = <div class="menu10_text">|
30 = TEXT
30.field = abstract
30.wrap = <p>|</p></div><div class="w-clearfix"> </div>
}
}
}
}
}
i have an TMENU, in that Menu I would have the Content from the Subpages in the Menu. On every Page is an Col (colpos=0) with Content. Is it possible to get the Content from there to the Menu?
lib.mainmenu = HMENU
lib.mainmenu {
1 = TMENU
1 {
wrap = <ul id="mainmenu">|</ul>
expAll = 1
NO {
wrapItemAndSub = <li>|</li>
ATagParams = class="drop"
}
}
2 = TMENU
2 {
wrap = <div class="dropdown_produkte"><div class="nav-tabs"><ul>|</ul></div></div>
NO {
wrapItemAndSub = <li>|</li>
}
2.40 = CONTENT
2.40 {
table = tt_content
select.pidInList.field = pid
select.where = colPos=0
select.languageField=sys_language_uid
wrap = <div class="teaser">|</div>
}
}
}
There is already such a menu defined in css_styled_content
typo3/sysext/css_styled_content/static/setup.txt
# "Menu of subpages to these pages + sections - liststyle"
7 < .1
7 {
stdWrap {
outerWrap = <ul class="csc-menu csc-menu-7">|</ul>
}
1.expAll = 1
2 < .1
2 {
sectionIndex = 1
sectionIndex.type = header
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li class="csc-section">|</li>
}
}
If you are going to use typoscript in your project (wich you hardly need anymore when you develope with fluid + vhs) than css_styled_content is always a good reference point
Here is my Solution
lib.mainmenu = HMENU
lib.mainmenu {
1 = TMENU
1 {
wrap = <ul id="mainmenu">|</ul>
expAll = 1
NO {
wrapItemAndSub = <li>|</div></li>
ATagParams = class="drop"
}
submenuObjSuffixes = a || b || c || d || e
}
2a < .1
2a {
wrap = <div class="dropdown_produkte">|</div>
stdWrap.cObject = COA
stdWrap.cObject {
20 = HMENU
20 {
special = directory
special.value.data = field:pid
1 = TMENU
1 {
expAll = 1
wrap = <div class="nav-tabs"><ul>|</ul>
NO {
wrapItemAndSub = <li>|</li>
#stdWrap.dataWrap = <h2>|</h2>
#linkWrap = | |*| /
ATagParams = class=submenu
}
ACT < .NO
ACT = 1
ACT {
ATagParams = class=submenuActive
}
RO < .ACT
}
}
40 = CONTENT
40 {
table = pages
select {
pidInList.field = pid
orderBy = sorting
}
renderObj = COA_INT
renderObj {
10 = TEXT
#10.field = title
10.wrap = |
20 = LOAD_REGISTER
20 {
meinRegister.cObject = TEXT
meinRegister.cObject.field = uid
}
50 = COA
50 {
###########
20 = CONTENT
20 {
table = tt_content
select {
pidInList.data = register:meinRegister
where = colPos=0
}
}
###########
}
}
}
}
}
}
As I faced a similar issue today, I wanted this question to be up to date. (Using TYPO3 8.7.4 with fluid_styled_content.)
lib.mainmenu = HMENU
lib.mainmenu {
1 = TMENU
1 {
wrap = <ul id="mainmenu" class="level1">|</ul>
expAll = 1
NO {
wrapItemAndSub = <li>|</li>
ATagParams = class="drop"
}
}
2 < .1
2 {
wrap = <div class="wrapper">|</div>
stdWrap.innerWrap = <ul class="level2">|</ul>
stdWrap.append = CONTENT
stdWrap.append {
table = tt_content
select {
pidInList.field = pid
where = colPos = 5 and deleted = 0 and hidden = 0
}
stdWrap.wrap = <div class="content">|</div>
}
}
3 < .2
3 {
NO.wrapItemAndSub = <li>|</li>
wrap = <ul class="level3">|</ul>
stdWrap.append >
}
}
That way (of course I simplified it here) I was able to add custom populated content from a specific column (defined in a backend_layout) to be rendered inside a navigation panel.
In a COA, I have this TypoScript to add an image linked to a larger copy of itself. But the Javascript plugin I'm using (Colorbox) isn't able to resize the image properly.
20 = CONTENT
20 {
wrap = <div class="lightbox clearfix">|</div>
required = 1
table = tt_content
select.languageField = sys_language_uid
select.where = colPos = 2
select.selectFields = bodytext,image,header
renderObj=COA
renderObj{
10 = FILES
10 {
required = 1
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:originalUid // file:current:uid
file.width=300c
file.height=300c
imageLinkWrap = 1
imageLinkWrap {
enable = 1
width = 1600m
height = 1600m
JSwindow = 0
linkParams.ATagParams {
// title.data =
dataWrap = class = "lightbox-group" title="{file:current:description}"
}
}
}
}
}
}
What's up?
Here's the correct TypoScript. I'm sharing it because it is a legacy weirdness others might stumble upon too.
You have to set imageLinkWrap.directImageLink = 1, else imageLinkWrap won't deliver the image itself, but a HTML page containing that image!
20 = CONTENT
20 {
wrap = <div class="lightbox clearfix">|</div>
required = 1
table = tt_content
select.languageField = sys_language_uid
select.where = colPos = 2
select.selectFields = bodytext,image,header
renderObj=COA
renderObj{
10 = FILES
10 {
required = 1
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:originalUid // file:current:uid
file.width=300c
file.height=300c
imageLinkWrap = 1
imageLinkWrap {
enable = 1
width = 1600m
height = 1600m
directImageLink = 1
JSwindow = 0
linkParams.ATagParams {
// title.data =
dataWrap = class = "lightbox-group" title="{file:current:description}"
}
}
}
}
}
}