Tuesday, March 30, 2010

Howto enable click enlarge images in the RTE of TYPO3

Sometimes it’s handy to put images directly in the RTE instead of attaching them via the media tab in normal pagecontent or in a tt_news article. Together with a lightbox you can than browse through the images, which are spread in the text, like a gallery.

1.  Check “Enable images in the RTE” and “Enable click-enlarge on images” in htmlArea RTE
Via the extension manager click on the extension “htmlArea RTE” and there check “Enable images in the RTE” and “Enable click-enlarge on images”. After that click on Update on the bottom.


Install and include “PMK Slimbox” and “PMK SlimBox for TT_news RTE-Text “  (optional)
If you like to use a Lightbox for nice image enlargement you could install PMK Slimbox and if you use tt_news you might want PMK SlimBox for TT_news RTE-Text, which allows  images inserted via the RTE also to have a lightbox. After installing via the extensionmanager include the static templates (see image above).

4. Check image button, tsconfig, default max width of RTE images
You should see now an image button in the RTE. If not, it is probably disabled in the tsconfig of the main page. For that edit the page properties of your root page and check under tab options. Make sure it is not listed under RTE.default.hidebuttons. If you would like to have a default width of images inserted in the RTE, you could enter there :

RTE.default.buttons.image.options.magic.maxWidth = 700
This gives the inserted image in the RTE maximum 700px width.

5. Insert image in RTE and set on click enlarge

After inserting the image, right click on it, choose "Image Properties" and check "Click-enlarge"


Source: http://www.training-typo3.com/2009/03/12/howto-enable-click-enlarge-images-in-the-rte/

Wednesday, March 17, 2010

How to Install Typo3?

So you have just downloaded the Typo3 and are eager to put up a simple website to see how it performs as a content management system?

Before you jump straight into Typo3 installation you need to mentally prepare yourself for frustration you might experience during your journey through the world of Typo3! Trust me, you may get very irritated and feel quite discouraged. There would be situations when you just can’t google-out the solution – don’t let them make you abandon Typo3 as too complicated. You can do pretty much everything with Typo3 which cannot be said for the other content management systems out there.

This post hopes to help you with certain issues we faced while learning Typo3.

This blog post adresses Typo3 4.1.5 installation on a Linux server environment using the main Install Tool. Tutorials for the “1-2-3 GO” can be found on: wiki.typo3.org/index.php/Typo3_Installation_Basics and
www.installationwiki.org/Typo3.

Purpose of the Main Install Tools is not just to install the Typo3 but to configure it in great detail and perform maintenance tasks. It can be overwhelming if you just want to start playing with the Typo3 ASAP. We would get you through only necessary steps.

You should have downloaded, uncompressed and uploaded both the source and the dummy package to the same folder.

Start the installation: /typo3/install/

The main Install Tool has ten sections of configuration options:

Ten sections of the Main Installation Tool
To access the Typo3 Install Tool you would need to create an empty file named ENABLE_INSTALL_TOOL (there is no file extension) and put it into „typo3conf“ folder.
The initial (default) password for the Typo3 Install Tool is joh316. Change this password later. This password is used ONLY for accessing the Typo3 Install Tool and NOTHING ELSE :).
  • (1) Basic Configuration
Not much to do here, main thing is to set up the database.
Don’t waste much time trying to get the image libraries to work if they won’t work straight out. If you plan to build modern lightweight sites you won’t really need TYPO3’s image processing capabilities. Also, they are not required for TYPO3 to function correctly, although they may add some flair.
  • (2) Database Analyser
Database Analyser can be confusing. Main point is that although you have created the database Typo3 still needs to create all the required tables.
To create the default set of tables you should click on the Update required tables “COMPARE” link.
You don’t need the other options at this point, so just go ahead to the next section.
  • (3) Update Wizard
You only need this section if you are upgrading a previous version of Typo3 installation. Just skip it now.
  • (4) Image Processing
As mentioned above, you can skip this section for now. Almost every Linux hosting package would come with the required libraries. Once again, they are not required for TYPO3 to function properly.
  • (5) All Configuration
You would find this section useful later, when you perhaps want to use UTF8 or tweak Typo3 to your specific needs. For now just go ahead to next section.
  • (6) typo3temp/, (7) Clean up database, (8) phpinfo(), (9) Edit files in typo3conf/ and (10) About.
Sections #6, 7, 8, 9 and 10 are all used for maintenance, diagnostic and informative purposes. You don’t need them right now.

You are done!

Source: http://blog.neotek.co.yu/tag/typo3-install-installation-tutorial/

Thursday, March 11, 2010

Develop your own TYPO3 Extensions

To change or add to TYPO3, which are separate parts of the program, called Typo3 extensions used. This can be downloaded to the user in the TYPO3 backend directly using an Typo3 extension manager from the so-called TER (TYPO3 Extension Repository) and install it.

Significant and widespread Typo3 extensions

    * Tt_news  (News System) Typo3 extension
    * Templavoila (templating) Typo3 extension
    * Rtehtmlarea (Rich Text Editor) Typo3 extension
    * Dam (Digital Asset Management) Typo3 extension
    * Static_info_tables (data on countries, languages and currencies; localized versions available)
    * Tt_products (Shop systems) Typo3 extension
    * Tt_news (Frontend User Registration) Typo3 extension
    * Ve_guestbook (guestbook) Typo3 extension
    * Human-realurl (To generate URLs) Typo3 extension
    * Th_mailformplus power and mail (form mailers)  Typo3 extension

Develop your own TYPO3 extensions

TYPO3 is internally controlled by various PHP arrays. They contain all the information needed to generate from the information stored in database content via TypoScript commands HTML code. In general, you can customize almost every issue, and many end settings on changes to the configuration of arrays. The resulting during the term of the PHP scripts on the web server memory needed is therefore irrelevant.

It is advisable to use the TYPO3 extension "kick start" with which a framework for the desired functions can be created automatically. Depending on your needs so you can choose front-or back-end extensions. The required functionality is usually here in the TYPO3 configuration array TCA involved. Extension contains the created files with fixed names which are automatically called, for example ext_localconf.php, ext_tables.sql and ext_emconf.php. The programmer needs only a single program in PHP functions, which often features that are already available, can be copied and adapted. After installing the extension reviewed TYPO3 automatically if necessary TYPO3 extension complies with standards.

The PHP source code that used to TYPO3 version 4.1 the syntax of PHP version 4 and version 4.2 PHP5, there is a rule of files, each containing a plug-in class. The programming is depending on the author rightly object or you can use the classes only in terms of modules. Each class file contains an integration of a so-called XCLASS at the end. These can range from extension developers themselves are defined with a particular naming scheme, and should be derived from the original class. You will always be used instead of the original class. However it is recommended instead of hooks XCLASS used. In an existing function using the function call is made to one or more other functions within TYPO3 extensions arbitrarily extensible.

With version 4.3, there is currently in beta release, comes the possibility of the development of new techniques rely on extensions that have been back ported from FLOW3. These include, among others, the Model-View-Controller framework that in TYPO3 4.3 is in the expansion extbase and the template engine.

Monday, March 8, 2010

What is Typo3 Templates?

The so-called template (typo3 template) is the heart of a CMS website. It consists of several files (HTML, CSS, images) to determine the basic structure and layout of the page. It will put special markings, which are later filled automatically by the CMS with the appropriate content. The overall visual appearance of an Internet presence can be defined in a single static template and thus guarantees a uniform build. Of course, but can if required also for different areas (eg pages of a presence, various templates) are created. Suppose you are planning an online magazine for different sports, for example, can the rubric of "Winter" a completely different layout and color system to get than the rubric of "Water."

We can create TYPO3 templates from
• New Design to TYPO3 templates
• PSD, AI or any other source design file to typo3 templates
• HTML templates to TYPO3 templates

There are many methods to implement Typo3 template.
1.    Standard Typo3 Templates
2.    Auto Parser Typo3 templates
3.    TemplaVoila Typo3 templates 

================================================
1.    Traditional templating
================================================

Defining the areas in your template whose contents or functionalities are to be dynamically replaced by your content inputted into Typo3 back end. To let TYPO3 know what parts of your template to replace you have to include special placeholders in the HTML template. Two types of placeholders are available for this: subparts and markers.      

Subparts are used in pairs to enclose sections of the HTML template that are replaced by the output of your TypoScript configuration.

The name of the subpart is enclosed by ### and subpart name is case sensitive.
Example:

… This text would be replaced by Typo3 …

Markers are enclosed by ###, they are used as single tags and distinction is made between upper and lower case. Example:
###BREADCRUMBS###

Main difference between the two is that you can enclose HTML comments inside subparts.

Because Typo3 front end creates HTML headers and tags you should insert subparts to let Typo3 know where your tags are. Your headers would be ignored, and you would use TypoScript to configure all stuff like contents, DOCTYPE etc

… your HTML code goes here along with further subparts/markers…

The HTML template should be prepared so that all resource paths refer to the directories in the file system in which they are stored, relative to the root directory. They should also be accessible from the File > Filelist module (e.g. fileadmin/images/…).

When you are done you can save the file with a tmpl extension and copy it to the server where your Typo3 installation resides.

at Template level we can edit in TSConfig as below

field = subtitle
subparts.HEADING = TEXT
subparts.HEADING.field = subtitle
subparts.CONTENT < styles.content.get
marks.FOOTER = TEXT
marks.FOOTER.value = Copyright notice....
===========================================
2.    Template Auto Parser/Modern Typo3 Template Building
===========================================

The modern approach to template building is to keep the site design separate from the site engineering. This is epitomised in templavoila!. A slightly earlier and more restrictive approach, which many users nevertheless advocate, is provided by the Template Auto Parser.

TYPO3 provides four page divisions which (if turned on) are traditionally configured separately and processed in order to generate a main, left, right and border "columns" for the page template.

The template auto parser removes the spatial relationships between these elements, and attaches them instead to ids in the HTML template. In this way, at least four variable content areas can be defined in any HTML page, without disrupting the HTML layout.

As with templavoila!, the content elements can be anywhere on the page; the key limitation is that, without hassle, only four such areas are available for the page, and this may not be enough. However, the HTML template can be designed with dummy content, enabling the work of the page designer to be separated from that of the site engineer.

This plugin can be used to read an HTML file, then automatically insert subpart-markers around parts with certain classes/ID's.
There are these objectives:
    * Allow an CSS based HTML-file including file-references, existing somewhere in fileadmin/.../ to be used directly as template by Typo3.
    * Keeping the original template file totally free of HTML-comments (which some editors might filter out by accident) and totally viewable with all references intact.

following steps are there

Template Creation
Enable the Auto-Parser
                Tell the Auto-Parser where to find your template
                Identify the parts youwant it to work on like header,body
                Identify the Divs you want it to work on
                Show Typo3 where to find things like the CSS & Graphics
                Tell the Auto-parser to generate content
                Configuring the Auto-Parser for main template:
              
Here we define which elements in the HTML that should be wrapped in subpart-comments:
              
elements {

                BODY.all = 1
                BODY.all.subpartMarker = DOCUMENT_BODY
              
                HEAD.all = 1
                HEAD.all.subpartMarker = DOCUMENT_HEADER
                HEAD.rmTagSections = Title
              
                TD.all = 1               
Map these to the Divs you want manged by Typo3

                DIV.id.nav-main = 1
                DIV.id.content = 1
                DIV.id.nav-supp = 1
                DIV.id.nav-announcement = 1
                DIV.id.nav-testimonial = 1
                DIV.id.nav-newsletter = 1
}

===================================
3.    Templavoila typo3 template
===================================
TemplaVoila is an extremely powerful templating engine for typo3. With it you can use virtually any html page(s) as the basis of the template(s) for your site, and change the template of any given page and its descendents very easily.

In particular the problems that TemplaVoila addresses are how to create more flexible page structures than currently known in TYPO3s concept of “columns”. Further, it integrates traditional templating on the content element level but with a far more flexible point-n-click style than seen before.

TV Definitions
---------------------
 The 2 main definitions to get used to are Data Structure (DS) and Template Object (TO)

    * The Data Structure (DS) says which fields are linked with the HTML template
    * A Template Object (TO says which HTML Elements are linked to which fields

The Typoscript Template
--------------
we can call Typoscript Template On the root page create by called it TV template, with the following code:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

Thursday, March 4, 2010

What is Typo3

TYPO3 is a free development framework for Web sites, which was originally developed by Kasper. TYPO3 is based on the PHP scripting language. As a MySQL database, but can also be used as PostgreSQL or Oracle. The system is powered by two teams, one for each version 4 and one for version 5, developed.

typo3techie, typo3 templates, typo3 extensionMany functions can be integrated with the extensions of its own programming without writing code. Currently over 4000 extensions are for the most part from other providers, and are available for free. Available include news, shop systems or discussion forums. The system for different languages and is used by a user and developer community care in the world. TYPO3 belongs together with Drupal and Joomla! of the most popular content management systems in the field of free software.

It is estimated that more than 300,000 copies worldwide TYPO3 is used. TYPO3 puts high demands on the performance and configuration capability of the server used. The training period for a website developer is several weeks to months, for an author or editor, usually a few hours. A developer who wants to set up a TYPO3 India website has become intensely involved in the rule with the configuration language, TypoScript.

Unlike commercial software, there is no support for TYPO3 by the manufacturer or developer, but by the user community (issue tracker, forums, News-/Mailing system) and a large number of web agencies. Some companies in India also specialize in creating websites in TYPO3, or hosting services will offer pre-loaded with TYPO3.0

TYPO3 is installed on a Web server and accessed with a Web browser. Apart from a browser is required to use any additional software. The use of TYPO3 is divided into three major areas: the creation of website designs, the configuration of TYPO3 and TypoScript by entering the site where the content can be done via drag and drop.

TYPO3 contains a so-called back end, which serves to maintain the website and a front end that serves as the home itself.

In TYPO3 "backend" maintained the website. Where content is created and edited. A text editor in which content, such as in a word processor (can be formatted eg Word), it just allows users without HTML knowledge to do editorial work. Alternatively, the process can also be directly displayed on the website (be the "front end"). This option provides a faster entry into the system.

Design and programming with TYPO3 can be made through the following elements:

  • Page tree: Changes in the structure and properties of the pages of a site
  • TYPO3 constants: Universally valid parameters
  • HTML template: HTML frame with known markers (for example, "# # # MARKER ###") and subpart (eg ""), the end of TYPO3 by various contents (site navigation, text, graphics, etc.) are replaced.
  • TypoScript template (see "template" - "setup"): This describes the internal configuration language is how to output TYPO3 content.
  • The output of pages without HTML templates - with pure TypoScript code - possible.
  • Extensions: creation of additional modules
  • PHP: The TYPO3 functions are written in PHP and can be realized by users who want additional special features, be amended or supplemented.
It should be emphasized that XCLASS functionality which allows developers to, each class has its own functions to override. There are, however, preferred hooks.

World best Web Content Management System (WCMS)

We are preferring Typo3 as world best WCMS. There are many sites with more than 5000 web pages working in Typo3.

Companies using TYPO3 for their websites.

TYPO3 is used in many place as CISCO, UNICEF, Air France-KML, The Economist, Total, Epson, BAYER, Ford, UNESCO, Audi, Philips, Handicap International, EDS or Bonjour Quebec.

Many fortune 500 companies using Typo3 for their web content management system(WCMS)

Banking (Local Bank in Poland corporate website)
http://www.bs.limanowa.pl/

Healthcare:
http://www.unicef.de/

IT and communication – EPSON
http://www.epson.at/

Cisco WebEx
Http://www.webex.com

Media
http://ads.economist.com/

FORD
http://www.fordintern.info/

UNESCO
http://www.unescobkk.org/