1. Home
  2. Blog
  3. Showcase
  4. Contact
Blogitems
22Dec

Create page teasers using just TypoScript

Posted on December 22nd 2010 at 12:00 inside TypoScript with 2 comments

Sometimes I wonder how far you can actually go in using just TypoScript to achieve your technical challenges. Today I will show how you create a simple page teaser with multilingual support by just using some TypoScript.

A simple page teaser, fully powered by TypoScript 

  1. #A
  2. temp.pageTeasers = CONTENT
  3. temp.pageTeasers {
  4.   table = pages
  5.   pidInList = this
  6.   orderBy = sorting ASC
  7.  
  8.   #B
  9.   renderObj = COA
  10.   renderObj {
  11.     10 = COA
  12.     10 {
  13.       10 = TEXT
  14.       10.typolink.parameter.field = uid
  15.      }
  16.     10.stdWrap.stripHtml = 1
  17.     10.stdWrap.outerWrap = <h3>|</h3>
  18.    
  19.     #C
  20.     20 = CONTENT
  21.     20 {
  22.       table = tt_content
  23.       select {
  24.         pidInList.field = uid
  25.         andWhere.wrap = bodytext != '' AND deleted != 1 sys_language_uid=|
  26.         andWhere.data = TSFE:sys_language_uid
  27.         andWhere.intval = 1
  28.         orderBy = sorting ASC
  29.         max = 1
  30.       }
  31.      
  32.       #D
  33.       renderObj = COA
  34.       renderObj {
  35.         10 = HTML
  36.         10.value {
  37.           field = bodytext
  38.           cropHTML = 150|...
  39.           parseFunc < lib.parseFunc_RTE
  40.         }
  41.       }
  42.     }
  43.    
  44.     #E
  45.     15 = IMAGE
  46.     15 {
  47.       file {      
  48.         import = uploads/media/
  49.         import.field = media
  50.         import.listNum = last
  51.         height = 75c
  52.         width = 100c
  53.       }
  54.     }
  55.    
  56.     #F
  57.     30 = TEXT
  58.     30 {
  59.       value = More information
  60.       lang {
  61.         de = Mehr Information
  62.         fr = Plus d'informations
  63.         nl = Meer informatie
  64.         es = Más información
  65.         it = Maggiori informazioni
  66.       }
  67.       typolink {
  68.         parameter.field = uid
  69.         additionalParams.dataWrap = &L={TSFE:sys_language_uid}
  70.       }
  71.       outerWrap = <span class="more-info">|</span>
  72.   }
  73.   wrap = <div class="my-typoscript-page-teasers">|</div>
  74. }
#A
temp.pageTeasers = CONTENT
temp.pageTeasers {
  table = pages
  pidInList = this
  orderBy = sorting ASC

  #B
  renderObj = COA
  renderObj {
    10 = COA
    10 {
      10 = TEXT
      10.typolink.parameter.field = uid
     }
    10.stdWrap.stripHtml = 1
    10.stdWrap.outerWrap = <h3>|</h3>

    #C
    20 = CONTENT
    20 {
      table = tt_content
      select {
        pidInList.field = uid
        andWhere.wrap = bodytext != '' AND deleted != 1 sys_language_uid=|
        andWhere.data = TSFE:sys_language_uid
        andWhere.intval = 1
        orderBy = sorting ASC
        max = 1
      }

      #D
      renderObj = COA
      renderObj {
        10 = HTML
        10.value {
          field = bodytext
          cropHTML = 150|...
          parseFunc < lib.parseFunc_RTE
        }
      }
    }

    #E
    15 = IMAGE
    15 {
      file {
        import = uploads/media/
        import.field = media
        import.listNum = last
        height = 75c
        width = 100c
      }
    }

    #F
    30 = TEXT
    30 {
      value = More information
      lang {
        de = Mehr Information
        fr = Plus d'informations
        nl = Meer informatie
        es = Más información
        it = Maggiori informazioni
      }
      typolink {
        parameter.field = uid
        additionalParams.dataWrap = &L={TSFE:sys_language_uid}
      }
      outerWrap = <span class="more-info">|</span>
  }
  wrap = <div class="my-typoscript-page-teasers">|</div>
}

The explanation

To make it easier, I've added some comments (marked as #A, #B etc) to show what goes on where.

#A: We start with creating a CONTENT object, which we will fill with all the subpages of the current page. 

#B: Inside the renderObj we will define what is displayed: where, when and how.

#C: The COA inside the renderObj is used in a clever way to get the translated page titile. This is explained in my previous post.

#D: Our next CONTENT object will be used to display the first content element (that has a bodytext) from the current supage, on the default column. We use lib.parseFunc_RTE in order to display RTE text properly. And as you see I have cropped the text down to 150 characters with the cropHtml function, so we won't break any HTML tags.

#E: To add a little fun to the teaser, I will now add an image as well. Which I will grab from the media field on the last page. Since on the page where I used this, the header image is stored in the media field of the subpage as well. So I used listNum = last in order to get the last image as preview for the page.

#F: And finally, to give an extra demonstration of the multilingual capabilities, I will display a 'read more' link in the appropriate language.

Tags

typoscript page teasers snippet

Comments (2)

Your comment