Russian TYPO3 community Форум больше не используется. Присоединяйтесь к каналу #community-ru в Slack for TYPO3 community  

Вернуться   Russian TYPO3 community > Тематические форумы > TypoScript практикум

Ответ
 
Опции темы Опции просмотра
Старый 30.08.2013, 17:00   #1
alexk
Senior Member
 
Регистрация: 26.10.2007
Сообщений: 108
По умолчанию Галеря Bootstrap обработке

Написал более менее рабочий пример дефолтной галреи typo3 в обертке Bootstrap. Сразу хочу сказать, что данный TS не претендует на конечную версию и будет дорабатываться мной по мере необходимости.

Так же пока отсутствуют некоторые элементы обертки типа: Картинка в тексте и т.д.

В качестве основной обертки будем использовать fluid сетку,в исполнении UL и LI.
Ul - строка
LI - столбец
div.img_wrap - для дополнительных свойств
Код HTML:
<ul class="thumbnails ">
   <li class="span№"><div class="img_wrap"><a><img></a></div></li>
<ul>
Поехали:
Для начала определим некоторые нужные UserFunc:

1. Определяем количество столбцов (нам нужна инверсия т.к. мы можем использовать только четное кол-во столбцов)
Код:
tt_content.image.5 = COA
tt_content.image.5.10 = LOAD_REGISTER
tt_content.image.5.10 {
        bootstrapImageGrid.cObject = CASE
        bootstrapImageGrid.cObject {
                setCurrent.field = imagecols
                key.field = imagecols
                default = TEXT
                default.value = 1
                1 = TEXT
                1.value = 12
                2 = TEXT
                2.value = 6
                3 = TEXT
                3.value = 4
                4 = TEXT
                4.value = 3
		5 < 4
                6 = TEXT
                6.value = 2
		7 < 12
		8 < 12
                12 = TEXT
                12.value = 1
        }
}
2. Добавляем параметры обрезки для картинок в зависимости от кол-ва столбцов (я использовал примерны, что бы картинки не сильно искажались при изменении ширины экрана, вы можете задать свои)
Код:
tt_content.image.5.20 = LOAD_REGISTER
tt_content.image.5.20 {
        bootstrapImageWidth.cObject = CASE
        bootstrapImageWidth.cObject {
                setCurrent.field = imagecols
                key.field = imagecols
                default = TEXT
                default.field = imagewidth
                1 = TEXT
                1.value = 1000
                2 = TEXT
                2.value = 600
                3 = TEXT
                3.value = 600
                4 = TEXT
                4.value = 600
                6 = TEXT
                6.value = 600
                12 = TEXT
                12.value = 600
        }
}
3. Высота картинки. Тут немного сложно, лично я люблю когда все ровно, по этому я задаю высоту не самой картинки, а общую высоту обертки у которой стоит свойство overflow:hidden. Так у меня получается вполне ровный рядок картинок.
Код:
tt_content.image.5.30 = COA
tt_content.image.5.30 = LOAD_REGISTER
tt_content.image.5.30 {
        bootstrapImageHeight.cObject = CASE
        bootstrapImageHeight.cObject {
		stdWrap.insertData = 1
                setCurrent.field = imageheight
                key.field = imageheight
			default = TEXT
			default {
				if {
					value = 1
					isGreaterThan.field = imageheight
				}
				value = style="height:{field:imageheight}px"
			}
				
				
		}
}
И теперь код который мы вставляем в setup для замены свойств tt_content.image:

Код:
tt_content.image.20 {
        1.file.width.override.data = register:bootstrapImageWidth
		1.imageLinkWrap {
			enable.ifEmpty.typolink.parameter.import.data = TSFE:lastImageInfo|3 
			typolink.parameter.import.data = TSFE:lastImageInfo|3
			# TSFE:lastImageInfo|3 - выводит ссылку на картинки только из Temp
			stdWrap.dataWrap = |
		
		}
        rendering {
                ul {
					noRowsStdWrap.insertData = 1
					noRowsStdWrap.wrap = <ul class="thumbnails" > | </ul>
					imageRowStdWrap.dataWrap = <ul class="thumbnails" > | </ul>
					imageLastRowStdWrap.dataWrap = <ul class="thumbnails" > | </ul>
					oneImageStdWrap.dataWrap = <li class="span{register:bootstrapImageGrid}" ><div class="img_wrap" {register:bootstrapImageHeight}> | </li>
					caption {
							wrap = </div> |
							stdWrap.required = 1
							stdWrap.wrap = <div class="caption"><p>|</p></div>
					}
				}
				simple < ul
		}
		renderMethod = ul
        imageStdWrap.dataWrap = |
        imageStdWrapNoWidth.wrap = |
        imageColumnStdWrap.dataWrap = |
        caption.1.br = 0
		equalH.field = 
        layout {
				stdWrap.insertData = 1
                # above-center
                default.value = ###IMAGES######TEXT###
                # above-right
                1.value = ###IMAGES######TEXT###
                # above-left
                2.value = ###IMAGES######TEXT###
                # below-center
                8.value = ###IMAGES######TEXT###
                # below-right
                9.value = ###IMAGES######TEXT###
                # below-left
                10.value = ###IMAGES######TEXT###
                # intext-right
                17.value = ###IMAGES######TEXT###
				17.override = ###IMAGES######TEXT###
                # intext-left
                18.value = ###IMAGES######TEXT###
                # beside-text-right
                25.value = ###IMAGES######TEXT###
                # beside-text-left
                26.value = ###IMAGES######TEXT###
        }
}

tt_content.image.20.2 = RESTORE_REGISTER
tt_content.textpic.5 = < tt_content.image.5
tt_content.textpic.20.text.wrap =
tt_content.textpic = COA
tt_content.textpic {
	10 = COA
	10.if.value = 25
	10.if.isLessThan.field = imageorient
	10.10 = < lib.stdheader
	20  = < tt_content.image.20
	20 {
		text.10 = COA
		text.10 {
			if.value = 24
			if.isGreaterThan.field = imageorient
			10 = < lib.stdheader
			10.stdWrap.dataWrap = |
		}
		text.20 = < tt_content.text.20
		text.wrap =  |
		
		 layout {
				stdWrap.insertData = 1
                # above-center
                default.value = <div class="row-fluid"><div class="span12">###IMAGES###</div><div class="span12">###TEXT###</div></div>
                # above-right
                1.value = <div class="row-fluid"><div class="span12">###IMAGES###</div><div class="span12">###TEXT###</div></div>
                # above-left
                2.value = <div class="row-fluid"><div class="span12">###IMAGES###</div><div class="span12">###TEXT###</div></div>
                # below-center
                8.value = <div class="row-fluid"><div class="span12">###TEXT###</div><div class="span12">###IMAGES###</div></div>
                # below-right
                9.value = <div class="row-fluid"><div class="span12">###TEXT###</div><div class="span12">###IMAGES###</div></div>
                # below-left
                10.value = <div class="row-fluid"><div class="span12">###TEXT###</div><div class="span12">###IMAGES###</div></div>
                # intext-right
                17.value = <div class="row-fluid"><div class="span9">###TEXT###</div><div class="span3">###IMAGES###</div></div>
				17.override = <div class="row-fluid"><div class="span9">###TEXT###</div><div class="span3">###IMAGES###</div></div>
                # intext-left
                18.value = <div class="row-fluid"><div class="span3">###IMAGES###</div><div class="span9">###TEXT###</div></div>
                # beside-text-right
                25.value = <div class="row-fluid"><div class="span9">###TEXT###</div><div class="span3">###IMAGES###</div></div>
                # beside-text-left
                26.value = <div class="row-fluid"><div class="span3">###IMAGES###</div><div class="span9">###TEXT###</div></div>
        }
	}
}
Как я уже говорил, код сыроват, но для моего сайта хватило, если у вас есть пожелания или дополнения... буду рад увидеть!
__________________
Фанат TYPO!

Последний раз редактировалось alexk; 04.09.2013 в 21:56
alexk вне форума   Ответить с цитированием
Старый 05.12.2016, 23:54   #2
Manas
Senior Member
 
Аватар для Manas
 
Регистрация: 06.12.2006
Адрес: Санкт-Петербург
Сообщений: 239
Отправить сообщение для Manas с помощью ICQ Отправить сообщение для Manas с помощью Skype™
По умолчанию

Замечательное решение. Спасибо, буду использовать.
__________________
Дмитрий Васильев, "T3 студия"
По всем вопросам связанным с TYPO3, пишите пожалуйста сюда https://vk.com/t3studio
www.typo3.ru.net
Manas вне форума   Ответить с цитированием
Ответ


Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB code is Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
The first code sprint: Refactoring the TYPO3 Bootstrap RSS Bot Новости TYPO3 (на английском) 0 20.06.2012 19:54
Баг в обработке HTML шаблона (съедает теги) AnShLv Общие вопросы 36 27.05.2011 16:47


Часовой пояс GMT +4, время: 10:35.


Работает на vBulletin® версия 3.8.1.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot

Хостинг и техническая поддержка: TYPO3 Лаборатория