[TYPO3-seminars] Using TypoScript for a graphical seminar representation

[Nico Deblauwe]

Hello everyone,

 

I’ve been playing around a bit with typoscript (I’m still trying to figure out how it works). My latest exercise could come handy for some of you – so I’ll gladly share the code. 

 

I use it to show a visual overview of the seminars on a page; but you could as well use it in a side-bar or column or header as a promotion tool (e.g. by randomizing the selection).

 

--cut--

lib.seminarsTeaser = COA_INT
lib.seminarsTeaser {
  # Create the object that will fetch the list
  10 = CONTENT
  10 {
    # First fetch all the relevant seminars records
    table = tx_seminars_seminars
    select{
      # stored in thise folders
      pidInList = 78, 100, 98, 79, 99
      # only one-time events AND event-topics should be taken into account
      where = (object_type = 1) OR (object_type = 0)
    }
    
    renderObj = COA
    renderObj {
      # for each of these records, build an image      
      10 = IMAGE
      10.file = GIFBUILDER
      10.file {
        # The image size
        XY = 270,270
        
        # Bottom layer: the image that is linked to the seminar
        10 = IMAGE
        10 {
          offset = 0,0
          file {
            # This is where the seminars extension stores it's images (hardcoded)
            import = uploads/tx_seminars/
            # In the "image" field you find the name of the image
            import.data = field:image
            import.override.field = image
            
            # Same size as the resulting image; I prefer c(rop) as method for doing this
            width = 270c
            height = 270c
            
            # Set the quality of the image

            ext = jpg
            quality = 100
          }
        }
        
        # second layer: a box for the background of the text
        20 = BOX
        20 {
          # Offset left, Offset bottom, Width, Height
          dimensions = 0,0,270,50
          # Start at left bottom
          align = l,b
          # Color of the box
          color = #00a1cf          
          # Opacity of the box
          opacity = 85
        }
        
        # Third layer: get the seminars title and write it in the background box
        30 = TEXT
        30 {
          text.data = field:title
          text.case = upper
          align = left
          offset = 5,245
          niceText = 0
          fontSize = 20
          fontFile = t3lib/fonts/verdana.ttf
          fontColor = #e0f2f8
        }
        
        # Fourth layer: use the "teaser" field of a seminar as a "subtitle" 
        40 = TEXT
        40 {
           text.data = field:teaser
           align = left
           offset = 5,262
           niceText = 0
           fontSize = 13
           fontFile = t3lib/fonts/verdana.ttf
           fontColor = #ffffff
         }
      }  
      
      # Make sure that the freshly built image contains a hyperlink
      10.stdWrap.typolink {
        # Link to the page with the "detailed view"
        parameter = 83
        parameter.dataWrap=|
        # Make sure that the selected seminar is also passed on
        additionalParams.insertData=1
        additionalParams = &tx_seminars_pi1[showUid]={field:uid}  
      }
      
      # And finally, wrap it all up in a class - used for positioning the boxes
      10.wrap = <div class="imageWrapper">|</div>    

    }
}

--cut--

 

Of course: I’m still a novice in typoscript: so all kinds of comments are welcome!

 

Regards,

 

Nico

 

--

Nico Deblauwe ▪  <mailto:nico at deblauwe.be> nico at deblauwe.be ▪ 0486 84 08 93