Onces finish, it will look like this:

Step 0: We’ll start with creating a simple news record:

We’re also going to need a background image for the final gifbuilder image, so we add that too.

Save the news record once your done.

Our news list will contain nothing more than just the image, since the title and subheader will be printed in there*. This means the tt_news template will look like this:

<!-- ###TEMPLATE_LIST### begin -->
  <div class="news-latest-container">
    <!-- ###CONTENT### begin -->
      <!-- ###NEWS### begin -->
        <div class="news-latest-item">
          ###NEWS_IMAGE###
        </div>
      <!-- ###NEWS### end-->
    <!-- ###CONTENT###  end -->
  </div>
<!-- ###TEMPLATE_LIST### end -->

We now have a basic news list view with nothing more than the tt_news image:

So how to transform this image into a dynamic image with title and subtitle?

Step 1: Creating a TypoScript template

Create a TypoScript template at the same page your news-list is located. We tell TYPO3 to clear all current configuration regarding the news-list image:

plugin.tt_news {
  displayList {
    # Remove all configuration
    image >
  }
}

We just removed all earlier configuration, which means we can start from the beginning.

Step 2: Import the tt_news image

Import the image we want to use as a background, from the tt_news record by inserting the following TypoScript

plugin.tt_news {
  displayList {
    # Remove all configuration  
    image >

    # Create a new image
    image {
      stdWrap.cObject = IMAGE
      stdWrap.cObject.file = GIFBUILDER
      stdWrap.cObject.file {
        # Width and height of the image
        XY = 517,177

        # First object: Our background image
        10 = IMAGE
        10 {
          offset = 0,0
          file {
            # Import the image from the tt_news record
            import = uploads/pics/
            import.data = field:image
            import.listNum = 0
            import.override.field = image

            # Determine the width and height (crop)
            width = 517c
            height = 177c

            # Set the quality of the image
            ext = jpg
            quality = 100
          }
        }
      }
    } 
  }       
}

Save the TypoScript template, and have a look at the frontend. You now have:

Step 3: Add the transparent box in which the title should be displayed

We need to create another object within our TypoScript setup, to display the transparent box:

plugin.tt_news {
  displayList {
    # Remove all configuration
    image >

    # Create a new image
    image {
      stdWrap.cObject = IMAGE
      stdWrap.cObject.file = GIFBUILDER
      stdWrap.cObject.file {
        # Width and height of the image
        XY = 517,177

        10 = IMAGE
        [.........]

        20 = BOX
        20 {
          # Offset left, Offset bottom, Width, Height
          dimensions = 10,-10,280,70
          # Start at left bottom
          align = l,b
          # Color of the box
	  color = white
          # Opacity of the box
	  opacity = 75
        }
      }
    }
  }
}

Again, save the template. You now have:

Step 4: Insert the tt_news title

Create yet another object in your TypoScript setup, and get the title from the tt_news record:

plugin.tt_news {
  displayList {
    # Remove all configuration
    image >

    # Create a new image
    image {
      stdWrap.cObject = IMAGE
      stdWrap.cObject.file = GIFBUILDER
      stdWrap.cObject.file {
        # Width and height of the image
        XY = 517,177

        # First object: Our background image
        10 = IMAGE
        10 {
          offset = 0,0
          file {
            # Import the image from the tt_news record
            import = uploads/pics/
            import.data = field:image
            import.listNum = 0
            import.override.field = image

            # Determine the width and height (crop)
            width = 517c
            height = 177c

            # Set the quality of the image
            ext = jpg
            quality = 100
          }
        }
        20 = BOX
        20 {
          # Offset left, Offset bottom, Width, Height
          dimensions = 10,-10,280,70
          # Start at left bottom
          align = l,b
          # Color of the box
	  color = white
          # Opacity of the box
	  opacity = 75
        }
        30 = TEXT
        30 {
          text.data = field:title
          align = left
	  offset = 15,120
	  fontSize = 20
	  color = black
	}
      }
    }
  }
}

We’re finished:

If all went well, you should now be able to insert a subheader or any other tt_news field into the image as well. Hope you liked this tutorial, if you did please leave a comment.

Read more for the solution!

How to set the click and enlarge option for the RTE in tt_news:

Step 1:
Include the static template: Clickenlarge Rendering (rtehtmlarea)

Now the click and enlarge rendering should work for normal content elements, but still no result for tt_news.

Step 2:
Add the following TypoScript to your setup:

# Rendering RTE tt_news. Use the normal RTE parseFunc
# configuration for tt_news rte content
plugin.tt_news {
        general_stdWrap {
   	      parseFunc < tt_content.text.20.parseFunc
        }
}

Your Done

It turns out tt_news uses another way of rendering the RTE, so this should be reversed.

Update: It seems this snippet is actually part of the tt_news static template but out-commented... makes me wonder why?

Note: This is not an official preview but a trunk download from
the subversion repository. Features a subject to change!

Click to enlarge!

When installed, tt_news tells you to update to version 3.0 using a dedicated update screen. There seems to be no more option to disable the tabbed flexform interface, yet there are more options regarding the caching of newsitems.

Click to enlarge!

There are several database updates needed to be done. Each one can be easily applied using the update wizzard.

Click to enlarge!

With tt_news 3.0 comes a News Admin module! Within this module there are no unknown features yet, but it’s gives you a nice overview of your tt_news records. You can edit news items and categories from within the module.

Click to enlarge!

The updated flexform reveals some new changes: There are more options to display, and more alternative template parts. With the option dropdown box there is no posibility anymore to choose LIST and SINGLE within the same record. Also notice there is no selector for the starting point.

Click to enlarge!

There are a few more options than before. Image width and height are now in the flexform too.

Click to enlarge!

The startingpoint has moved from the first tab to the last tab…

Download  tt_news 3.0 and see for yourself:

WARNING: This extension is still under development and
should NOT be used in production environments!

Download tt_news 3.0 (Right-click save as, Trunk version 05-11-2009)

Note: If you don't know anything about a 301 redirect
please read the grey box at the bottom of the article!

Redirecting a page using 301

In this tutorial we have 2 pages: a news list page and a news single page

http://www.your-website.com/old-news-page/

http://www.your-website.com/news/

Now, since both page 1 and 2 are well indexed in Google and there are several inbound links we don’t want to delete either of them. Yet the first news item had become obsolete and we want to redirect all these inbound links to another page.

If we delete the first page the visitor will end up with a 404 page. A 301 redirect could redirect the first pages to another page, and this is Google friendly too! So… how to do this?

1. In the backend, go the 'info' module in the left main menu.
2. Select the rootpage of your website.
3. Choose "Speaking Url Management" from the dropdown menu.
4. Choose "Error log" from the second dropdown menu.

You should now see a list of url errors:

Click to enlarge!

It seems the page ‘old-news-page’ has been requested by a visitor but could not be found. To make sure this won’t happen again we are going to redirect this page to our new page: ‘news’. As you can see, there’s a little button called ‘set as redirect’. Click this button to set the redirect for this url. You should now see the following screen:

Click to enlarge!

In the screenshot above I’m redirecting the page ‘old-news-page’ to the new page: ‘news’. As you can see I activate the ‘Send “301 Moved permanently” header’ checkbox. Now TYPO3 will make the redirect a 301 redirect!

1. Set the old url (this way it's set automatically)
2. Set the new page
3. Save the redirect
4. Go to http://www.your-website.com/old-news-page/
5. TYPO3 will redirect you to http://www.your-website.com/news/
6. Redirect succesful!

Now let’s see how we can make this work for tt_news!

Redirecting a tt_news record using 301

When you delete a news record and try to visit it you’ll end up with a ‘no news id’ error. The RealURL Management Error Log does not register this error! So, we need to manually set the redirect.

In this case we have 2 news records:

http://dev.emaux.nl/news/news-single/article/example-news-record/

http://dev.emaux.nl/news/news-single/article/new-news-record/

To redirect news record 1 to news record 2, please follow the following steps:

1. In the backend, go the 'info' module again.
2. Select the rootpage of your website.
3. Choose "Speaking Url Management" from the dropdown menu.
4. Choose "Redirects" from the second dropdown menu.

We're back at the second screenshot above!

5. Click '+ New entry'
6. Set the url which no longer exists
7. Set the new url to which you want to redirect
8. Check the 301 checkbox
9. Save and enjoy!

Click to enlarge!

That’s it, your done! Repeat this procedure for all news items you delete. Hope this tutorial was clear and helpful. If you have any questions don’t hesitate to ask.

What is a 301 redirect?

A 301 redirect is a redirect which uses a 301 http-header code.
This code tells search engines the page is no longer available
at the given location but is 'permanently moved' to another
location. The resource (e.g. search engine) should use the new
URL in the future instead of the old URL. In real life this would
mean the old page should be replaced by the new page upon
re-indexing.

This is a good thing! Now the search enige realizes the old page
doesn't contain the information which is being looked for. The
new page does, so your pageranking is preserved. A win-win
situation: We happy (pageranking preserved), seach engine happy
(page contains good information) and visitor happy (finds the
information it's looking for).

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.

plugin.tt_news {
# SYS-Folder with newsitems
pid_list =
# Page with single view
singlePid =
displayXML {
  xmlTitle = Your RSS title
  xmlLink = Your website url
  xmlDesc = Your RSS description
  subheader_stdWrap.crop = 250 | ... | 1
  }
}

Now just go to your homepage and add &type=100 to the url! You’re done

There are a few more options, but above are the most important. See the tt_news manual for a complete reference!

plugin.tt_news {
usePiBasePagebrowser = 0
}

Now, just out of curiosity I set it to 1, just to see what happened… What do you know… way better than the default pagebrowser! It really makes me wonder why these things aren’t active by default?

Anyway, most of you probably already knew this, and if you didn’t like me, you should have

By the way: If any of you programmers are bored and want to write something really useful.. write a Ajax-based pagebrowser!

This TypoScript snippet is a latest view, but list is also posible.

Adjust the output by reading this.

plugin.tt_news.displayLatest.image.noImage_stdWrap {
  cObject = IMAGE
  cObject {
    wrap = <div class="ttnews-no-image">|</div>
    file = GIFBUILDER
    file {
      XY = {$plugin.tt_news.latestMaxW},{$plugin.tt_news.latestMaxH}
      backColor = #3f5158
    20 = TEXT
    20 {
      text = No image
      fontSize = 16
      niceText = 1
      fontColor = #ccedfb
      offset = {$plugin.tt_news.latestMaxW}/2-30, {$plugin.tt_news.latestMaxH}/2+4
      }
    }
  }
}

I wrote an extension to insert raw HTML into a tt_news record. Just install the extension and place the ###HTMLCODE### marker into your tt_news template. Should work fine

Click to download

Screenshot from inside tt_news record

After a long search I found this extension: xw_ttnewslatestsingle

This extension adds a new tt_news view called LatestSingle, which allows you to use your single news template for a latest news item. When used, template markers for rating and stuff from tt_news add-ons are suddenly available since these markers only work in the single template, NOT in the latest template.

This is REALLY useful for direct rating and commenting on the frontpage!

Check the screenshot: