Follow Sebastiaan de Jonge on Twitter
Sebastiaan de Jonge
  1. path:/ Sebastiaan de Jonge
  2. arrow Blog
  3. arrow posts
  4. arrow Create page teasers using just TypoScript

Blog

22Dec

Create page teasers using just TypoScript

Posted on December 22, 2010 in TypoScript by Sebastiaan de Jonge

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: typoscriptpage teaserssnippet

Comments (2)

  1. Gravatar: AndreyAndreyon March 6, 2012
    at 19:43    Reply to this comment

    Bodytext

    Hi! Thank you for this script, but i have a problem - 'bodytext' isn't working... All teasers has title and Read More link, but no bodytext....

  2. Gravatar: Sebastiaan de JongeSebastiaan de Jongeon May 3, 2012
    at 09:22

    RE: Bodytext

    Hi Andrey,

    Sorry for the late reply here :)

    This function fetches the first content element found on the page. You might have to apply a more specific filter on the #C section to get the content you want.

    Cheers,
    Sebastiaan

Got something to say?

 
Notify me when someone adds another comment to this post
 

Search

Categories

Tags

Archive

Blogroll

Syndicate