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>
}
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.
So I need to add the attribute media="all" to these two link tags:
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-base.css" type="text/css">
but my local HTML file is configured as:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css # categories=['farmers.new.libraries','farmers.new.base']}" /> </sly>
It is a language called HTL, HTML Template Language. There's a way to add attributes via HTL but you need to create a whole java class in the back end and call it, it's a headache.
I want to know if I can add some javascript to append the attribute media="all" to the link tags to these specific CSS file path.
I was thinking of putting both paths inside a div and then with javascript find that div and append an attribute to each link tag inside that div.
var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css';
// Here's the magic
element.media = 'all';
head.appendChild(element, head.firstChild);
setTimeout(function () {
element.media = 'all';
});
A script tag is being created and I want to add async="" to this:
<!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js # categories='granite.utils'}" />
<sly data-sly-resource="${'contexthub' # resourceType='granite/contexthub/components/contexthub'}" />
Yes, it looks fine. But your code has a mistake. You should get the first element from the collection to access <head></head> element.
var head = document.getElementsByTagName('head')[0];
Why would you do that? Just do not use the clientlib mechanism. Most frontend developers will use their IDEs to build and minify CSS and JS anyway so there is not much to be lost if you import those artifacts at buildtime and add the tags in your code directly in the way you need them.
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.
Hi am trying to design an accordion component using sightly in AEM where instead of jsp we write html code along with different file for css and js under client libs.
I simply coded the below written part and wrote js for the same but am not able to see any changes ... Could someone please provide me a solution to implement the same.. ->when i click on show a parsys section opens up and when show converts to hide and when i click on hide the parsys section closes and hide converts to show.
<div data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap>
<css data-sly-call="${clientLib.css # categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
<js data-sly-call="${clientLib.js # categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
</div>
<div data-sly-test="${wcmmode.edit}">Accordion_2 component</div>
<div class="about-contentcontainer">
<div class="about-content">
<div class="awards">
<h4> <span class="more">Show</span></h4>
<h4> <span class="more expanded">Hide</span></h4>
</div>
</div>
</div>
<script>// <![CDATA[
$(document).ready(function() {
alert("Hello");
$(".awards h4 a").click(function() {
enter code here
$(this).parent().next().slideToggle("slow");
var htmlStr = $(this).find(".more").html();
if (htmlStr == "Show") {
$(this).find(".more").html("Hide");
$(this).find(".more").addClass("expanded");
} else {
$(this).find(".more").html("Show");
$(this).find(".more").removeClass("expanded");
}
});
});
// ]]></script>
Looking at it, I think that this has little to do with Sightly or even with AEM. Also, I'm not sure which content you want to toggle.
Below's a working HTML fragment for toggling content (independent from AEM):
<style>
.toggle-content {
display: block;
}
.toggle-content-hide,
.toggle-content-hidden .toggle-content-show {
display: inline;
}
.toggle-content-show,
.toggle-content-hidden .toggle-content-hide {
display: none;
}
</style>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 1</div>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 2</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
jQuery(function($) {
$('.toggle-content').click(function () {
$(this).toggleClass('toggle-content-hidden').next().toggle('slow');
return false;
})
});
</script>
To implement this in AEM, you should place the inline CSS into a CSS file of a client library, and the inline JS into a JS file of a client lib. I usually recommend to place them in the same client library within the component itself, so that everything that relates to that component is in the same folder. But when doing so, it is important to keep in mind that on a publish server, all /apps requests are forbidden by the dispatcher for security reasons, so all client libraries located under /apps should be merged and minified as one file that is typically located somewhere under /etc. To do so, you can use following repository node structure:
/apps/
mysite/
components/
mycomponent/
mycomponent.html Sightly template
clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.mycomponent]
css.txt contains just a reference to style.css
style.css contains the style snippet
js.txt contains just a reference to script.css
script.js contains the script snippet
/etc/
designs/
mysite/
clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.publish]
embed = [mysite.mycomponent, ...]
dependencies = [mysite.jquery]
The embed property of the /etc clientlib will make that it embeds and merges within the same file all clientlibs that are listed there. As opposed to the client libraries listed under the dependencies property, which will not get merged and will be served as a separate file. You can play with these properties to build the structure you need to optimize your site. There are also settings to automatically minify or not these files.
On the page, you then include the mysite.publish master clientlib located under /etc. So your page <head> element, would contain something like following Sightly template:
<head data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientLib.all # categories='sd-singtel.accordion_2'}" data-sly-unwrap/>
</head>
If you're using AEM 6.1, you can even drop the data-sly-unwrap, because the <sly> tag has the same effect.
After that, the Sightly template of your component located under a path like /apps/mysite/components/mycomponent/mycomponent.html would look as follows:
<div data-sly-test="${wcmmode.edit}">mycomponent name</div>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>${properties.myContentProperty}</div>
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