TYPO3 Tips & Frequently Asked Questions

Show all / Hide all

fold faq How do I configure TYPO3 for localized websites?
  1. Website Language Creation
    1. On the TYPO3 Global page via List mode, add a new Website Language. Take note of the uid of that language. To do so, hover over the Website Language icon after saving and closing to see the uid. You'll need this for the sys_language_uid setting later on.
  2. TypoScript Localization by URL or L Parameter
    1. If you do not have the cbstarter extension installed, put Section A into your main website TypoScript template Setup area. Otherwise, put Section A into your main website TypoScript template Constants area.
    2. Put Section B into your main website TypoScript template Setup area, below Section A.
    3. Based upon the URLs or domain names specific to your website and website languages, edit the Section A and Section B config.baseURL and sys_language_uid entries.
    4. config.locale_all
      1. Configures the locale which influences how some values from PHP is formated in the output, eg. dates formatted using strftime() which will then output month/day names in that language.
      2. Refer to the ICU User guide to format the locale_all entry.
      3. Refer to the ISO 639-2 Code List for the language code.
      4. Refer to ISO 3166 for the country code.
    5. config.language
      1. Configures the system “language key” to be used for the language. This is used to select labels from llXML (locallang-XML) files. Setting this should make frontend plugins respond by showing labels from the correct language (requires installation of the corresponding language packs).
    6. config.htmlTag_langKey
      1. Changes "xml:lang" and "lang" attributes in the <html> element.
  3. UTF-8 Configuration
    1. If you do not have extension cbstarter installed, put Section C into your main website TypoScript template Setup area. Otherwise, put Section C into your main website TypoScript template Constants area.
    2. Put Section D into your typo3conf/localconf.php file.
  4. RealURL Configuration
    1. Edit your realurl configuration to include a preVars > getVars > L entry.
    2. See Section E for a sample.
  5. Click "Clear all caches" for your TYPO3 installation.
  6. Create localized content
    1. Basic process
      1. Create alternative page language record
      2. Via Web > Page (TemplaVoila), click the "Create localized version" link on each content element you desire localization of.
      3. Via Web > Page, click the create new content icon, and set the language drop-down.
    2. Refer to the references for creating content in detail.

Section A - TypoScript Localization by URL

config.baseURL = www.cannonbose.com

# SSL is for cannonbose.com
[globalString = _SERVER|HTTPS=on]
	config.baseURL = www.cannonbose.com
[end]

Section B - TypoScript Localization by URL or L Parameter

config {
	linkVars = L
	uniqueLinkVars = L
	sys_language_mode = content_fallback
	sys_language_overlay = 1
	sys_language_softMergeIfNotBlank = tt_content:image, tt_content:header

	sys_language_uid = 0
	locale_all = en_US
	language = en
	htmlTag_langKey = en-us
}

# French
[globalVar = GP:L = 1] 
	config.sys_language_uid = 1
	config.locale_all = fr_FR
	config.language = fr
	config.htmlTag_langKey = fr

# Chinese (Simplified)
[globalVar = GP:L = 2] || [globalString = _SERVER|HTTP_HOST= *.cn]
	config.sys_language_uid = 2
	config.locale_all = zh_CN
	config.language = cn
	config.htmlTag_langKey = zh-cn
	config.baseURL = www.cannonbose.cn

# Chinese (Traditional)
[globalVar = GP:L = 3] || [globalString = _SERVER|HTTP_HOST= *.tw]
	config.sys_language_uid = 3
	config.locale_all = zh_TW
	config.language = tw
	config.htmlTag_langKey = zh-tw
	config.baseURL = www.cannonbose.com.tw
[end]

Section C - TypoScript UTF-8 Configuration

config.renderCharset = utf-8
config.metaCharset = utf-8

Section D - localconf.php UTF-8 Configuration

$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

Section E - realurl.php Sample Configuration

$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT']['preVars'] = array(
		array(   
			'GETvar' => 'L', 
			'valueMap' => array(
				// 'english'
				'en' => '0',
				// 'french'
				'fr' => '1',
				// chinese simplified
				'cn' => '2',
				// 'chinese traditional
				'tw' => '3',
			),   
			'noMatch' => 'bypass',
		),
	);

References

TYPO3 Frontend Localization Guide

Multi Language Sites in TYPO3

TYPO3 XHTML

cbrealurl realurl.php

Extensions

cbstarter

cbrealurl

Category: TypoScript, TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq How do I preview my news articles from the backend?

Per the tt_news documentation, by using the news storage folder Page TS Config, you can set a news record to be previewed on a front-end page with a SINGLE view news content element.

If your articles preview page is to be page 37, then add the following to the news storage folder TS Config.

tx_ttnews.singlePid = 37

The 37 is determined by hovering your mouse over the page icon in the page tree and reading what number it says on via the alt or title popup as "id = 37"

That's it, a very neat and valuable trick. You could even send this link to your editor for article proof-reading.

Please note though, that the URL of news article preview is not the final article URL. Don't publish the news article preview link.

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq What's the easiest way to configure the RealURL extension?

Install Cannonbose's own RealURL configuration extension called cbrealurl.

Read the README.txt file for installation and configuration information.

 

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq How do I create a "Contact Us" mail form?

 

Name | *name=input
Email | *email=input |  | EMAIL
Phone | phone=input
Subject | subject=select | Consulting, Sales, Support, Training, Web Hosting
Request | comments=textarea,25,10
| formtype_mail=submit
| Request Free Consultation
| html_enabled=hidden | 0

 

You can change Name, Email, and Subject of above to display as you'd like on the front-end. Don't change name, email, and subject or else the sent email from name, from email, and subject will not be what the submitter provided.

The * before name and email? denotes those fields as required.

The EMAIL of email, informs TYPO3 to validate the input as an email address prior to clicking submit.

Reference

Code from Cannonbose's Contact Us form content element for this website.

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq How do I stay using HTTPS?

Put the following code in your TypoScript template in Constants or Setup depending upon how you set config.baseURL in Setup. 

config.baseURL = www.cannonbose.com  
[globalString = _SERVER|HTTPS=on]
  # SSL is for cannonbose.com
  config.baseURL = https://cannonbose.com/  
[end]

Reference

Code from Cannonbose's TypoScript template for this website.

Category: TypoScript, TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq Are there any TYPO3 tutorials?

TYPO3 tutorials can be found in the support section.

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq Can you recommend some TYPO3 documentation?

TYPO3 documentation is constantly in flux to account for development advancements. The following URLs point to most recent versions of documentation.

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
fold faq Hows does news and calender items differ from page content?

News and Calendar element work differently than regular page element, in that this is a 2 part system.

  1. The news/calendar item is created and stored in the storage folder for the section.
    Selecting 'save and view document' does not work for news/calendar items as they are not stored on the page on which they are displayed, but in the storage folder.

  2. To have the item displayed in the browser you have to switch to the section page itself. The Internet Browser automatically caches (memorizes) the page it displays. So when we add new content and want to view it we have to force the browser to forget the memorized page and load it from scratch. To do this we have to clear the cache in the news/calendar storage folder before going to the page where the content will be displayed.

Clear the Cache

  • To clear the cache stay in the storage folder where the news/calendar item is created

  • go to the top of the screen in the work area (right column) and select the 'clear cache' icon

  • now go the page where the new/calendar item is displayed and select 'show' or 'view webpage'

Here is a link to the manual for the News Extension:

typo3.org/documentation/document-library/extension-manuals/tt_news/current/

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
Question asked by: Autumn Ridge Church
fold faq How do you upload one or more images?

  • Select 'Filelist' in the TYPO3 (left) column

  • Expand the images folder for the section the image(s) are destined for

  • Select the grey icon for the folder where the image(s) have to go.

  • From the popup menu select 'Upload Files'
    If more than one image needs to be uploaded select the down arrow next to 1 file box and choose the number.

  • If you are replacing an existing file select 'overwrite existing files'

  • Select the 'Browse' button for the first box, you are now on your computer's harddrive.

    • Go to the place where the image is stored and

    • select it, the image's name will now appear in the box.

    • Repeat for the other images, then

  • select the 'Upload Files' button.

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
Question asked by: Autumn Ridge Church
fold faq How do you choose what image format to use?

  • Photos are generally saved in JPG format

  • Icons are generally saved in GIF or PNG format

Photos that come straight off a digital camera are way to big for the Internet both in actual dimensions and in size and have to be resampled. Example a 1MB image can be reduced to 50K, which will load much faster, especially for people with dial up service and it will take up less room on their computer's harddrive.

  • Selecting the Text w/image option will automatically resize the image to a more managable size. The image is automatically resized to 295 pixels wide. If this is too big, the image can be made smaller by writing the size in the width or height box.
    Ignore the 'Quality' and 'Effects' boxes

  • When selecting an intext picture inside the RTE (Rich Text Editor) it is important to choose 'New Magic Image' rather than 'New Plain Image' at the top of the popup window and then select the image. This way the image will automatically be reduced.

Category: TYPO3 Tips
Expert: Michael Cannon (Profile)
Question asked by: Autumn Ridge Church
fold faq How do you create print or share article popups? 

lib.print_url = TEXT
lib.print_url {
	value =  Print
       typolink {
               parameter = 261 640x480:status=1,menubar=1,scrollbars=1,resizable=1,location=1 - Print Story
               addQueryString = 1
               addQueryString {
                       method = GET
               }
               additionalParams = &print=1
       }
}

lib.tip_url = TEXT
lib.tip_url {
	value =  Email
       typolink {
               parameter = 210 1000x600:status=1,menubar=1,scrollbars=1,resizable=1,location=1 - Email Story
               addQueryString = 0
               addQueryString {
                       method = GET
               }
		additionalParams.cObject = COA
		additionalParams.cObject {     
			# This part generates the "tipUrl" parameter in the
			# correct format. (rawUrlEncoded)
			10 = COA
			10 {
				# This part adds the domain (baseUrl) to the link URL
				10 = TEXT
				10.data = TSFE:baseUrl

				# This part creates an URL pointing to the current page
				# including all parameters from the query string.
				20 = TEXT
				20.typolink.parameter.data = page:uid
				20.typolink.addQueryString = 1
				20.typolink.addQueryString.exclude = id
				20.typolink.addQueryString.method = GET
				20.typolink.returnLast = url

				# Then everything is rawUrlEncoded so it can
				# be placed as a single parameter in the link URL
				stdWrap.rawUrlEncode = 1
			}
			# And finally the parameter data is wrapped with the "&tipUrl=" parameter.
			wrap = &tipUrl=|
		}
       }
}

### articleLinks
temp.articleLinks = COA
temp.articleLinks {
  ### Printlink
  10 < lib.print_url

  20 = HTML
  20.value =  

  60 < .20
  
  70 < lib.tip_url
  80 < .20
}

lib.printLinks < temp.articleLinks

Category: TypoScript, TYPO3 Tips
Expert: Michael Cannon (Profile)

Cannonbose is an Official TYPO3 Consultant

TYPO3 Association Supporting MemberCannonbose is an official TYPO3 consultant providing on-call TYPO3 support and on-going TYPO3 website maintenance. We specialize in the development and support of TYPO3 CMS (content management system) websites. Whether you need TYPO3 development, TYPO3 performance tuning, TYPO3 SEO (search engine optimization), TYPO3 support, or TYPO3 training; we have a TYPO3 support agreement to fit your needs. Cannonbose contributes to TYPO3 by supporting TYPO3 marketing and being a corporate member of the TYPO3 Association.

What Our Clients Have to Say

I have been a client of Michael's for several years. He has always offered very clear and abundant technical support and was often willing to go out of his way to accommodate my schedule. His technical expertise and customer service abilities have paired well, and offered me a great experience with Cannonbose.
David Cosio, Autumn Ridge Church

 

Contact Cannonbose for a Free Consultation

Call +1 (800) 559-9773 or email using this form





captcha