Day 7: ImageMagick, Navigation, lots and lots of TypoScript

Day 7: smooth sailing with "Praxiswissen Typo3"

It was really bugging me today that the dynamic graphical part of the project wasn't working. I rechecked the code and found, first of all, that some of my code was nested falsely.  After fixing that, it still didn't work, so I read through the chapter again and figured that my problems must be with ImageMagick: namely, the mask underneath the image, "nicetext", and image inheritance from the root page as defined by TypoScript IMAGE object properties were not working.

I checked out which version of ImageMagick is installed on my computer by typing on the command line:

identify -version

According to the output, I have ImageMagick version 6.7.7-10.  After some more googling (for "ImageMagick nicetext") I found the perfect solution. Pretty much, ImageMagick will only function on the root server with a certain Typo3 configuration:

[GFX][gdlib] = 1
[GFX][gdlib_png] = 1
[GFX][im] = 1
[GFX][im_version_5] = im6
[GFX][im_negate_mask] = 1
[GFX][im_imvMaskState] = 1
[GFX][im_no_effects] = 1
[GFX][im_v5effects] = 0
[GFX][im_mask_temp_ext_gif] = 1

Especially important is the configuration "[GFX][gdlib_png] = 1". I called up the Typo3 install tool in the browser, logged on, and under "All Configuration" searched for these values to see how they were set. Lo and behold, in my configuration, [GFX][gdlib_png] was set to 0.  I changed this and refreshed my Typo3 project and voilá - it is now working as it should.

On to creating the navigation menus, dynamically of course!

Something I've discovered today is that, in order for the menus to be shown, the "helper sites" I created yesterday need to be set to VISIBLE, not, as I interpreted from the tutorial, have the visibility deactivated.

In order to create my first menu - the single-layer, overhead text menu - I had to 1) specify an object of type HMENU, 2) set the properties of this new menu object so that it is a "directory" or classical menu, 3) set the root of this "directory" to the page ID of the root page and 4) specify that the first (and only) layer of the menu is a text menu with "normal" state activated.  The TypoScript code to do this is as follows, and is inserted within the "marks" section of the TypoScript:

marks {
...

#upper text-menu
  MENU_OBEN = HMENU
  MENU_OBEN {
         
#directory, or classic menu
    special = directory
       
#page-id of the menu root      
    special.value = 2

#this menu has only one level, which is a text-menu, with normal (NO) state activated    
    1 = TMENU
    1 {
      NO = 1
      NO.linkWrap = |
    }
  }
...
}

The pipe symbol | stands for dynamic content that can be, if desired, "wrapped" within html code, such as bold tags, or an empty space. To seperate individual links with an empty space, write in the place of "NO.linkWrap = |" the following line of code:

NO.linkWrap =  |

For bolded content, write:

NO.linkWrap = <b>|</b>

In order, however, to use a stylesheet on the generated menu links, use the property "ATagParams" on the "normal" property of the textmenu, for example:

NO.ATagParams = class="left_white"

Building up the left-hand side graphical menu requires a bit more code in order to dynamically generate the text as images and to have a normal, rollover, and active state for each link. My TypoScript works for the normal and active states of the generated links, but rolling over the links with the mouse in the browser has no effect. When I look at the HTML source code, I see that on "onMouseover", the same image is being called as on "onMouseout". After a lot of googling, I'm not any further. Testing in Firefox gives the same results, so it's not necessarily related to the browser.

Here's the code for generating a graphical menu. It differs only slightly from the code for a text menu, in that the object GMENU (graphical menu) is used in place of TMENU (text menu) and that within the "1" section, there are also definitions for the rollover (RO) and active (ACT) states of the links.  This menu, too, is placed within the "marks" code section.

marks {
...
  MENU_LINKS = HMENU
  MENU_LINKS {
    special = directory
    special.value = 3  
    1 = GMENU  
    1 {
#describe normal state        
      NO = 1
...
#define rollover (RO) state
#copy normal (NO) properties
      RO < .NO
#redfine the properties for rollover only where they differ from the normal (NO)
...

#define active (ACT) state
      ACT < .RO
    }
  }
...
}

On to developing a second level for the graphical navigation. This requires the setting of a second GMENU and its properties, along with the descriptions for its normal (NO), rollover (RO) and active (ACT) states. It's possible to do this in TypoScript without redundant typing with the following line of code

2 < .1

which means: "2", or the second level, is also a GMENU object whose properties are exactly the same as the "1" GMENU object.  We are then free to overwrite only the properties that differ from those of GMENU object "1":

2.NO {
  XY = 230,25
       
#white background
  5 = BOX
  5 {
    color = white
    dimensions = 10,0,200,25
   }
         
#change text styles        
   10 {
#set text styles (case) back to nothing
     text.case >
     fontSize = 12
     offset = 20,16
   }
}
       
#rollover and active state
2.RO < .2.NO
2.RO.10.fontColor = #a90329
       
#active (ACT) state for level two in the same as the rollover (RO) state      
2.ACT < .2.RO
     
       
For setting up a breadcrumb trail, the process is similar, since it is also a type of menu. In order to differentiate between the breadcrumb-style and classic-style of menus, however, we need to set the "special" property to "rootline" instead of "directory". Here's the basic code which, you can see, is similar to the syntax for the overhead text-menu:

KLICKPFAD = HMENU
KLICKPFAD {
  special = rootline
  1 = TMENU
  1 {
    NO = 1
...
  }
}

Blend the VISIBLE helper-pages out of the breadcrumb trail with a line of TypoScript which specifies from which level the page navigation should begin and where it should end:

special.range = 2|-1

Start at level 2, since the root helper page is at level 0 and the two helper pages for template inheritance can be found at level 1. "-1" ("forever") indicates that all remaining levels can be shown.

Changing the object type of "KLICKPFAD" from HMENU to COA (content object array) makes it additionally possible to set up a sequential list of multiple object types (like TEXT, IMAGE and, yes, HMENU) and their properties, instead of being limited to only the properties assignable to HMENU. This lends an enormous flexibility to scripting the display of a Typo3 site. Here's an example of that.

#create breadcrumb menu as content object array
KLICKPFAD = COA
KLICKPFAD {

#in first position, we want to see some text
  10 = TEXT
  10.value = You are here:&nbsp;
       
#in second position, we want a text menu
  20 = HMENU
  20 {
    special = rootline
    special.range = 2|-1
         
    1 = TMENU
    1 {
      NO = 1
...
    }
  }
}

These blog entries are getting longer (and more professional from a programming standpoint. Less so, from a literary one). I still have a few hours to go on with the tutorial, but I will continue with that tomorrow: chapter 8 of @Robert Meyer's "Praxiswissen Typo3" - "Content".