Linking to content elements on other pages

You’ve created a wonderful content element. Perhaps an article or an advertisement, a search box or something. Now, you want to place that content element on multiple pages. You don’t want to copy and paste it – if you did, you’d have to go hunt down all the copies if you need to make a change. What you want to do is link or reference it on additional pages. This is a very reasonable thing to do, and in fact one of the main reasons for using a CMS like Typo3.

Unfortunately, how you go about it, although quite easy, is not so intutitve in Typo3. So, here’s an explanation:

• Create the content element containing the article that you want to put in multiple places (I like to store them in a folder so that they are all organized in one place).
• Create a new content element on the page where you want to display your article
  • For the content Type, select Insert Records
  • Give it a Name
  • Select the Items containing your article and any thing else you want along with it.

You can see this at work on my sites with the Search boxes and advertisements. Take a look at my search page on Learner’s Village or RosinaBignall.com.

Setting the Title tag

Typo3 automatically creates the <title> tag containing the sitename: page title.

But, I wanted to include the subtitle in the tag so that I can have a longer <title> that is descriptive and keyword rich. So, the page <title> tag should go something like this:

<title> Site name: Page title – Page Subtitle </title>

To accomplish this, add the following to your template:

#Title tag extras:
config.noPageTitle = 2
page.headerData.20 = TEXT
page.headerData.20.value = my Site Name
page.headerData.20.wrap = <title>|:
page.headerData.30 = TEXT
page.headerData.30.field = title
page.headerData.40 = TEXT
page.headerData.40.field = subtitle
page.headerData.40.wrap = – |
page.headerData.40.if.isTrue.field = subtitle
page.headerData.50 = TEXT
page.headerData.50.value = </title>

config.noPageTitle = 2 suppresses Typo3’s <title> tag creation (setting it equal to 1 tells Typo3 to create the title with only the site name, resulting in two <title> tags which I understand does terrible things to you in the search engine rankings.)

The rest of the lines describe the construction of the <title> tag. So, if your page title is “My Page Title” and the subtitle is “My Page Subtitle”, the <title> tag will look like this:

<title>my Site Name: My Page Title – My Page Subtitle</title>

and in the browser you will see

my Site Name: My Page Title – My Page Subtitle

Check out Learner’s Village product The Secrets of Influence, to see this in action!

Future work: I’d like to find out how to get the site name automatically (something like, “page.HeaderData.20.field = sitename”) so that it is not hard coded in the template (then I only have to change the site name in one place and I can use the same template for multiple websites)

Opening links in the same window

The default action for links in Typo3 is to have them open in a new window. This is generally not what is wanted for most sites. Adding the following to the constants to your template resolves the problem.

PAGE_TARGET =
content.pageFrameObj =
tt_content.menu.20.2.1.target =

Using External URLs

1. Set the page type to External URL.
2. Enter the URL.
3. Select the URL type (default http://).

Note: When entering the URL, do not include http:// as that is taken care of by the URL type.

This may sound really stupid, but it is something that caught me…

Configuring RealURL

Today I found out about a tool to help configure RealURL.

1. Download and install the extension aeurltool.
2. Refresh the back end (Log out and log back in).
3. Click on URL Tool.
4. Set up your 404 page handling to go to any page on your site if you want.
5. Select Real URL configuration.
6. Load the Default configuration.
7. Click on Use this RealURL configuration.
8. Save.

All done! Now check out your front end and see your new URLs.

The default configuration uses the one that was posted on news.typo3.org.

Oh, and BTW, this solves the problem mentioned in my previous post about RealURL. Now URLs will have a .html on the end.

Meta Tags

We all need Meta tags, don’t we? And we need different keywords for different pages… so putting them in the Template is a bad idea. Well, there is an extension that will allow you to do all of it within Typo3: Meta Tags Auto-Maker. There’s another one to help with keywords: Keyword Wizard.

Meta Tags Auto-Maker

Both extensions are quite easy. Start with Meta Tags Auto-Maker:

1. Install the extension
2. In your template, add the extension in the Included static section.
3. Remove meta tags from your template so that they are not rendered twice.
4. Edit the root page header, change the type to Advanced.

Now, you’ll see additional fields that will be used in the Meta tags. Most are pretty self explanatory.

You can change any page to Advanced and you will be able to edit the meta tag fields for it as well. When there is no value specified for a tag, most meta tag fields slide up the tree until a value is found (where appropriate).

Keyword Wizard

The Keyword Wizard lets you store Keyword records that you can use on your site in the keyword field so that you don’t have to retype them all the time.

1. Install the extension
2. Go to the List module and select any storage folder (sysfolder)
3. Add any keywords that you want to be able to reuse

Now, when you edit the keywords on the page header, you’ll see a new keyword wizard icon next to it. Clicking on the icon will bring up a window where you can select your keywords or add additional ones to be used only on this page.

Using Real URLs

Who likes to see URLs that have a bunch of ?s, &s, numbers, and other unreadable stuff? I don’t! In fact, I get somewhat suspicious of them, even knowing much of the behind the scenes stuff that makes the work. I still don’t like them, and Typo3 is driven by them…

RealURL to the rescue! It works pretty well right “out of the box”, but there are a couple of things to do to get it set up.

1. Go to the extension manager and install the RealURL extension.
2. Go to your template and edit the TypoScript, adding these lines:

   ## RealURL Setup
config.simulateStaticDocuments = 0
config.baseURL = http://www.rosinabignall.com/site/
config.tx_realurl_enable = 1
config.prefixLocalAnchors = all
##

Note: Change your baseURL to match your site.

Easy enough, wasn’t it? There’s a lot that you can configure to change how the URLs are presented, but if you’re happy with the default (as I am at the moment), then this will do it.

If you read the docs, you’ll find the lines a bit different. Apparently the baseURL line in Typo3 has changed for security reasons, but the docs haven’t been updated yet. And the prefixLocalAnchors line is mentioned in a different place.

Now, if you add an alias to each of your pages, you will have URLs like this: http://RosinaBignall.com/site/alias/

Note that the trailing slash (/) on the URL is very important to RealURL.  http://RosinaBignall.com/site/alias will not work.  Since I type URLs by hand frequently and usually leave off the trailing / , I find this rather annoying.

I use RealURL with both Learner’s Village and RosinaBignall.com

Future work:  Figure out how to make RealURL work both with and without the trailing / .

Running Multiple Applications on your Site

Well, all my work on the root .htaccess was for naught… I just found out that my other application was no longer working correctly. I could get to the administration page for it, but not any of the other “virtual” pages that it created. After a bit of research I found out what to do.

First, forget what I said about the root .htaccess file. Instead, install something like this:

Options -Indexes
RewriteEngine On
ErrorDocument 404 /gotrythis/gotrythis.php
ErrorDocument 403 /gotrythis/gotrythis.php

My application happens to be GoTryThis and the main page for it is gotrythis/gotrythis.php . Substitute the correct location for whatever app you use. Then, you need to configure that app to send its 404 pages to site/index.php . Now, any file that is not found (or is forbidden) will first be sent to GoTryThis . If GoTryThis can’t resolve it, then it will go to Typo3 and it will try to resolve it.

Setting up your site Template

Using TemplaVoila is the absolute easiest way to get started with a new website.

First, design your template. You can find lots of templates that will work fine (check out Template Monster or OSWD) or design your own. If you follow good design principles, your template should work. Then upload it to the fileadmin area for your Typo3 site in a folder called fileadmin/templates/templatename (replace templatename with whatever you call your template). You will have to create the directory templates/templatename .

In your Typo3 back end, install TemplaVoila from the Extension Manager.

In the TemplaVoila Control Center, use the wizard to create an entire site for you. It will lead you through the steps to create the template records needed by Typo3 with the template you uploaded. And, it will create a bunch of pages for that site that you can use to get started with and see how your template is working.

You will probably need to adjust the TypoScript for your menu(s). After the wizard is finished, go to Template, select your main page and edit the Setup in the template record.

Where to Install Typo3

Choosing your installation directory is very important. You want someone who is coming to your site (e.g. http://www.RosinaBignall.com/ ) to see your main page in Typo3, but you also want to be able to have other non-Typo3 pages. You may even want to run other applications alongside your Typo3 installation (such as GoTryThis which I use a lot).

So, install Typo3 in a subdirectory. I install mine in a directory called site, so the real URL to my Typo3 pages is http://www.RosinaBignall.com/site/ . With your installation in a sub-directory, you will be able to have other non-Typo3 pages and other applications on the same server. From here on out, I will assume that the installation is in the site directory. If yours is some place else, make the appropriate changes to the directions.

Next, you want to make it so that someone who goes to your site gets to your Typo3 pages. This is accomplished by editing your .htaccess file. In your site directory is a file called _.htaccess – rename it to .htaccess . That is all you need to do with this file. Now, if you go to http://www.RosinaBignall.com/site/ (for example) you should see your main Typo3 page.

Now for the real trick… getting http://www.RosinaBignall.com/ to also bring up your Typo3 pages. Here’s the trick I use. In the root of your website, create another file named .htaccess. In that file, place the following:

Options -Indexes

RewriteEngineOn

# If the file or directory does not exist, then go to Typo3
RewriteCond %{REQUEST_fileNAME} !-d
RewriteCond %{REQUEST_fileNAME} !-f
RewriteRule ^([^.]+)\.s?html$ /site/$1 [L,R=301]

# Additional redirection for subdirectories/files/ which are not found.
ErrorDocument 404 /site/index.php

# If they try to access a forbidden area (such as an Index),
# send to Typo3 main page
ErrorDocument 403 /site/index.php

By not allowing Indexes (which is a good idea regardless) with the Options -Indexes line, that forces anything that would be a directory listing to get a 403 error code (Forbidden). The last line says that all 403 errors should be redirected to your main Typo3 page. The Error…404 line says that any non existing page also get sent to the main Typo3 page. The RewriteCond and RewriteRule lines say that if the file or directory does not exist then send it to the Typo3 main page. So, you can see that this will catch any non-existing files and directories as well as any existing directories with no index files and redirect them to your Typo3 installation.

Try it out! When you go to http://RosinaBignall.com or http://www.RosinaBignall.com/ or http://RosinaBignall.com/site , you should get the same page as if you go to http://www.RosinaBignall.com/site/ . Likewise, if you go to some non-existing file or sub-directory, such as http://RosinaBignall.com/nonexistingdir or http://RosinaBignall.com/nonexistingfile.html , you should also get the same page.

Future work: I’d like to have my non-existing pages go to my Typo3 installation, but explain that the file or directory did not exist, not just bring up the homepage.