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.

First: Import the extension through the TYPO3 Extension Manager:

You might need to install two additional extensions: xajax (for ajax support) and the default TYPO3 loginbox which is already available but not active.

We now have all necessary extensions.

Insert a loginbox into a page, by selecting the regular default login content element. If this is your first loginbox, please create a usergroup and a user first, preferably in a System Folder. In the login content element, point the startingpoint to this System Folder.

If you’re familiar with the default TYPO3 login box, you’ll notice nothing has actually changed in the frontend. To make the ajax-magic work, you should make some (small) template adjustments. The extension (ods_ajaxfelogin) provides a ready-to-use template, which is basically the same default template but with those small adjustments.

To make use of this template, we need to tell TYPO3 to use this template, instead of the default one. Create a TypoScript template and put the following inside the ‘setup’ area:

# Custom template for the TYPO3 loginbox
plugin.tx_felogin_pi1 {
	templateFile = EXT:ods_ajaxfelogin/felogin.html
}

In the code above I use the template provided by ods_ajaxfelogin, but you might way to copy the contents of this file and create your own file. This way you can make adjustments according to your design needs.

After you applied the code above, you should have an AJAX-powered loginbox in the frontend.

Embedding a Vimeo video

Vimeo uses an iframe:

<iframe src="http://player.vimeo.com/video/16458561?title=0&amp;byline=0&amp;portrait=0" frameborder="0" height="225" width="400"></iframe>

The most obvious way would be: Switch to HTML modus in the RTE, paste the code and save the content element. But as you might have experienced, this way you’ll end up with a nice HTML embed code printed in the frontend. Not so useful…

How to fix this?!
Since Vimeo uses an iframe, we need to make sure the RTE accepts this iframe-tag. So we need to change RTE behaviour when saving the content element or tt_news record. Insert the following TSConfig configuration into the Page TSConfig field:

RTE.default.proc.allowTags := addToList(iframe)
RTE.default.proc.entryHTMLparser_db.allowTags := addToList(iframe)

If you want to insert the iframe outside of a block tag like a P or a DIV, than you’ll need to following as well:

RTE.default.proc.allowTagsOutside := addToList(iframe)

Now the RTE will preserve the iframe when saving. But… still no iframe in the frontend!
The extension css_styled_content doesn’t render an iframe by default, so let’s change this:

In your TypoScript constants add the iframe to the following (default) code:

styles.content.links {
  allowTags  (
         b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,
         em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,
         h5,h6,address,iframe
  )
}

Take a look in the frontend If everything went well you can now see the Vimeo videoplayer.

Example 1: We want our customers to contact us by phone, but the phone number changes all the time.

RTE content:

Please call us: phonenumber

In TypoScript:

page {
  stdWrap.parseFunc.short {
    phonenumber =  + 1 555-3141
  }
}

In the frontend ‘phonenumber’ will now be replaced with the actual number. Quite easy. Combined with TypoScript conditions, this is a really powerful way of content rendering.

Example 2: We want customers to call a different phone number during business hours.

RTE content:

Please call us: phonenumber

In TypoScript:

[hour =< 9] && [hour =>18]
page {
  stdWrap.parseFunc.short {
    phonenumber =  + 1 555-3141
  }
}
[else]
page {
  stdWrap.parseFunc.short {
    phonenumber =  + 1 555-5131
  }
}
[end]

First of all lets render the appropriate doctype. TYPO3 by default renders a HTML 4.0 transitional doctype, we’re changing it to a HTML5 doctype using:

config.doctype = html5

HTML5 doesn’t have a XML Prologue, so let’s remove it:

config.xmlprologue = none

Now, we want to make use of the new <section> tag which requires us to override some predefined TypoScript.

Definition and Usage: The <section> tag defines sections in a
document. Such as chapters, headers, footers, or any other
sections of the document.

This DOES NOT indicate all <div> tags should be replaced! If fact, the <section> tag should be used on all elements which have a header and some text. In TYPO3 this means every content element should be a section by default, instead of a div. So let’s make that happen:

# Change <div id="c#"> in <section id="c#">
tt_content.stdWrap.innerWrap.cObject.default {
  10.value = <section id="c{field:uid}"
  30.value = >|</section>
}

Your <header>, <footer> and <nav> will have their own tags in HTML5, so no more div tags here. If you’re using the autoparser you need to extend the tags which should be parsed.

plugin.tx_automaketemplate_pi1 {
   elements {
       BODY.all = 1
       BODY.all.subpartMarker = DOCUMENT_BODY

       DIV.all = 1
       HEADER.all = 1
       FOOTER.all = 1
       NAV.all = 1
   }
}

We want people to view our Awesome-Cool-TYPO3-HTML5-website in a decent browser like FireFox 4 or Chrome, but that’s wishful thinking. So let’s add some IE compatibility for all those people on IE 7 and 8.

# Insert HTML5 compatibility for older browsers
[browser = msie]&&[version = <9]
page.includeJS {
	file1 = http://html5shiv.googlecode.com/svn/trunk/html5.js
	file1.external = 1
}
[end]

You now have a basic HTML5 website, enjoy. Maybe I’ll add some more things later

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!