Чтобы включить опцию увеличивающегося по щелчку изображения (click enlarge), идем в модуль расширений (ext manager).

Меню - "Расширения"

Далее переключаемся в режим отображения установленных плагинов (install extentions).

Режим установленных расширений

Находим в списке необходимый нам htmlArea RTE, и щелкаем по нему, таким образом переходя в настройки.

htmlArea RTE

Находим среди настроек нужный нам пункт «Enable click-enlarge on images» и ставим галочку и жмем Обновить (Update).

Опция "enlarge images"

Теперь переходим в настройки шаблона (template), открываем все настройки и переходим во вкладку includes. Там в «Include static (from extensions):» добавляем стандартный компонент расширения «Clickenlarge Rendering (rtehtmlarea)». Сохраняем шаблон.

Clickenlarge Rendering (rtehtmlarea)

Шаблон

Секция настройка

А синтаксис следующий:

1. С использованием объекта PAGE:
   page.100.file = путь_к_файлу/файл.php
2. С использованием объекта CONFIG:
   config.includeLibrary = путь_к_файлу/файл.php

Возможно кто-то сталкивался с проблемой качества изображений, размер которых был изменен движком typo3.  Многие считают потерю качества результатом работы библиотеки GD/GD2 или модуля ImageMagick. На самом деле это не так. В Typo3 есть специальная настройка качества JPG и PNG изображений. Для изменения данной настройки есть специальные ключи в модуле конфигурации.

Для настройки необходимо добавить/изменить следующие строки в файле конфигурации или в меню «All configuration»:

[GFX][jpg_quality] = 90
[GFX][png_truecolor] = 1

Сразу оговорюсь, статья не о том, какой замечательный хостинг у nic.ru, я не берусь судить ни их услуги, ни чьи бы то ни было еще.

Тогда зачем же нужна эта запись, спросите Вы….

Отвечаю:  пишу это, чтобы помочь некоторым людям, не любящим долго читать и искать, определиться с вопросом «Подойдет ли nic хостинг для typo3?» и «Сколько будет стоить тариф?«.

Не буду разглагольствовать, пишу по существу:

1. typo3 на хостинге nic.ru чувствует себя прекрасно.
2. Тариф 201.
3. Цена 330 рублей в месяц (с учетом НДС,  есть скидки при оплате за год)
4. ImageMagick на этом хостинге присутствует – никаких лишних запросов администраторам отправлять не нужно.
5. Конфигурация ImageMagick
   [GFX][im]=1
   [GFX][im_combine_filename]= composite
   [GFX][im_version_5]= im6
   [GFX][im_path]=/usr/local/bin/
6. Работает шустро

Иногда при создании шаблона сайта возникает необходимость задания определенных свойств элементов для каждого отдельного браузера. Ну для каждого – это я конечно погорячился. Скажем так: «отдельно для браузеров и отдельно для интернет эксплорера 6-7″.

Конечно, можно воспользоваться условными комментариями, java скриптом, css important, но бывают случаи когда проще и удобней заложить логику еще на уровне формирования HTML -данных.

Typo3 позволяет задать определенные условия при формировании шаблона. Сейчас рассмотрим самое простое средство – conditions (условия). Подробно conditions описаны в tsRef, там можно возможные значения и примеры, я прокомментирую лишь тоЮ что касается условия на браузер, ведь речь именно об этом.

Итак условие такого рода выглядит следующим образом:

[переменная = значение]
действия в случае истинности выражения
[end]

Замечательно то, что условия можно соединять логическими операциями AND (&&) и OR (||)

[переменная = значение] && [переменная2 = значение2] || [переменная3 = значение3]
действия в случае истинности выражения
[end]

В нашем случае переменной будет браузер (browser), значение в случае интернет эксплорера будет равно «msie». Так же необходимо контролировать версию браузера, для этого используем переменную version. В результате получаем такое вот условие:

[browser = msie] || [version < 8]
браузер – интернет эксплорер с версией ниже 8
[end]

Вот и все. Думаю стоит добавить, что благодаря conditions, мы можем контролировать многие пользовательские «переменные», например, операционную систему, тип устройства, значение user agent, язык, ip-адрес. Так же благодаря этим условиям, вы можете контролировать множество внутренних переменных системы, таких как текущее время, дата, уровень страницы в дереве, идентификатор страницы и т.п.

Чтобы задействовать эту функцию, Вам необходимо лишь заполнить соответствующее поле в настройках Вашего Template. Для этого выбираем в левом фрейме модуль Template, соответствующую Templat’у страницу и в правом фрейме указываем, что нас интересует «Info/Modify». Система показывает нам таблицу в которой на против «sitetitle:» и нужно ввести префикс.

Создание префикса в title страницы

Не забываем сохраниться.

Если Вам нужно, чтобы заголовок сайта выводился перед заголовком страницы, то в Template setup добавьте строку:

config.pageTitleFirst = 1

Удачных разработок!

Итак, нам нужно скачать typo3 с официального сайта, и выложить на ftp. Далее комментирую видео.

Набираем в адресной строке браузера «ваш домен/typo3/» таким образом мы начинаем установку. Система выдает сообщение о том, что средство установки в данный момент отключено. Сделано это для безопасности, чтобы никто не смог вызвать средство установки не имея доступа к ftp. Для включения Install Tool Вам необходимо создать пустой файл «ENABLE_INSTALL_TOOL» (файл не имеет расширения) и скопировать егов папку «ваш домен/typo3conf/».

После создания и копирования фала, возвращаемся в браузер и обновляем страницу. Система выводит стандартное предупреждение о том, что мы хотим устанавливать typo3 и т.п., мы робко читаем и жмем единственную кнопку OK.

Далее мы попадаем в «123″ режим установщика. Название режима говорит само за себя, установка происходит в 3 приема.

На первом шаге нам необходимо указать логин, пароль и адрес базы данных. Адрес зачастую остается дефолтным, т.е. «localhost».

Жмем продолжить (continue) и попадаем на 2 круг установки Здесь нам предлагают выбрать базу из существующих или ввести имя для новой базы. В данном случае мы выбираем уже доступную базу и жмем продолжить (Continue).

На третьей, последней стадии установки нам предлагают выбрать действия. Оставляем то что указано оп умолчанию т.е. «Create default database tables», что означает создать стандартные таблицы. Жмем Import Database и через некоторое время (система посылает ряд SQL запросов) попадаем на страницу которая предлагает нам перейти к настройкам, фронтэнду, бакэнду.

Жмем на Continue to configure TYPO3, чтобы продолжить настройку системы (нам еще необходимо сконфигурировать систему под utf8 так как мы хотим разрабатывать сайт на русском). На загрузившейся странице жмем All Configuration и попадаем в интерфейс задания системных переменных. Нас интересует [SYS][setDBinit] и [BE][forceCharset], устанавливаем им нужные значения (описано в статье по требованиям к бд typo3).

После вышеописанного можно входить в backend системы. Для этого набираем в адресной строке «ваш домен/typo3/». Для входа используем стандартный логин «admin» и пароль «password».

При входе, система сразу же покажет Вам предупреждения отмеченные в данной версии красным фоном. В данном случае их три:

1. Используется стандартный логин и пароль для install tool

2. Нужно проверить индексы базы

3. Используется стандартный логин и пароль для входа в backend

Нажимая на соответствующие ссылки мы переходим в модуль backend’a в котором можем произвести необходимые изменения, т.е. сменить пароль админа, поменять install tool пароль, переиндексировать базу данных. После каждого исправления не забывайте нажимать кнопку сохранить. Вернуться к стартовой странице backend можно просто обновив страницу.

После того как все угрозы устранены, переходим к русификации интерфейса. Для русификации нам нужно получить соответствующие переводы, в typo3 они устанавливаются как расширения, поэтому переходим к модулю Ext manager, что означает диспетчер расширений.

Сверху в комбобоксе в данном модуле мы выбираем Translation handling. Нашему вниманию предстает интерфейс для загрузки переводов с репозитория typo3. В списке выбираем родной язык и жмем Save Selection. Некоторое время система «думает», затем показывает 2 кнопки «Check status against Repository» – это на случай если мы ищем обновления перевода и «Update from repository» – обновить из репозитория. Жмем «Update from repository», видим оформленный в строгом стиле статусбар, и когда все становится зеленым, можем переходить к настройки языка текущего пользователя. Для этого выбираем модуль «User Settings» и в форме отвечающей за настройки текущего пользователя меняем Language с английского на русский. Жмем сохранить, обновляем страницу и видим, что большая часть интерфейса стала русскоязычной.

Вот и все.

Итак к сайтам (со временем буду добавлять, по мере возможности, более подробное описание):

1. http://knutarew-zahnarzt.de/

В глаза сразу бросается необычность дизайна. Вертикальное меню, да еще и с появляющимся подменю.
Здесь скрипт меню построен таким образом, что каждый пункт меню формирует отдельную ячейку таблицы, у последнего же пункта есть команда к завершению таблицы.

Слева расположена графическое изображение, на каждой странице – свое. Это реализовано по средствам templavoila. В структуре  шаблона описан объект image field. Таким образом при создании очередной страницы пользователь сразу же указывает отображаемое на этой странице изображение.

Тексты выводятся в блок с прокруткой.

Для отправки писем с формы страницы использована технология ajax, сама же форма создана как HTML объект в редакторе контента страницы.

На сайте две языковых версии, реализовано это по средством создания второй ветки сайта, а не стандартными средствами локализации предусмотренными в typo3.

Сайтмап сгенерирован как штатный объект контента системы typo3.

2. http://tcsb-partner.de/

Тут мы имеем дело с сайтом в одной языковой версии, нестандартный шаблон. Особый интерес, думаю, вызывает горизонтальное меню со скошенными краями.

Сделано это несложными методами. В шаблоне создан отдельный объект меню которое перечисляет страницы только третьего уровня. Каждая ссылка – изображение с указанным свойством float:left. Изображения без фона, с помощью указания свойства position:relative и margin-left:-XXpx, получен  требуемый эффект. Подсветка при наведении – изменяющееся изображение, т.е. изменяющееся свойство src у текущего объекта this.

Вертикальное меню думаю нет смысла комментировать, оно работает посредством javaScript.

Для отправки писем с формы страницы так же использована технология ajax.

Сайтмап сгенерирован как штатный объект контента системы typo3.

3. http://euroasiagmbh.com/

А вот это интересный сайт! Тут целых 5 языковых версий, притом нестандартное меню для их переключения. Тут на всю использована возможность языковой локализации. Заметьте, что переводятся так же ссылки в хедере и ногах сайта. Так же можно отметить интересные страницы с ассортиментом продуктов, тут так же использован JavaScript.

4. http://altip.ru/

Сайт под ключ. Из особенностей – верхнее меню отдельно от бокового (т.е. в шаблоне идет разделение: какие пункты в верху, какие слева). В боковом меню присутствуют разделы, это пункты меню оформленные как donotlink.

Итак практика:
1. Выбираем в левом фрейме «страницы» (page)
2. В дереве щелкаем правой кнопкой по нулевому уровню и выбираем в попап меню export to *.t3d
3. На вкладке «конфигурация» (configuration) выбираем нужные нам элементы.
4. На вкладке File & Preset вводим максимальный размер выходного фала в килобайтах.
5. Выбираем тип фала (t3d compressed или xml file). Я советую сделать бэкап в оба типа фалов, так будет гораздо надежнее, это поможет избежать возможных проблем с кодировкой.
6. Нажимаем «сохранить в файл» (save to filename). Можно нажать Download export тогда система сразу даст вам скачать созданный файл.
Все. Ваш файл поместится в зависимости от введенного имени относительно папки fileadmin/

Чтобы не попасть в нелепую ситуацию, лучше выполнить следующие рекомендации:
1. Сохраняйте файлы шаблона самостоятельно. Для перестраховки (Бывают проблемы при использовании Templavoila, например не сохраняются изображения, которые указаны как background в таблице стилей)
2. Делайте как t3d так и xml бэкапы. У меня возникала проблема с польским языком, после бэкапа в t3d из текстов исчезли специфические символы польского алфавита, в то время как в xml с кодировкой все было нормально. А вот файлы шаблона в xml не сохранились.

На видео показан пример по созданию полного бэкапа сайта. Комментарии думаю излишни, стоит отметить лишь огромную разницу между сжатым бэкапом и простым xml (390кб против 2 метров – это может быть немаловажным, если у вас огромный портал).

#настройка локализации
#указываем имя GET переменной с которой будет связан текущий язык
config.linkVars = L
config.uniqueLinkVars = 1
config.sys_language_overlay = content_fallback
#связываем значения GET переменной с конкретным языком
#указываем дефолтный язык
[globalVar = GP:L = 0]
#имя языка
config.language = De
#номер языка
config.sys_language_uid = 0
[global]

#настройка для значения =1 переменной GET['L']
[globalVar = GP:L = 1]
config.language = En
config.sys_language_uid = 1
[global]

[globalVar = GP:L = 2]
config.language = Fr
config.sys_language_uid = 2
[global]

[globalVar = GP:L = 3]
config.language = Sp
config.sys_language_uid = 3
[global]

[globalVar = GP:L = 4]
config.language = Pl
config.sys_language_uid = 4
[global]

#тут передается значение для объекта описанного в DS в случае если номер языка меньше 2
[globalVar = GP:L < 2]
bottom_werbe_link = TEXT
bottom_werbe_link.value = qwerty
[end]

#тут передается значение для объекта описанного в DS в случае если номер языка равен 1
[globalVar = GP:L = 1]
bottom_werbe_link = TEXT
bottom_werbe_link.value = qwerty
[end]

#Начало описания языкового меню
langmenu = HMENU
langmenu {
special = language
#указываем какие языки участвуют в меню
special.value = 0,1,2,3,4
#если нет перевода то язык = 0
special.normalWhenNoLanguage = 0
1 = TMENU
1 {
noBlur = 1
NO = 1
NO.linkWrap = <b> | </b>
#я использовал для каждого из 5ти языков свой флаг (иконку с флажком)
NO.stdWrap.setCurrent (
<img src=»fileadmin/template/newlevel/images/ln_de.jpg» onMouseOver=»this.src=’fileadmin/template/newlevel/images/ln_de_a.jpg’» onMouseOut=»this.src=’fileadmin/template/newlevel/images/ln_de.jpg’» width=»20px» height=»14px» border=»0″/> ||
<img src=»fileadmin/template/newlevel/images/ln_en.jpg» onMouseOver=»this.src=’fileadmin/template/newlevel/images/ln_en_a.jpg’» onMouseOut=»this.src=’fileadmin/template/newlevel/images/ln_en.jpg’» width=»20px» height=»14px» border=»0″/> ||
<img src=»fileadmin/template/newlevel/images/ln_fr.jpg» onMouseOver=»this.src=’fileadmin/template/newlevel/images/ln_fr_a.jpg’» onMouseOut=»this.src=’fileadmin/template/newlevel/images/ln_fr.jpg’» width=»20px» height=»14px» border=»0″/> ||
<img src=»fileadmin/template/newlevel/images/ln_sp.jpg» onMouseOver=»this.src=’fileadmin/template/newlevel/images/ln_sp_a.jpg’» onMouseOut=»this.src=’fileadmin/template/newlevel/images/ln_sp.jpg’» width=»20px» height=»14px» border=»0″/> ||

<img src=»fileadmin/template/newlevel/images/ln_pl.jpg» onMouseOver=»this.src=’fileadmin/template/newlevel/images/ln_pl_a.jpg’» onMouseOut=»this.src=’fileadmin/template/newlevel/images/ln_pl.jpg’» width=»20px» height=»14px» border=»0″/>
)
NO.stdWrap.current = 1

#описание для активного пункта меню
ACT < .NO
ACT.linkWrap = <b id=»activeImgCase»> | </b>

#описание пункта для отсутствующего языка
USERDEF1 < .NO
USERDEF1.linkWrap = <b id=»noLangImgCase»> | </b>
#не линковать, если отсутствует перевод
USERDEF1.doNotLinkIt = 1
}
}

#описываем основное меню (в данном случае описано двухуровневое javascript menu)
mainmenu = COA
mainmenu.10 = HMENU
mainmenu.10.1 = TMENU

mainmenu.10.1 {
noBlur = 1
ACT = 1
IFSUB = 1
ACTIFSUB = 1
expAll = 1
#    wrap = <table cellpadding=»0″ cellspacing=»1″ id=»menuTable»> | </table>

#Описание для обычных пунктов
NO.wrapItemAndSub = <div> | </div>
NO.ATagParams = onMouseOver=»showMenu(this)» onMouseOut=»hideMenu(this)»

#Описание для пунктов имеющих подменю
IFSUB.wrapItemAndSub = <div> | </div>
IFSUB.ATagParams = onMouseOver=»showMenu(this)» onMouseOut=»hideMenu(this)»

#Описание для активного пункта
ACT.wrapItemAndSub = <div> | </div>
ACT.ATagParams = onMouseOver=»showMenu(this)» onMouseOut=»hideMenu(this)»

#Описание для активного пункта с подменю
ACTIFSUB.wrapItemAndSub = <div> |</div>
ACTIFSUB.ATagParams = onMouseOver=»showMenu(this)» onMouseOut=»hideMenu(this)»

}
#описываем подменю
mainmenu.10.2 = TMENU
mainmenu.10.2 {
noBlur = 1
expAll = 1
wrap = <table id=»submenuTable» cellpadding=»0″ cellspacing=»0″> | </table>
NO.wrapItemAndSub = <tr><td> | </td></tr> |*| <tr><td> | </td></tr> |*| <tr><td> | </td></tr>

}

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
#описал скрытый input для хранения в нем номера текущего языка (для связи с javascript)
page.20 = TEXT
page.20.value = {GPvar:L}
page.20.wrap = <input type=»hidden» id=»inpLang» value=» | «/>
page.20.insertData = 1

#если id страницы 7, то включаем в header ссылку на java скрипт
[globalVar = TSFE:id = 7]
page.includeJS {
file1 = fileadmin/template/newlevel/scripts/send.js
}
[end]

#Если страница третьего уровня, то включаем в header ссылку на java скрипт
[treeLevel = 3]
page.includeJS {
file2 = fileadmin/template/newlevel/scripts/imgzoom.js
file3 = fileadmin/template/newlevel/scripts/create.js
}
[end]

#меняем дефолтный doctype на нужный нам
config.doctype = <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>