Помогите разобраться со стандартными элементами контентами

[Ивано++]

Про NEOS Дмитрий на своем блоге написал очень интересный момент:
http://dimaip.github.io/2015/06/15/about-neos-cms/
"Вы не представляете сколько всего можно сделать из четырех элементов: текст + заголовок + картинка + 12-колончатая сетка…"

Суть этого в чем вижу - Вы ставите стандартную TYPO3 и в принципе если не нужно особо больших заморочек в плане дизайна и т.д. - то у Вас уже есть все необходимо для наполнения вашего сайта (зоны контента, например из 1-ой колонки) из стандартных элементов контента.

Отбросив сетки (их в TYPO3 такой же великолепной реализации как в NEOS нет на сегодняшний момент) - в TYPO3 остаются:

- заголовок
- текст
- текст + картинка
- файлы
- список
- таблица
- специальное меню
- разделитель
- чистый HTML
- формы (их сюда не отношу, т.к. это можно использовать, но не всегда подходит)

Вот всего этого достаточно что бы делать наполнение сайта.
Все это можно модифицировать на основе TYPOSCRIPT конкретно под задачу (без создания новых элементов контента) - хотелось бы с этим более детально разобраться по каждому из стандартных элементов контента, как переопределить: как например для картинок добавить класс для увеличения изображения, как например вывести размер файлов для "файлы" и сделать обертку с подписью, что еще можно сделать?

Конечно проще создавать новые элементы контента.
Но речь идет именно о том, как переопределять стили и оформление для стандартных элементов контента?

С Fluid так понимаю вообще что бы добавить класс для картинок например, придется весь шаблон переделывать?

Спасибо.

[Manas]

Отбросив сетки (их в TYPO3 такой же великолепной реализации как в NEOS нет на сегодняшний момент)

В TYPO3 сетка ничуть ни хуже чем в неосе. К примеру вот готовый плагин http://typo3.org/extensions/repository/view/bootstrap_grids В конце концов и там и там вы можете сделать именно то что вам нужно. В Неосе например вы будете получать подобные "обертки", и зачастую это очень мешает.

<div class="typo3-neos-nodetypes-text">Some text...</div>

как например для картинок добавить класс для увеличения изображения

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
key.field = layout
default = TEXT
default.value = class="img"
1 = TEXT
1.value = class="img-rounded"
2 = TEXT
2.value = class="img-circle"
3 = TEXT
3.value = class="img-thumbnail"
}

Для элемента контента "список файлов" в TYPO3, я делаю, так чтобы значок типа файла автоматически "цеплялся" и можно показывать размер файла. Ниже слегка измененный tt_content.uploads из css_styled_content

# *****************
# CType: uploads
# *****************
tt_content.uploads = COA
tt_content.uploads {
10 = < lib.stdheader

20 = FILES
20 {
# get from file references:
references {
table = tt_content
fieldName = media
}

collections.field = file_collections

# get from path (backwards compatibility, contains strings like "fileadmin/user_uploads/")
folders.field = select_key

# render the files
renderObj = COA
renderObj {
10 = IMAGE
10 {
file.import.data = file:current:originalUid // file:current:uid
file.width = 24
file.height =30
file.transparentBackground = 1
stdWrap {
if.value = 1
if.isGreaterThan.field = layout

typolink {
parameter.data = file:current:originalUid // file:current:uid
parameter.wrap = file:|
target < lib.parseTarget
target =
target.override = {$styles.content.uploads.target}
removePrependedNumbers = 1
}
}
}

# icon
15 = IMAGE
15 {
file.import = {$template_path}/Resources/Private/Templates/fileicons/
file.import.data = file:current:extension
file.import.case = lower
file.import.wrap = |.gif
file.transparentBackground = 1
file.width = 24
file.height = 30
stdWrap {
if {
value = 0
isGreaterThan.field = layout

# only show the icon if we don't have a thumbnail:
isFalse.cObject = IMG_RESOURCE
isFalse.cObject.file < tt_content.uploads.20.renderObj.10.file
isFalse.cObject.stdWrap.if < tt_content.uploads.20.renderObj.10.stdWrap.if
}

typolink < tt_content.uploads.20.renderObj.10.stdWrap.typolin k
}
}

# filename
20 = TEXT
20 {
#data = file:current:name
data = file:current:description
htmlSpecialChars = 1
required = 1

replacement {
# equivalent to former useSpacesInLinkText = 0; remove using > to disable it
10 {
search = _
replace.char = 32
}

# equivalent to former stripFileExtensionFromLinkText = 0; move "_20" to "20" to enable it. Disabled by default.
_20 {
search = /(.*)(\..*)/
replace = \1
useRegExp = 1
}
}

typolink < tt_content.uploads.20.renderObj.10.stdWrap.typolin k

wrap = <span class="csc-uploads-fileName">|</span><br />
}

# description
/*
30 = TEXT
30 {
data = file:current:description
htmlSpecialChars = 1
wrap = <span class="csc-uploads-description">|</span>

required = 1
}
*/
30 >

# file size
40 = TEXT
40 {
if.isTrue.field = filelink_size
data = file:current:size
wrap = <span class="csc-uploads-fileSize">(|)</span>
bytes = 1
bytes.labels = {$styles.content.uploads.filesizeBytesLabels}
}

# wrap of each listed file with odd/even class
wrap.cObject = COA
wrap.cObject {
10 = LOAD_REGISTER
10 {
oddEvenClass = li-odd li-first |*| li-even || li-odd
elementClass = csc-uploads-element csc-uploads-element-{register:fileExtension}
elementClass.insertData = 1
}

20 = TEXT
20 {
value = <p class="file {register:oddEvenClass} {register:elementClass}">|</p>
insertData = 1
}
30 = RESTORE_REGISTER
}
}

# wrap around whole content element with <ul> and editIcons
stdWrap {
editIcons = tt_content: media, layout [table_bgColor|table_border|table_cellspacing|table _cellpadding], filelink_size
editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.filelist
prefixComment = 2 | File list:
dataWrap = |
}
}
}

Через Typoscript можно сделать очень многое.

[Ивано++]

Интересный материал...


А как быть с максимальной, минимальной шириной для картинок?

[Николай Сипко]

Интересный материал...


А как быть с максимальной, минимальной шириной для картинок?

*.css
=======
div#x img, div#xx img {
max-width : 100%;
min-width : 300px;
height : auto;
}

[Ивано++]

*.css
=======
div#x img, div#xx img {
max-width : 100%;
min-width : 300px;
height : auto;
}

Это не через Typoscript...

[Николай Сипко]

Это не через Typoscript...

Попу гармонь?

"CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит".
https://www.google.ru/search?q=css&ie=utf-8&oe=utf-8&gws_rd=cr&ei=pkoWVuGoOIHgyQOYqKDwCA

"TYPO3 представляет из себя систему управления содержимым на сайте, целью которой является отделение содержимого от дизайна, внешнего вида. TypoScript можно рассматривать как клей, заново объединяющий упомянутые части (содержимое и его внешний вид)".
https://wiki.typo3.org/Ru:Ts45min#.D0.9F.D0.BE.D1.87.D0.B5.D0.BC.D1.83_Ty poScript.3F

[Ивано++]

Для элемента контента "список файлов" в TYPO3, я делаю, так чтобы значок типа файла автоматически "цеплялся" и можно показывать размер файла. Ниже слегка измененный tt_content.uploads из css_styled_content.



По поводу файлов - это пример для TYPO3 6.1+?


Через Typoscript можно сделать очень многое.

Можно еще пожалуйста примеров.