i use for a project the fluid template engine. Here i want to seperate all Headline-Elements from the Backend (column normal).
My Idea is, to write in my TS the following code:
lib.pageHeadline = USER
lib.pageHeadline{
[...]
}
And in the page object the following code
10 = FLUIDTEMPLATE
10{
[...]
variables{
[...]
pageHeadline < lib.pageHeadline
}
}
The problem is to become only the headline. I hope my problem is understandable.
Ok ... it's easy.
Here my solution, to render Headlines seperate from the content for Fluid-Templates.
temp.pageHeadline = CONTENT
temp.pageHeadline{
table = tt_content
select{
pidInList = this
where = colPos = 0
}
renderObj = TEXT
renderObj.field = header
}
pageHeadline < temp.pageHeadline
This is all.
Related
With the extension "Mask" I've added some fields in Page Templates to assign Icons to pages. Also you can use a checkbox to activate the selected icon in menus. Menu meaning this case: I've also made a Content Element with Mask where you only enter a UID and all subpages of that UID will be created as <li> list.
I've set up the following fields in Page Templates:
page_01_icon (String): will contain something like "icon-home"
page_02_color (String): this will be the color of the icon or the background-color for the list element; depends on `page_color_background`, valid values are any css hex colors like "#a5011c"
page_02_color_text (String): if set, the text color will be changed to this
page_03_menu (Checkbox): checked == `page_icon` will be shown; else only the title of the page
page_04_icon_only_menu (Checkbox): checked == only icon will be shown, title not (not needed for my question, I use this only in the main menu)
page_05_color_background (Checkbox): if checked `page_color` is used as background color for this list element, if not the icon will get the colored with `page_color`; if `page_color` is not set at all neither icon or the background will get an color
I am very new to Typo3, but I actually get the above code work with the normal header menu on my page. It was a hard way there but that part works. For the header menu I could do it in FLUID, but this is now a lib and I need to do the same here but with TypoScript - no matter what I try I coudn't get it right. Most examples and how-tos rely on "if uid = 1..25" do something else. But I need multiple if elses for this. I think how I've done in FLUID is the right way, now trying to get the same logic to TypoScript... and ended up here.
Page Template Fields in Mask
This is how I added the fields in Mask
Content-Fields
Pages -> Edit -> Content-Fields (of Mask-Fields)
Main Menu Bar
This is what I've done with FLUID (the main menu bar). Icon-only + Icon and Title + Title only.
Spoken in simple PHP logic I would do the following (just to explain the main thinking / way I try in TypoScript):
// dont need to check if page_01_icon is set: field is required
// dont need to check if page_03_menu is checked: icons in this typo3 lib will always be displayed
// just assume that $title holds the title and $url the url to that page
foreach(....) {
// save html/css code in var for text color if a color is set
if(isset($page_02_color_text)) {
$textColorHTML = ' style="color' . $page_02_color_text . '"';
} else {
$textColorHTML = '';
}
// save html/css code in background of <li> if background-checkbox is checked and a color is set
if ($page_05_color_background == 1 && isset(page_02_color)) {
$liBackgroundHTML = ' style="background-color:' . $page_05_color_background . '"';
} else {
$liBackgroundHTML = '';
}
echo '<li' . $liBackgroundHTML . '></i> ' . $title . </li>';
}
Basicly thats what I tryied to try in TypoScript :)
What I "have":
A Mask template-file with the following content:
<f:cObject typoscriptObjectPath="lib.linkListAuto" data="{data}" />
The lib.linkListAuto-file:
This is the default version without the php logic from above. here I need to "translate" the php logic into.. I couldn't even post a half way woring script cuz everything I#ve tried ended as the wrong way :/
lib.linkListAuto = COA
lib.linkListAuto {
1 = HMENU
1 {
special = directory
special.value.field = tx_mask_link_root_id
wrap = <ul class="list-group">|</ul>
stdWrap.if.isTrue.data = register:count_menuItems
1 = TMENU
1 {
NO = 1
NO {
allWrap = <li class="list-group-item">|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = description // subtitle // title
}
}
}
}
How can I say in TypoScript "render this way every link (sub-page) that comes",
but if a color ist set and the checkbox for use_color_as_background ist checked: change the rendering for this entry and give the <li> a background-color
also change the text color if it is set
and finaly add the icon in front of the page-title
?
Please help with ideas that dont come up with "if uid equals X"-examples. Had enough of them, they work, yes, but I cant change them to what I am trying to do.
You need to understand the concept of TypoScript.
So the name may be misleading. TypoScript is not a scripting language but a configuration language. So you can't use the concept of a sequential computation.
In this way you configure your rendering.
Anyway you can add some logic to the rendering in the form of the .stdWrap.if function which can control whether a value is printed in the output.
The other important functionality is string concatenation: in TypoScript you can use COAs (Content Object Array) to build up a string where you decide for each array element how it is displayed.
For building up the string <li' . $liBackgroundHTML . '></i> ' . $title . </li> you might use something like:
temp.li_tag = COA
temp.li_tag {
10 = TEXT
10.value = <li
// if ($page_05_color_background == 1 && isset(page_02_color)) {
// $liBackgroundHTML = ' style="background-color:' . $page_05_color_background . '"';
// } else {
// $liBackgroundHTML = '';
// }
20 = TEXT
20.field = page_05_color_background
20.noTrimWrap = | style="background-color:|"|
20.if.isTrue.field = page_02_color
30 = TEXT
30.value = ><a href="
40 = TEXT
40.field = title
40.dataWrap = <i class="{field.page_01_icon}"></i> |
40.stdWrap.typolink {
parameter.field = uid
// if(isset($page_02_color_text)) {
// $textColorHTML = ' style="color' . $page_02_color_text . '"';
// } else {
// $textColorHTML = '';
// }
ATagParams.cObject = TEXT
ATagParams.cObject {
field = page_02_color_text
wrap = style="color|"
if.isTrue.field = page_02_color_text
}
}
50 = TEXT
50.value = </li>
}
I'd like to have a gallery just with one set of pictures in one size. This pictures would rendered in a specific size on the page and if I click on an image, a lightbox gallery with the picture in original size opens.
The part with the smaller pictures is already done with this TypoScript code:
tt_content.image.20.1.file.maxH = 177
tt_content.image.20.1.file.maxW = 267
now I'd like to automatic wrap all images on a page in an a-tag, reference on themself and add a class and rel attribute.
Is that possible?
I read something about imageLinkWrap and tried a tutorial but it doesn't work. It was this code:
tt_content.image.20.1.imageLinkWrap {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams {
dataWrap = class = "lightbox" rel="lightbox{field:uid}"
}
}
Shouldn't it wrap the image with an a-tag with class and rel params?
EDIT: one Problem solved.
I forgot to overwrite the imageLinkWrap with
tt_content.image.20.1.imageLinkWrap >
and to enable it with
tt_content.image.20.1.imageLinkWrap.enable=1
I got a problem with the widths of the advanceddatagrid-columns.
First of all, my layout is a HDividedBox, on the left there is the navigation, on the right there is a module, containing the advanceddatagrid.
left Side: navigation
right side: module (e.g. advanceddatagrid)
Most of the columns got a fixed width, some a minWidth. Now, initially the widths of the columns are correct.
So the problem is, whenever I load a new module and later reload the advanceddatagrid, the initial width of the columns is way different, although I change nothing in the process of loading the module. Neither the fixed widths nor the minWidths are initially correct.
I recently saw there is a solution for wrong widths of colums, it looks like that:
var oldPolicy:String = advanceddatagrid.myScrollPolicy;
advanceddatagrid.myScrollPolicy = ScrollPolicy.ON;
for(var i:int = 0; i < advanceddatagrid.columns.length; i++) {
var column:AdvancedDataGridColumn = advanceddatagrid.columns[i] as AdvancedDataGridColumn;
advanceddatagrid.column.width = column.width;
}
advanceddatagrid.validateNow();
advanceddatagrid.myScrollPolicy = oldPolicy;
advanceddatagrid.validateNow();
On the whole this is just a temporary change of the ScrollPolicy, re-setting the column-widths and then changing back. But still, it doenst work.
Does anyone have a clue?
Some relevant references that might help (the first one worked for me):
http://userflex.wordpress.com/2011/04/14/force-resize-datagrid/
http://forums.adobe.com/message/4285461
To summarize the first post (credit goes to Nick Schneble):
public function resizeColumns () : void
{
grid.validateNow ();
// forces the columns to size themselves properly
for each (var column : AdvancedDataGridColumn in grid.columns)
{
column.width = column.width;
}
}
It may seem a bit ridiculous, but if you execute this method whenever the underlying data in your data grid changes, you’ll have beautifully laid out columns.
Basically, I (think I ) need to know how to assign borderContent to a cObject, when it is a typolink parameter.
To tell the whole story: I'm using perfect lightbox, and I want it to open the lightbox when a text is clicked, and display the images that are in a single content element in the border section.
Looking through the manual, i found this code:
page.20 = TEXT
page.20.value = Open an image in a lightbox
page.20.typolink {
title = This is my caption
parameter.cObject = IMG_RESOURCE
parameter.cObject = fileadmin/image2.jpg
parameter.cObject.file.maxW = 600
parameter.cObject.file.maxH = 600
ATagParams = rel="lightbox[mySet]"
}
which is working fine. But I don't want the path to be hard set, but the content to be loaded from the border section, as I said. But if I try the following:
page.20 = TEXT
page.20.value = Open an image in a lightbox
page.20.typolink {
title = This is my caption
parameter.cObject = IMG_RESOURCE
parameter.cObject < styles.content.getBorder
parameter.cObject.file.maxW = 600
parameter.cObject.file.maxH = 600
ATagParams = rel="lightbox[mySet]"
}
the link is gone.
So I GUESS I'm assigning the content wrong. Somebody knows the answer?
Thanks!
(If of any help, I use automaketemplate..)
Assigning styles.content.getBorder will just assign the full content elements from the border column. This will not get you anywhere.
You will need to manually load the content elements from the border column, of course this can be done with TypoScript. It should be something like this:
page.20 = TEXT
page.20 {
value = Open an image in a lightbox
typolink {
ATagParams = rel="lightbox[mySet]"
title = This will be the title attribute
parameter.cObject = CONTENT
parameter.cObject {
table = tt_content
select {
pidInList = this
where = colPos = 3
}
renderObj = IMG_RESOURCE
renderObj.file {
import = uploads/pics
import.field = image
import.listNum = 0
width = 600
height = 600
}
}
}
}
Basically this will load all content elements on the border position from the current page. Render the first image in the list of images and return you the resource.
I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.