I started using TYPO3 8.7.1 some days ago - no prior experiences in TYPO3.
I am at the point that I am using the t3editor to create a first test template using the guide that's been offered on the official page, which is for version 7. Are there huge differences in templating between those two versions, because I am only getting a blank page and even my source code shows nothing in between the body tags.
# Default PAGE object:
page = PAGE
# Define that we use a Template and where it is located
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/tmp/home.html
}
# Insert shortcut icon in the head of the website
page.shortcutIcon = fileadmin/img/favicon.ico
# Insert stylesheet in the head of the website
page.includeCSS.base = fileadmin/css/style.css
On that note I have another question. I can't seem to find regularity for the highlighting colors used by the t3editor, but at the same time I can't find any errors in this snippet.
Can anyone help?
Best regards
An example with FLUIDTEMPLATE:
In TypoScript Setup:
page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
template = FILE
template.file = fileadmin/Templates/Html/Page/Templates/Default.html
layoutRootPath = fileadmin/Templates/Html/Page/Layouts/
variables {
content < styles.content.get
}
}
}
fileadmin/Templates/Html/Page/Layouts/Default.html
<f:render section="Main" />
fileadmin/Templates/Html/Page/Templates/Default.html
<html>
<head>
<title>Page Template Default</title>
</head>
<body>
<f:layout name="Default"/>
<f:section name="Main">
<f:format.raw>{content}</f:format.raw>
</f:section>
</body>
Then insert content and show the page.
Related
I am using a Typo3(11.5.12) server, set up locally with xampp.
I am trying to understand how bootstrap works in typoscript, so I followed this tutorial.
The content on the site does not get formatted, even though I copied every line of typoscript.
I ensured that the 4 needed files are included in the user_upload folder and I checked that the respective paths are set correctly.
I also made sure that the fluid content elements are included.
This is the typoscript code that I copied:
# Default PAGE object:
page = PAGE
page {
meta {
author = testauthor
viewport = width=device-width, initial-scale=1.0
}
includeCSS {
10 = fileadmin/user_upload/tutorial/bootstrap/bootstrap.min.css
}
includeJS {
10 = fileadmin/user_upload/tutorial/bootstrap/bootstrap.bundle.min.js
}
100 = HMENU
100{
wrap = <nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>|</div></nav>
1 = TMENU
1.wrap = <ul> | </ul>
1.NO.wrapItemAndSub = <li> | </li>
1.expAll = 1
2 < .1
3 < .2
}
200 < styles.content.get
200.wrap = <div class="container mt-5">|</div>
}
This is what it is supposed to look like: https://gyazo.com/3753c5661c84372df78c9d2683b1feeb
This is what it looks like for me: https://gyazo.com/c55e9c61500c7e0eff62b79cf77071e2
Here are the 4 required files located: https://gyazo.com/21b2902e06b2e17f5bcfcb28b93a4d50
The fluid content elements are included: https://gyazo.com/f87294000fa116ffecb7329fe87b0c65
I suppose there is a problem with typoscript understanding the bootstrap code, but I have no clue why that could be. Does someone have a clue?
Disclaimer: I apologize for the images not being formatted, I don´t have 10 reputation yet.
In newer TYPO3 versions .js and .css sources cannot be in ./fileadmin. This is enforced by the Content-Security-Policy (CSP) headers which are set in the default ./public/fileadmin/.htaccess (it is generated during install from this template).
Your browser should normally show CSP blocked assets in its Devtools -> Console and/or in the network tab.
You could change/remove the CSP in that file (not really recommended but it will keep you going for that tutorial) or you could refactor all assets into a site package (recommended). It is described in this tutorial.
I have a self written TYPO3 extension (I used ext:extension_builder to create it)
My top-level TypoScript looks like this:
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
format = html
file = EXT:cmsp/Resources/Private/Templates/User/Default.html
partialRootPaths {
10 = EXT:cmsp/Resources/Private/Partials/
}
layoutRootPaths {
10 = EXT:cmsp/Resources/Private/Layouts/
}
templateRootPaths
10 = EXT:cmsp/Resources/Private/Templates/
}
variables {
content_main < styles.content.get
content_main.select.where = colPos = 0
}
}
I used a simple Fluid Styled Content template:
<f:link.action controller="user" action="search" class="btn btn-secondary">action link</f:link.action>
The search action is registered in ext_localconf.php:
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'SimpleParser.Cmsp',
'Cmspfe',
[
'User' => 'list,search'
],
// non-cacheable actions
[
'User' => 'list,search'
]
);
I have also a template Search.html:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Search" />
<f:section name="content">
<h1>Search Template</h1>
<f:flashMessages />
<table class="tx_cmsp" >
<tr>
<th> </th>
<th> </th>
</tr>
</table>
<form action="SearchConfim.php">
Searchterm: <input type="text" name="sTerm"><br>
<input type="submit" value="Submit">
</form>
</f:section>
</html>
The problem is that I cannot create or follow a link in the website frontend from top-level Default.html (FLUIDTEMPLATE object) to Search.html (Extbase controller template):
<f:link.action controller="user" action="search" class="btn btn-secondary">action link</f:link.action>
I just stay on Default.html all the time, even when I click an action link of my controller. I can create external links with
<f:link.external ... ></f:link.external>
The external link is working but I cannot use a link to access Search.html.
Perhaps the problem is that I use a TypoScript which does not activate the controller (in a right way). But I'm happy if anyone can help me.
Your controller name is User with an uppercase U.
Use the same name in your f:link.action, if the controller is not being changed you can even remove this parameter.
It seems that Default.html is the name of the top-level rendering template in FLUIDTEMPLATE. So, I assume that <f:link.action ... tag is placed in that file - at least the currently generated link seems to confirm it and looks like the following:
index.php?id=1
&tx__%5Baction%5D=search
&tx__%5Bcontroller%5D=User
&cHash=dffabf13e973c371d14fb2e34b23d1a0
It uses tx__ as prefix which actually should be something like tx_cmsp_cmspfe (the combination of your extension name and the corresponding plugin name to be used).
Brief explanation
Default.html template is outside of the Extbase scope and thus does not know about the current extension, controller and plugin that shall be used
usually links appear in templates of the same extension (e.g. in Resources/Private/Templates/List.html)
otherwise according scope has to be defined explicitly (like shown below)
Solution for placing link to Extbase plugin in top-level rendering template
This example can be used outside the Extbase scope on Default.html template for the current page layout - however, it explicitly has to use the correct Extbase plugin scope:
<f:link.action
action="search"
controller="User"
pluginName="Cmspfe"
extensionName="Cmsp"
pageUid="4321"
class="btn btn-secondary">
action link
</f:link.action>
pageUid has to be adjusted and refers to the page the plugin is currently being used as content element
see https://fluidtypo3.org/viewhelpers/fluid/master/Link/ActionViewHelper.html as reference for links
see https://fluidtypo3.org/viewhelpers/fluid/master/FormViewHelper.html as reference for scoped <form> elements (which appeared in your code as well - pluginName, extensionName and pageUid are essential attributes in this scenario as well)
I have a TYPO3 version 6.2 website and I am working on a AMP version.
I use a condition in URL to load different versions of the same TYPO3 page depending if the page version request is AMP or not.
Regular version of the page :
https://www.novethic.fr/actualite/environnement/climat/isr-rse/rencontre-avec-danone-un-des-rares-francais-a-aligner-sa-strategie-sur-l-objectif-2-c-145150.html
AMP version of the page
https://www.novethic.fr/amp/actualite/environnement/climat/isr-rse/rencontre-avec-danone-un-des-rares-francais-a-aligner-sa-strategie-sur-l-objectif-2-c-145150.html
Everything works fine except if my page contains image inserted in the RTE
In this case I would need to convert <img> to <amp-img>for images inserted in the RTE when the version asked is AMP.
I already have a global var condition to load custom TS when AMP version is called.
But no idea how to convert <img> to <amp-img>
Any idea on how to achieve that?
if it is only a replacement of the tag name you could try to use a (conditioned) string replacement on one of these levels:
the whole page.
you could do a stdWrap.replacement, but that might not work on cached content
the page content in fluid.
just use a viewhelper to replace text of rendered content. that even could be a typoscript VH:
(<f:cObject typoscriptObjectPath="lib.img2ampimg">{content}</f:cObject>)
the page content in typoscript.
depending wether you render your content with TS you might add stdWrap.replacement there:
.
page {
10 = FLUIDTEMPLATE
10 {
:
variables {
content < styles.content.get
:
}
}
}
[--your amp condition--]
page.10.variables.content.stdWrap.replacement {
1.search = <img
2.replace = <amp-img
}
[global]
Maybe this could be achieved with the extension "Content Replacer", https://extensions.typo3.org/extension/replacer
I've solved it as Bernd Wilke suggested , but directly in my fluid template :
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.conditionamp')} == 1">
<f:then>
<v:format.replace substring="<img " replacement="<amp-img layout=\"responsive\"">
<f:format.html>{article.corpsDeTexte}</f:format.html>
</v:format.replace>
</f:then>
<f:else>
<f:format.html>{article.corpsDeTexte}</f:format.html>
</f:else>
</f:if>
Thanks again for your help
:)
I followed this tutorial to create a Typo3 website using a Fluid template. However, I cannot get the CSS included in the template. In the tag the following css is included:
<link rel="stylesheet" href="css/bootstrap.css">
I rewrote this in the template to:
<link rel="stylesheet" href="{f:uri.resource(path:'css/bootstrap.css')}">
But the css is not included. The path to the template is:
fileadmin/templates/layouts/main.html
The path to the CSS file is:
fileadmin/templates/css/bootstrap.css
Where should I put the CSS files? And how should I include this css in the Fluid template?
Please keep in mind that pduerseler's way of doing it is better if you're using a plugin on many pages.
As for your problem, the uri.resource ViewHelper assumes that your resources are in the Resources/Public directory of your extension. So:
<link rel="stylesheet" href="{f:uri.resource(path:'css/bootstrap.css')}">
points to
typo3conf/ext/yourExt/Resources/Public/css/bootstrap.css
It is not possible to point to a file in fileadmin with the resource ViewHelper, see https://git.typo3.org/Packages/TYPO3.CMS.git/blob/HEAD:/typo3/sysext/fluid/Classes/ViewHelpers/Uri/ResourceViewHelper.php.
Current best practise for a TYPO3 page template is to have the template of a TYPO3 Website in an own extension, see e.g. https://github.com/georgringer/modernpackage
As a rule of thumb, you put JS and CSS files into your typoscript.
Example:
page = PAGE
page {
includeCSS {
myfile = path/to/my/file.css
}
includeJS {
myfile = path/to/my/file.js
}
}
This brings some benefits; You can organize your js and css in multiple files, and have TYPO3 concatenate and compress them by setting
config {
concatenateJs = 1
concatenateCss = 1
compressJs = 1
compressCss = 1
}
See more here: http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html
Maybe I'm just missing something ... obviously, and so far I've googled up nothing to help.
the issue, seems simple, I'm just trying to load a "slightly" different for one Page in my Root tree. All other pages share the Root template, but I need for this one page to have a completely different kind of content and a slightly different header, thus the need for a secondary template.
I've done the following for it:
# Default PAGE object:
page = PAGE
# Define the template
page.10 = TEMPLATE
# Our template is a file
page.10.template = FILE
# Our template file is fileadmin/template/media/media.html
page.10.template.file = fileadmin/template/media/media.html
But all this leads too is a completely blank HTML upon page load. No errors, no nothing! The page source just comes up:
<!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-2013 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://typo3.org/
-->
<link rel="shortcut icon" href="http://192.168.206.11/introductionpackage-6.1.0/fileadmin/template/media/favicon.ico" type="image/x-ico; charset=binary">
<link rel="icon" href="http://192.168.206.11/introductionpackage-6.1.0/fileadmin/template/media/favicon.ico" type="image/x-ico; charset=binary">
<title>Media</title>
<meta name="generator" content="TYPO3 6.1 CMS">
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_15a396fd13.css?1369410324" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/template/style.css?1369398600" media="all">
</head>
<body>
</body>
</html>
So, I suppose the question is, how can I get a single Page to have a separate template?
A typical error can be you forgot to include the default page typoscript template because the typoscript object page in your code needs it to show the content or pull it from the database. In the template configuration of template look in the include static typoscript template and include css.styled.content.
Don't know if this is correct, but this is what I found to do.
I made my template and placed it in a specific folder. Then I did the following and it works!
# Default PAGE object:
# page = PAGE
page.10 = NULL
page.includeJSlibs.jwplayer = 1
page.includeJSlibs.jwplayer = fileadmin/template/js/jwplayer/jwplayer.js
# Define the template
page.20 = TEMPLATE
# Our template is a file
page.20.template = FILE
# Our template file is fileadmin/template/media/media.html
page.20.template.file = fileadmin/template/media/media.html
# Insert shortcut icon in the head of the website
page.shortcutIcon = fileadmin/template/media/favicon.ico
# Insert stylesheet in the head of the website
# page.stylesheet = fileadmin/template/style.css
# Work with the subpart "DOCUMENT"
# page.20.workOnSubpart = DOCUMENT
######################################################
#
# Configuration of SUBPARTS
#
######################################################
# Define the subparts, which are inside the subpart DOCUMENT
page.20.subparts {
}
######################################################
#
# Configuration of MARKERS
#
######################################################
# Define the markers inside the subpart DOCUMENT
page.20.marks {
# Load the logo
LOGO = IMAGE
LOGO.file = fileadmin/templates/images/logo.png
LOGO.altText = Mountain Top
# Menu 1 cObject
menu_1 = HMENU
}
# First level menu-object, textual
page.20.marks.menu_1.1 = TMENU
page.20.marks.marks.menu_1.1 {
# Normal state properties
NO.allWrap = <li> | </li>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <li class="active"> | </li>
}
# Second level menu-object, textual
page.20.marks.menu_1.2 = TMENU
page.20.marks.menu_1.2 {
# Normal state properties
NO.allWrap = <div class="menu1-level2-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level2-act"> | </div>
}