TYPO3: 5 things about tt_news


The tt_news extension is the most popular extension of TYPO3. No wonder, since it’s very flexible and can be used for much more than just handling newsitems. In this post I’ll show you 5 things about tt_news which might be nice to know about tt_news.

1) A better pagebrowser

By default, the tt_news pagebrowser is not very nice. Nor can it be easily styled. Inside tt_news there’s a ‘hidden’ pagebrowser which is better, and much more flexible. To activate this better pagebrowser put the following into your template Setup section:

#-----------------------------------
# A better tt_news pagebrowser
#-----------------------------------

plugin.tt_news {
  usePiBasePagebrowser = 1     # This activates the better pagebrowser
  pageBrowser {                # Here you can configure the better pagebrowser
    maxPages = 7                  # Maximum browserpage links
    showResultCount = 1           # Display the sentence: ** till ** out of ** messages
    showRange = 1                 # Will look like "Items: 1-5 6-10" instead of "Page 1 2 3 4"
    showPBrowserText = 0          # Prepends "1 2 3" like "page 1 page 2 page 3", only when showRange = 0
    dontLinkActivePage = 1        # No need to link the active page
    showFirstLast = 0             # Show a first / last link, 0 since there already is a previous / next link.
  }
}

#-----------------------------------
# Locallang for the tt_news pagebrowser
#-----------------------------------

plugin.tt_news {
  _LOCAL_LANG.default {
    pi_list_browseresults_displays = Newsitem ###FROM### till ###TO### out of ###OUT_OF### newsitems.
    pi_list_browseresults_first = First page
    pi_list_browseresults_last = Last page
    pi_list_browseresults_page = Page
    pi_list_browseresults_prev = < Previous
    pi_list_browseresults_next = Next >
  }
}

2) Do not display duplicate items

If you have more than one tt_news plugin on your page, this can be nice. For example: The first plugin only shows the last newsitem, the second plugin the 5 most recent newsitems. The most recent newsitem is now shown by both the plugins. You can tell tt_news to only show newsitems once. This only works for List mode plugins. Put the following lines into your template Setup section:

#-----------------------------------
# Only show newsitems once per page.
#-----------------------------------

plugin.tt_news {
  excludeAlreadyDisplayedNews = 1
}

If “excludeAlreadyDisplayedNews” is enabled “excludeLatestFromList” and “listStartId” will be ignored. This is no problem, since both these fields are deprecated. Be aware this might break your archive links.

3) Generate a tt_news image automatically when no image is available

If your template design forces you to upload a photo with every newsitem, this can be helpful. The following code will generate a “No image” image using GIFBUILDER. Put this code in your template Setup section:

#-----------------------------------
# Generate a tt_news image automatically when no image is available.
# In this snippet: Latest mode
#-----------------------------------

plugin.tt_news.displayLatest.image.noImage_stdWrap {
  cObject = IMAGE
  cObject {
    # Wrap the image with a div tag
    wrap = <div>|</div>
    # Use GIFBUILDER to create an image
    file = GIFBUILDER
    file {
      # Define the width and height of the image.
      XY = 125,125
      # Define the background color of the image.
      backColor = #FFFFFF

      # First object in the image: TEXT
      10 = TEXT
      10 {
        # The actual text which is displayed in the image
        text = No image available
        # The fontsize
        fontSize = 16
        # niceText to make the text more natural. This can be good or bad depending on your server configuration.
        niceText = 1
        # Color of the text
        fontColor = #000000
        # Coordinates where your text should appear in the image. Width / Height
        offset = 125/2-32,125/2+4
      }
    }
  }
}

4) Load tt_news without cache; for example random news.

If you want to display newsrecords random, set the viewmode to LIST or LATEST and set the ’order by’ field to ‘randomise order’. The tricky part here is that your plugin shouldn’t be cached, since that would destroy the whole random idea. Ofcourse you can set the whole page to ‘no cache’ but this would kill your performance. Better is to just tell tt_news to use no cache. It will still cost you some performance but, it’s better than not caching the whole page. To setup tt_news without cache put the following code  into your template Setup section:

#-----------------------------------
# Run tt_news without cache, remember to unset in deeper levels!
#-----------------------------------

plugin.tt_news = USER_INT

This will load the tt_news plugin as a USER_INT object and render it without cache, outside of the main pagerendering. This way your page will be called from cache but the plugin will be non-cached. Just be sure to un-set this rendering on a deeper pagelevel since TypoScript is inherited from levels above.

5) Perfectly square tt_news images.

By default tt_news allows you to set the maximum width and height for an image in LIST or LATEST mode. Width and height are adjusted automatically when one exceeds the other. But what if you want a perfectly square image no matter what photo is being uploaded? CSS seems to be the only way to do this but there’s a solution which is better..

Ever noticed TYPO3 is able to crop images as soon as resizing isn’t posible anymore? An example: we have an image of 400 x 300 pixels, we want a picture of 30 x 30. What it does is it resizes the image to 40 x 30 pixels and than crops the width to 30 pixels. But that’s TYPO3.. not tt_news.

To enable this for tt_news you need to put the following code into your tempate Setup section:

#-----------------------------------
# Generate a perfectly square tt_news image.
# In this snippet: Latest mode
#-----------------------------------

plugin.tt_news {
    # This only affects the LATEST mode, to use LIST mode change to 'displayList'
    displayLatest {
        # Unset the default tt_news maximum width and height parameter
        image.file.maxW >
        image.file.maxH >
        # Call the TYPO3 way to render images, setting it to 90 pixels; cropping mode (c)
        image.file.width  = 90c
        image.file.height = 90c
        # Make the images SEO, using the caption as Alt tag.
        image.altText.field = imagecaption
    }
}

Now, the image will be resized untill the given width or height is reached and than be cropped. Width and height are always in pixels so there is no need to append ‘px’. The ‘c’ tells TYPO3 to crop the image.


Did you find this article useful? Please make a small donation!

Bookmark and Share

Leave a Reply