I'm working on a content navigation in typoscript. These requirements should be accomplished:
show the current node at the top -> is done!
show all child nodes of the current page -> is done!
if there are no child nodes, show last treelevel with with the current page active - not done yet!
For the last point, I need help. I tried to do something with [treelevel = 2] to control the navigation on the last treelevel, but nothing happened. Don't know why but the treelevel-condition won't work for me. Another problem is, sometimes the last treelevel is on 2nd level, sometimes on 3rd...
any ideas?
This is the typoscript so far:
temp.leftCol = COA
temp.leftCol {
5 = HTML
5.value = <ul class="contentNav">
### show current page on top
10 = TEXT
10.typolink {
parameter.data = TSFE:id
}
10 {
wrap = <li class="title">|</li>
data = leveltitle:2
if {
isTrue.numRows {
table = pages
}
}
}
### content navigation: show subpages
20 = HMENU
20.entryLevel = -1
20.1 = TMENU
20.1 {
noBlur = 1
NO = 1
CUR = 1
expAll = 1
}
20.1.NO {
wrapItemAndSub = <li>|</li>
stdWrap.wrap = |
allStdWrap.insertData = 1
}
20.1.CUR {
wrapItemAndSub = <li class="on">|</li>
stdWrap.wrap = |
allStdWrap.insertData = 1
}
20.1.wrap = |</ul>
}
What do you mean by this exactly?
if there are no child nodes, show last treelevel with with the current page active - not done yet!
As I understand it, it could be either
1) Letssay that there are 10 pages on level 1, and every one of those pages except page 7 have 3 subpages each. And letssay page 7 has no subpages. Then, when I go to page 7, it will display page 7 as active, but display subpages from page 6 (the "show last treelevel") under it.
or
2) When user navigates to page 7, it displays page 7 as active, and subpages for whatever page the user has been right before that? So that for example, if I navigate to page 2 first, and then go to page 7, I will see page 7 as active, and subpages for page 2.
Related
i have made some reordering each tab in tabs component mechanism but it is working not as i expected and i dont know why. I have some basic example with reordering.
#Route(value = "test")
public class testPanel extends Div {
public newPanel() {
Tabs tabs = new Tabs();
Button btn = new Button("Move 3 to 0");
Button ref = new Button("refresh");
ref.addClickListener(evt ->{
tabs.removeAll();
tabs.add(new Tab("0"));
tabs.add(new Tab("1"));
tabs.add(new Tab("2"));
tabs.add(new Tab("3"));
});
ref.click();
btn.addClickListener(evt -> {
int maxPos= 3;
Tab tab= (Tab) tabs.getChildren().collect(Collectors.toList()).get(maxPos);
tabs.getChildren().forEach( f ->{
int tabPos = Integer.valueOf(((Tab)f).getLabel());
if(tabs.indexOf(f)<maxPos) {
tabs.addComponentAtIndex( tabPos+1, f);
}
});
tabs.addComponentAtIndex(0, tab);
System.out.println(tabs.getChildren().collect(Collectors.toList()));
});
add(btn,ref,tabs);
}
}
When i'm reordering 3rd tab to 0 then my 1 tab is added after 2 tab. But when i'm looking into tabs order in getChildren then i can see that all tabs are in the correct order (3,0,1,2) and when i'm selecting tab 2 it is selecting both tab 1 and 2 and it is treating as if i would choose tab 1 (page for tab 1 is showing). I can't select tab 2 anymore.
I know that in this example i can use only tabs.addComponentAtIndex(0, tab); without reordering other tabs but i need it in my reordering mechanism which is more complicated but problem is this same. In selection listener when i select tab 2 it treats it if i had choose tab 1.
Here it is the order of tabs i getChildren aftek reordering:
[Tab{3}, Tab{0}, Tab{1}, Tab{2}]
It is working fine if remove all tabs and when i add them again in correct order.
Content in the element of the component looks correct as well:
<vaadin-tabs>
<vaadin-tab>
3
</vaadin-tab>
<vaadin-tab>
0
</vaadin-tab>
<vaadin-tab>
1
</vaadin-tab>
<vaadin-tab>
2
</vaadin-tab>
</vaadin-tabs>
For 7 tabs it is even weirder when i would change 6 tabs to 0:
Im completely new to typoscript therefore I have quite a hard time with the syntax but I think I am getting there.
My task is to render an HTML table and fill it with values from a database table (doesn't matter which one). In my case I took the tt_content table and tried to fill my HTML table with the "header" field and the "bodytext" field.
So I made a completely empty template and wrote the following code in the "setup" field of the template. I added some headers and texts to the sites I have to test my code but I get a completely empty page not even the "table" HTML tags are there.
After 4 days of research I still don't know what my problem is here so I am quite desperate.
Here is what I have so far:
page = PAGE
page.typeNum = 0
lib.object = COA_INT
lib.object {
10 = TEXT
10.value = <table>
20 = CONTENT
20.wrap = <tr>|</tr>
20 {
table = tt_content
select {
orderBy = sorting
}
renderObj = COA
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = header
wrap = <td>|</td>
}
20 = TEXT
20 {
field = bodytext
wrap = <td>|</td>
}
}
}
}
20 = TEXT
20.value = </table>
}
If someone could help me out here it would be much appreciated.
Thanks in advance.
Check if you have any 'template parser' running.
go to template -> choose 'Info/modify' and click on 'edit the whole ...'
There choose the includes tab and include css_styled_content' (Yes, there is another way of parsing your content, with fluid_styled_content'. you can choose that instead if you are on TYPO3 7.6.* or higher)
These 'parsers' will give you all the needed typoscript included to parse and render your content. Without these, nothing will be rendered when you want to render content from the backend.
second: your typoscript is wrong
You have made a content array (lib.content is a Content Object Array) and filled it with content. But you overwrite the content with key 20.
change
20 = TEXT
20.value = </table>
to
30 = TEXT
30.value = </table>
third: you have created a Page object but you did not add your COA into that page object.
Try this:
page = PAGE
page.10 < lib.object
What this does is include your lib.content in the Page Object at 'level' 10
you can also do
page.20 = TEXT
page.20.value = hello world
This will be rendered after your lib.content.
As you could notice. It is a bit as writing a big Array (because typoscript is a big Array ;)
Beware that you place your lib.content ABOVE the page object declaration. else it will not be able to include it.
There is also a slack channel for TYPO3 you can join if you have other questions. People over there are more then willing to help you.
https://forger.typo3.org/slack
I have a Template in TYPO3 that i want to use to some pages, in here i have a DIV.
Is it possible depending on the page UID, to changes the DIV ID. its the only div thats changes content/image, and im looking to put this DIV inside my main.html template.
so if
UID = 2 <div id="topbanner_about"></div>
UID = 3 <div id="topbanner_drills"></div>
and so on....
Can i do this, and can i do it in TS (Typo Script) or how can i do this, so i dont need to make 5 templates.
You can do this by inserting a marker in your template. It would look somehow like this:
In the template:
[...]
<div id="topbanner_###ID_SUFFIX###"></div>
[...]
In the TypoScript, where the template is inserted:
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/main.html
marks {
ID_SUFFIX = TEXT
ID_SUFFIX {
insertData = 1
# This makes sure that the output is valid and prevents XSS attacks
htmlSpecialChars = 1
value = {page:uid} # Use this to insert the page ID or
value = {page:subtitle} # Use to insert subtitle of page
... # Same works for other fields of the page record.
}
}
}
If the fields provided by default pages are not enough, you could add another field to the page records. The best way to do that would be to build an extension that does it.
I found a better solution, if i use ressource and add an image and on the next page do the same just with another images, then in my main TS i add this code.
lib.imageElement = FILES
lib.imageElement {
references {
data = levelmedia:-1,slide
listNum = 0
}
renderObj = COA
renderObj {
10 = IMAGE
10 {
file.import.data = file:current:originalUid
altText.data = file:current:title
}
}
}
It do the trick, then it shows a diffrent image in the top/header on every page.
But thx...
I answered my own question, sorry!
I started with this:
If Request("currentPage") <> "" AND isNumeric(Request("currentPage")) Then
currentPage = Request("currentPage")
Else
currentPage = 1
End If
And then on my paging links, I added:
.asp?currentPage="¤tPage+1&"
///////////////////////////////////////////////////////////////////
I have upgraded my search script to use LIMIT paging.
I am simply trying to work out what the current page is, based on the 'offset' value but I'm having some amateur troubles.
This is what I have:
currentPage = pageRange / rpp
' page range is the offset value for the LIMIT clause, for example 0, 20, 40...
' rpp is results per page value, for example 20...
If cInt(currentPage) <= 0 Then
currentPage = 1
End If
But page 1 and 2 both show "page 1", page 3 shows "page 2", page 4 shows "page 3" and so on. Obviously there is something wrong with this calculation but I cannot see it.
Any ideas?
May be better to keep track on page num and evaluate offset from it, than tracking offset? Or at least evaluate currentPage as cInt(pageRange / rpp)+1
I'd like to integrate a pagination in photo gallery project.
Ex: << previous 1 2 3 next >>
Let's say I have 13 photos and want to display on each page first 6 photos. So in total, I must have 3 pages of 6 photos each and each page number is clickable to display the maximum of 6 photos...
How would I proceed the right method?
Here's what I though:
var totalPhotos:uint;
var maxNumberThumbPerPage:uint = 6;
var totalPage:uint;
totalPhotos = tabPhoto.length;
totalPage = Math.ceil(totalPhotos/maxNumberThumbPerPage);
create a function that goes something like this
var imagesArray:Array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
function createPage($pageNum:int, $perPage:int = 6):Array{ // though vector is preferred
// imagesArray - the array holdig all the images
var iStart:int = $pageNum * $perPage;
var iEnd:int = ($pageNum + 1) * $perPage;
if (iEnd > imagesArray.length) { iEnd = imagesArray.length}
return imagesArray.slice(iStart, iEnd);
}
trace( createPage(0));
trace( createPage(1));
trace( createPage(2));
this will get you the content of each page, this is one of the trickier parts, but as you can see still pretty simple.
other part would be to create the navigation and create the rendering part