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

To everyone who has published one of more useful extensions: Keep up the good work!

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?

Login Screen

Home sweet home

Content

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!