I am pretty new to Typo3, Fluid etc. and I can't solve the following problem:
I don't want fluidcontent_core to render the headline of my customized content element. Therefore I created a new template with an appropriate layout but the headline gets still rendered.
I've been looking for a while now and can't find my mistake. It would be really nice if someone can help me!
I've already added the layoutRootPath and the templateRootPath to the fluidcontetn_core plugin.
In the template where the CE is added I render the content with <v:content.render column="1" />
template of the customized content element:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form options="{group: 'Carousel'}" id="carousel" label="Carousel">
<flux:grid>
<flux:grid.row>
<flux:grid.column name="Content" label="Carousel Content" />
</flux:grid.row>
</flux:grid>
</flux:form>
</f:section>
<f:section name="Preview">
<flux:widget.grid />
</f:section>
<f:section name="Main">
<section class="kundenlist carousel slide frame" id="kundenlist" data-ride="carousel">
<div class="carousel-inner">
<flux:content.render area="content" />
</div>
<ol class="carousel-indicators visible-xs">
<li data-target="#kundenlist" data-slide-to="0" class="active"></li>
<li data-target="#kundenlist" data-slide-to="1"></li>
</ol>
<ul class="carousel-navigation hidden-xs">
<li>
<a class="left" href="#kundenlist" data-slide="prev">
<span class="icon-carousel-prev"></span>
</a>
</li>
<li><span class="js-active-slide">1</span> / 2<!--bei dynamischer Generierung fix reinschreiben--></li>
<li>
<a class="right" href="#kundenlist" data-slide="next">
<span class="icon-carousel-next"></span>
</a>
</li>
</ul>
</section>
</f:section>
layout of the customized content element:
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Content" />
<f:if condition="{settings.content.settings.container.addAnchor}">
<a name="c{record.uid}"></a>
</f:if>
<v:tag name="{v:variable.get(name: 'settings.container.types. {record.CType}') -> v:or(alternative: settings.container.types.default)}"
class="{settings.content.settings.container.className}">
<f:render section="Main" />
</v:tag>
CE Carousel example:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form options="{group: 'CE'}" id="carousel" label="Carousel">
<flux:form.section name="carouselsec" label="Carousel">
<flux:form.object name="carouselobt" label="Add new">
<flux:field.file name="image" uploadFolder="uploads/tx_fluidcontent/" label="Upload image" allowed="jpg, jpeg, png, gif" showThumbnails="1" />
<flux:field.input name="link" label="Page link" >
<flux:wizard.link />
</flux:field.input>
</flux:form.object>
</flux:form.section>
</flux:form>
</f:section>
<f:section name="Preview">
<h2>Carousel</h2>
</f:section>
<f:section name="Main">
<section class="kundenlist carousel slide frame" id="kundenlist" data-ride="carousel">
<div class="carousel-inner">
<ul> <!-- Your Carousel HTML structure -->
<f:for each="{carouselsec}" as="carouselList" iteration="Iteration">
<li>
<f:link.page pageUid="{carouselList.carouselobt.link}">
<f:image src="uploads/tx_fluidcontent/{carouselList.carouselobt.image}" width="150c" height="150" alt="carousel" />
</f:link.page>
</li>
</f:for>
</ul>
</div>
<ol class="carousel-indicators visible-xs">
<f:for each="{carouselsec}" as="carouselList" iteration="Iteration">
<li data-target="#kundenlist" data-slide-to="{Iteration.index}" class="<f:if condition='{Iteration.index}==0'>active</f:if>"></li>
</f:for>
</ol>
<ul class="carousel-navigation hidden-xs">
<li> <a class="left" href="#kundenlist" data-slide="prev"> <span class="icon-carousel-prev"></span> </a> </li>
<li><span class="js-active-slide">1</span> / 2<!--bei dynamischer Generierung fix reinschreiben--></li>
<li> <a class="right" href="#kundenlist" data-slide="next"> <span class="icon-carousel-next"></span> </a> </li>
</ul>
</section>
</f:section>
Useful links
Flux
Fluid
Related
Please exam the snippet in full page mode. The first navbar is fine. I tried to reduce the width of the search input but when I do that I can no longer get the links to move all the way to the right as in the first example. Can someone explain what's controlling the the width of the form and how do I adjust it to achieve the desired result
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
</head>
<body>
<nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav2' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control " placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<nav class='navbar navbar-expand-md bg-primary navbar-light'>
<div class='container'>
<a class='navbar-brand' href="#">NavBar </a>
<button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
<span class='navbar-toggler-icon'></span>
</button>
<div id='navbarNav3' class='collapse navbar-collapse '>
<ul class='navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href="#">Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#">Contact</a>
</li>
</ul>
<form class="form-inline justify-content-end ">
<input type="text" class="form-control w-50" placeholder='Search'>
<button class="btn btn-outline-success">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
I think the width of the form is based on the combined width of the search button and the input-element(with its default width).
With w-50, the input's width is reduced to half of the form's width which in-turn is based on the default width of the input element.
So, instead of setting width:50%, if you can set the width to a fixed value like width:8em, you can achieve the expected results.
I am new to TYPO3 and worked through this tutorial: https://docs.typo3.org/m/typo3/tutorial-sitepackage/master/en-us/Index.html. So far everything worked out, except the last step, the content mapping. I'm not quite sure what to post as a diagnostic, the source code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2017 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at https://typo3.org/
-->
<title>Page 1</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3conf/ext/site_package/Resources/Public/Css/website.css?1600015994" media="all">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="/index.php?id=8"
target=""
title="Page 1"
>
Page 1
</a>
</li>
<li class="nav-item ">
<a class="nav-link"
href="/index.php?id=9"
target=""
title="Page 2"
>
Page 2
</a>
</li>
<li class="nav-item ">
<a class="nav-link"
href="/index.php?id=10"
target=""
title="Page 3"
>
Page 3
</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p> ... </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/typo3conf/ext/site_package/Resources/Public/JavaScript/website.js?1600016007" type="text/javascript"></script>
</body>
</html>
The relevant template code looks like this:
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<f:render partial="Jumbotron" />
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '2'}" />
</div>
</div>
</div>
</main>
</f:section>
And the TypoScript source looks like this:
lib.dynamicContent = COA
lib.dynamicContent {
10 = LOAD_REGISTER
10 {
colPos.cObject = TEXT
colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
pageUid.cObject = TEXT
pageUid.cObject {
field = pageUid
ifEmpty.data = TSFE:id
}
contentFromPid.cObject = TEXT
contentFromPid.cObject {
data = DB:pages:{register:pageUid}:content_from_pid
data.insertData = 1
}
wrap.cObject = TEXT
wrap.cObject {
field = wrap
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#colPos}={register:colPos}
where.insertData = 1
pidInList.data = register:pageUid
pidInList.override.data = register:contentFromPid
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
30 = RESTORE_REGISTER
}
And it's saved in site_package/Configuration/TypoScript/Helper/DynamicContent.typoscript. The setup.typoscript file has these includes:
#import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'
#import 'EXT:site_package/Configuration/TypoScript/Helper/DynamicContent.typoscript'
Any suggestions?
I can't find how you transfer pageUid to the typoscript. So the template should be something like this:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<f:render partial="Jumbotron" />
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '1'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '0'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '2'}" />
</div>
</div>
</div>
</main>
</f:section>
</html>
Please not that, I put pageUid: '{data.uid}' in the data variable
Fist of all I am new to css/javascript/bootstrap.
All I want is to place this code:
<i class="fi-guide-dog"></i>
inside my span (or somewhere) so the dog icon shows next to the "Dog" word.
Please find my code below:
{%load static%}
<link rel="stylesheet" type="text/css" href="{% static 'toarnatot/style.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle= "collapse" data-target ="#topnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href={%url 'toarnatot:home'%}><strong>ToarnaTot</strong></a>
</div>
<!-- items -->
<div class="collapse navbar-collapse">
<ul class ="nav navbar-nav">
<li class="">
<a href="{% url 'toarnatot:home'%}">
<span class="glyphicon glyphicon-something" aria-hidden="true">
Dog
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Do not put anything inside the span tag , instead create another tag to print the text that you want to display with the glyphicon.
like:
<p>dog</p>
<span class="glyphicon glyphicon-something" aria-hidden="true"></span>
Hi all I am having an Issue Lets Suppose I am having a news Tag record and news record with two different Category Menu as describe below
In List View i selected C1 (show all Videos with Selected Category OR)
V1(Vedio)-C1(Category)-T1(Tag), V2-C1-T2, V3-C1-T1, V4-C1,T2 in same way V5-C2-T1, V6-C2-T2, V7-C2-T1, V8-C2-T2.Issue is when i choose C1 menu then T1 OR T2 Its fine..Showing V1,V3 or V2,V4...but when i choose C2 menu then T1 or T2 ,its giving the same Content V1,V3 or V2,V4.
for correct logic filter it should give..V5,V7 orV6,V8..becuase I selected C2 menu.
I am having two files which i think I have to correct but i don't know how to do this?
1.C:\xampp\htdocs\mysite\typo3conf\ext\news\Resources\Private\Templates\Styles\Twb\Templates\Category\List.html
<html 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,class:'nav nav-sidebar category-menu-view'}" />
</f:then>
<f:else>
<f:translate key="list_nocategoriesfound" />
</f:else>
</f:if>
</f:section>
<f:section name="categoryTree">
<ul class="{class}">
<f:for each="{categories}" as="category">
<li>
<f:if condition="{category.item.uid} == {overwriteDemand.categories}">
<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: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:else>
</f:if>
<f:if condition="{category.children}">
<f:render section="categoryTree" arguments="{categories: category.children,overwriteDemand:overwriteDemand,class:''}" />
</f:if>
</li>
</f:for>
</ul>
</f:section>
</html>
enter image description here2.C:\xampp\htdocs\mysite\typo3conf\ext\news\Resources\Private\Templates\Styles\Twb\Templates\Tag\List.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="General" />
<!--
=====================
Templates/Tag/List.html
-->
<f:section name="content">
<f:if condition="{tags}">
<ul class="nav nav-sidebar tag-menu-view">
<f:for each="{tags}" as="tag">
<li class="{f:if(condition:'{tag.uid} == {overwriteDemand.tags}',then:'active',else:'')}">
<f:link.page title="{tag.title}" pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{tags: tag}}}">
{tag.title}
</f:link.page>
</li>
</f:for>
</ul>
</f:if>
</f:section>
</html>
Sorry but I don't really understand what you want to achieve. However it seems that the best solution would be to write a custom extension which generates the views you need, based on EXT:news. This is described in the manual here https://docs.typo3.org/typo3cms/drafts/github/georgringer/news/DeveloperManual/ExtendNews/ExtensionBasedOnNews/Index.html
I would like create a dynamic Typo3 - Fluid layout. The width of the columns should be adjusted automatically. Through the restrictions of Fluid and Typoscript I have problems to formulate the complex condition of the center column. The AND, OR operators are not working.
I hope that somebody can help me.
Typoscript:
variables {
top < styles.content.get
top.select.where = colPos=3
left < styles.content.get
left.select.where = colPos=1
center < styles.content.get
center.select.where = colPos=0
right < styles.content.get
right.select.where = colPos=2
footer < styles.content.get
footer.select.where = colPos=4
}
Layout:
<div class="container-fluid">
TEST: {f:if(condition:'{right} AND {left}', then:'8', else:'{f:if(condition:\'{left} OR {right}\', then: \'9\', else:\'12\')}')}
<div class="row">
<div id="top_nav">
{top -> f:format.raw()}
</div>
</div>
<div class="row">
<f:if condition="{left}">
<div id="left" class="col-xs-12 col-md-{f:if(condition:'{right}', then:'2', else:'3')}">
{left -> f:format.raw()}
</div>
</f:if>
<div id="center" class="col-xs-12 col-md-{f:if(condition:'{right} AND {left}', then:'8', else:'{f:if(condition:\'{left} OR {right}\', then: \'9\', else:\'12\')}')}">
{center -> f:format.raw()}
</div>
<f:if condition="{right}">
<div id="right" class="col-xs-12 col-md-{f:if(condition:'{left}', then:'2', else:'3') }">
{right -> f:format.raw()}
</div>
</f:if>
</div>
Logical operators will only be available from TYPO3 v8
https://wiki.typo3.org/Fluid#Logical_operators
also, if you like to set a new variable (what you like to do with the class name) you could set your logic outside your html with the VHS variable set viewhelper:
https://fluidtypo3.org/viewhelpers/vhs/master/Variable/SetViewHelper.html
an example:
<f:if condition="{right}">
<f:then>
<v:variable.set name="classCenter" value="2" />
</f:then>
<f:else>
<v:variable.set name="classCenter" value="9" />
</f:else>
</f:if>
<div id="center" class="col-xs-12 col-md-{classCenter}" >
You will ofcourse need to install vhs and set the namespace in your fluid template: {namespace v=FluidTYPO3\Vhs\ViewHelpers}
That‘s just a lot of logic for template. If you decide to do it in an template try to not repeat your conditions, especially in inline notation ({f:if(…)}). I prefer using sections, be it in the same template/partial file or another, over setting variables.
Your code can get as readable as this:
<f:section="main">
<f:if condition="{right}">
<f:then>
<f:if condition="{left}">
<f:then><f:comment>left and right</f:comment>
<f:render section="top" arguments="{top:top}" />
<f:render section="left" arguments="{columns:2,left:left}" />
<f:render section="center" arguments="{columns:8,center:center}" />
<f:render section="right" arguments="{columns:2,right:right}" />
</f:then>
<f:else><f:comment>right only</f:comment>
<f:render section="top" arguments="{top:top}" />
<f:render section="center" arguments="{columns:9,center:center}" />
<f:render section="right" arguments="{columns:3,right:right}" />
</f:else>
</f:if>
</f:then>
<f:else>
<f:if condition="{left}">
<f:then><f:comment>left only</f:comment>
<f:render section="top" arguments="{top:top}" />
<f:render section="left" arguments="{columns:3,left:left}" />
<f:render section="center" arguments="{columns:9,center:center}" />
</f:then>
<f:else><f:comment>neither left nor right</f:comment>
<f:render section="top" arguments="{top:top}" />
<f:render section="center" arguments="{columns:12,center:center}" />
</f:else>
</f:if>
</f:else>
</f:if>
</f:section>
<f:section name="top">
<div class="row">
<div id="top_nav">
{top -> f:format.raw()}
</div>
</div>
</f:section>
<f:section name="left">
<div id="left" class="col-xs-12 col-md-{columns}">
{left -> f:format.raw()}
</div>
</f:section>
<f:section name="right">
<div id="right" class="col-xs-12 col-md-{columns}">
{right -> f:format.raw()}
</div>
</f:section>
<f:section name="center">
<div id="center" class="col-xs-12 col-md-{columns}">
{center -> f:format.raw()}
</div>
</f:section>
As for the condition part, IMO it‘s the maximum a fluid template should be put in. As your logic advances in complexity consider using a data processor. You can test your columns before your view‘s being rendered and assign the result to your template and use fluid layouts for your purpose.
You‘ll need some php skills for data processors. Good starting point to understand them from code ist TYPO3\CMS\Frontend\DataProcessing\CommaSeparatedValueProcessor.