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?

Insert the following User TSConfig into your own userrecord or in the usergroup to which you belong (i.e. Admins).

mod.web_list.hideTables=static_template, static_countries,
static_country_zones, static_currencies, static_languages,
static_territories, static_taxes, static_markets

IMPORTANT:
I had to use spaces in the code above in order to display it right. DON’T use them in your TSConfig!

A header with a date attached:

# Overwrite layout 5
# Create an array of objects
lib.stdheader.10.5 = COA
lib.stdheader.10.5 {
   # First object is a copy of the default header layout 1,
   # so the basic input is printed. (e.g. the field 'header')
   10 < lib.stdheader.10.1
   10.fontTag = <h2{register:headerStyle}{register:headerClass}>|

   # Second object: The date which we want to be appended.
   20 = TEXT
   20 {
      data = date:U
      strftime = %A %e %B
   }

   # Third object: Closing the H2 tag which we opened
   # in the first object.
   30 = TEXT
   30.value = </h2>
}

A header with the username

# Overwrite layout 5
# Create an array of objects
lib.stdheader.10.5 = COA
lib.stdheader.10.5 {
   # First object is a copy of the default header layout 1,
   # so the basic input is printed. (e.g. the field 'header')
   10 < lib.stdheader.10.1
   10.fontTag = <h2{register:headerStyle}{register:headerClass}>|

   # Second object: insert the username.
   20 = TEXT
   20.value = {TSFE:fe_user|user|name}
   20.insertData = 1

   # Third object: Closing the H2 tag which we opened
   # in the first object.
   30 = TEXT
   30.value = </h2>
}

GIFBUILDER can’t actually read your headertext so there’s no way it can determine when to use multiple lines by itself (at least, not without making weird cuts in the middle of your words). Therefore, we need to tell GIFBUILDER when to break the line.

Since we only use one H1 tag per seo, this snippet modifies the second header layout.

# Start overriding the second header layout.
lib.stdheader.10.2 >
lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
  # Wrap the whole header
  wrap = <div>|</div>
  10 = IMAGE
  10 {
     # Wrap the first line
     wrap = <div>|</div>
     file = GIFBUILDER
     file {
        XY = [10.w] + 4, [10.h] + 8
        backColor = #FFFFFF
        10 = TEXT
        10 {
           text.field = header
           # Set the fontfile and font-properties.
           fontFile = fileadmin/fonts/customfont.ttf
           fontSize = 22
           fontColor = #000000
           offset = 0,18
           # Select the first line of our sentence.
           text.listNum = 0
           # Here we determine the break, in this case a pipe (|).
           text.listNum.splitChar = |
        }
     }
  }
  # Check if the second line is there...
  20 = COA
  20.if {
     value.field = header
     isTrue.cObject = TEXT
     isTrue.cObject.field = header
     # The second line starts after the pipe
     isTrue.cObject.listNum.splitChar = |
     # Now use the second line of our sentence
     isTrue.cObject.listNum = 1
  }
  # If the second line is there, use the same markup
  20.10 < .10
  20.10 {
     file {
        10.text.listNum = 1
        10.text.listNum.splitChar = |
     }
  }
}

Just to be clear: A header with two lines would now be like:
This is a very long header which will | be displayed over two lines.

Result:

The pipe will be the place where you split the header. Ofcourse, all the font properties used in the first line are also available in the second line, so play all you like with different fonts and markup on every other line.

A condition always consists of 2 brackets with a statement in the middle:

[your-statement]

Multiple conditions can be combined by using so called operators: && (AND) or || (OR), if no operator is defined the default will be OR.

Example 1: Load ie.css only when the browser is IE

[browser = msie]
page.includeCSS {
   1 = fileadmin/ie.css
}
[end]

Example 2: Load ie6.css only when the browser is IE and the version is lower than 7

[browser = msie] && [version = <7]
page.includeCSS {
   1 = fileadmin/ie6.css
}
[end]

Example 3: Load ie stylesheet when the browser is IE, load normal stylesheet with all other browsers

[browser = msie] && [version = <7]
page.includeCSS {
   1 = fileadmin/ie.css
}
[else]
page.includeCSS {
   1 = fileadmin/style.css
}
[end]

Example 4: Use the time to accordingly greet your visitor

# Display 'Good Morning before 12 o'clock
[hour =< 12]
lib.greeting = TEXT
lib.greeting {
    value = Good Morning!
}
[else]
# Display 'Good Day' after 12 o'clock
lib.greeting = TEXT
lib.greeting {
    value = Good Day!
}
[end]

Let’s make things a little bit more interesting.

Example 5: We want to include some records (from page id 250) in our left_column div but only on page id 100 or a subpage of this page!

# First we define the content of the 'left_column' div:
left_column = COA
left_column {
   10 < lib.regularContent
   20 < lib.specialContent
}

# Display the lib.specialContent only on page id 100 or a subpage
[PIDinRootline = 100]
lib.specialContent = CONTENT
lib.specialContent {
   table = tt_content
   select {
      pidInList = 250
      orderBy = sorting
      languageField = sys_language_uid
   }
}
[end]

I could make a hundred examples but when you know to basics it isn’t that hard. If you want to know more about these conditions please read chapter 4 of the TSRef:
http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/4/1/

If you have any questions don’t hesitate to ask!

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.

Basic no. 1: A clean source code.

A clean source code makes it easier for search engines to crawl your website. For that, you need to clean up the default HTML output done by TYPO3. Use this line of TypoScript a put it in your template Setup section:

# Clean up prefixes in source code
config.disablePrefixComment = 1

This will clean up the prefixes made with every content-element. This should be a relief! For a more complete cleanup please go to this post.

Basic no. 2: Make you headers better.

By default, every content-element header is a <h1> header in TYPO3. For your SEO it’s better to just have one <h1> tag per page. To convert all these <h1> tags into <h2> tags you need to put the following line in your template Constants section:

# Convert default H1 tags into H2 tags
content.defaultHeaderType = 2

You can now add a <h1> tag manually to the page, or generate one dynamically using TypoScript.

Basic no. 3: Images.

By default, images which are scaled, croped or in any other way modified by TYPO3 are given a random name. For example:

/typo3temp/pics/b3e43c4bb3.jpg.

By installing the extension: fl_realurl_image, your images will get a nicer name. Install the extension and you’re done. Images will now be named like:

/typo3temp/fl_realurl_image/your_image.jpg

Basic no. 4: Page title.

The pagetitle is important for your SEO ranking. This title needs to summerize the pagecontent as close as posible. I suggest you manually edit these to your needs. Someone (can’t rememer the name, sorry) once told me: Use an inverted breadcrumb path as a pagetitle. The theory behind this: People think about their page names, the lower in the pagetree the more specific. If you invert this you have a pretty close to content path and also the main keywords which people interested in this subject will search for.

Basic no. 5: URL’s.

The default URL’s of TYPO3 are not readable, the solution to this problem is RealURL. Since this extension is really popular I’m not going to explain it, this has been done more than enough times. Just search the web for a good tutorial. I can recommend the extension “danp_realurlconfigurator” though, which gives you a nice configurator.

Basic no. 6: Description and meta tags.

A really important SEO rule is to have unique page descriptions and meta tags. Since these fields have to match the page content as close as posible it’s only logical to have them in your page configuration. If you edit your page you’ll find the second tab is all about meta data. Here you can fill in the description and meta tags for your page. To actually use these field in the frontend source code you’ll need to following lines in your template Setup section:

# This will activate the page meta data
page.meta.keywords.field = keywords
page.meta.description.field = description

Basic no. 7: An XML sitemap for Google Webmaster Center.

If you want Google to track your page changes and crawl them accordingly you can submit a XML sitemap. If you do not know what a XML sitemap is please read this first. There are a couple of extensions to generate such a sitemap dynamically in TYPO3.

Basic no. 8: JavaScript at the bottom of your source.

Deprecated since version 4.3! Use page.includeJSFooter instead.

This might be more of a speed thing rather than SEO, but still… By default TYPO3 will put javascript includes in your header.

-- SNIP: Deprecated snippet --

TYPO3 also generates a default JavaScript which can be removed by putting this line in your template Setup section:

# Remove the default JS file in the header
config.removeDefaultJS = 1

Make sure you copy the content of this file to your custom one before removing it.

Tip: Extension seo_basics

Benjamin Mack has developed an extension (seo_basics) which is really useful. It not only generates the XML sitemap by default, but it also helps you to update the page descriptions and meta tags. Download and install the extension through the extension manager. Once installed, go to http://www.your-website.com/sitemap.xml, you’ll notice it works right out of the box. (If it doesn’t, please check you RealURL configuration). But this is just the beginning. Go to the “info” module and select your root website page. Now, in the drop-down box choose “SEO Management”.

(Update: 17-01-2010: Breaking change in extension update, include static template first!)

Click to enlarge!

Here you’ll see all pages with there url-path, title, description and metatags. Click on the “Edit SEO fields”. Now you’ll notice you can edit all fields of all pages within one screen! Once you start filling in the details you’ll notice the color changes while typing:

Yellow: To little text
Green: Just good!
Red: To much text

If you would like to add META Abstract & Author to seo_basics please look at this post of Michael Cannon: http://www.acqal.com/blog/a/article/add-meta-abstract-author-to-seo-basics/

Click to enlarge!

Hope you liked this post:)

These basics are far from a complete reference but I hope they will be of use. If you’ve got suggestions, please don’t hesitate to comment…

Here’s a bit of TypoScript which produces both a graphical and a text header for the same single content element. You can display the graphical header and hide the text header using css (for example: indent: -9999). This way users will experience the nice graphical header while search engines will still be able to crawl the text header. We’ll give the text-header a H2 attribute so the importants is obvious to the search engine.

This snippets produces a H2 header with the same headertitle for both the graphical header as the text header:

lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
	10 = IMAGE
	10 {
   		wrap = <span>|</span>
                file = GIFBUILDER
   		file {
   			XY = [10.w]+1,60
   			backColor = #ffffff
   			transparentBackground = 1
   			10 = TEXT
   			10 {
   				text.field = header
   				text.current = 1
   				fontSize = 52
   				offset = 0,50
   				fontFile =  path/to/your/font.ttf
   				fontColor = #000000
   				niceText = 1
    			}
   		}
   	}
	20 = TEXT
	20 {
		wrap = <h2 class="headerDesc">|</h2>
                field = header
	}
}

Maybe you would like to have a different alt and title text with the graphical header instead of the actually image text and also want this different text to show in your text-header. Since TYPO3 has no extra BE-field for this issue, you should use “Text and Image” instead of “Text”. This way you’ll have more BE-fields you can use. In this example I’ll use the “Long URL Description” field to define our alt, title and text-header content.

lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
	10 = IMAGE
	10 {
   		alttext.field = longdescURL
   		titleText.field = longdescURL
   		wrap =  <span>| </span>
   		file = GIFBUILDER
   		file {
   			XY = [10.w]+1,60
   			backColor = #ffffff
   			transparentBackground = 1
   			10 = TEXT
   			10 {
   				text.field = header
   				text.current = 1
   				fontSize = 52
   				offset = 0,50
   				fontFile =  path/to/your/font.ttf
   				fontColor = #000000
   				niceText = 1
    			}
   		}
   	}
	20 = TEXT
	20 {
		wrap =  <h2 class="headerDesc">|</h2>
  		field = longdescURL
	}
}

I hope this will be useful. If you have any questions or comments please don’t hesitate…

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!

options.clearCache.all = 1