21февраля,
2009
Как я делаю галерею в ModX

Уверен, что я не первооткрыватель, но всё же.
Есть готовый сниппет галереи — Maxigallery, но на мой взгляд он чересчур далёк от нормальной галереи.
Потому для вывода изображений я использую Ditto. Как оказалось, создать удобный шаблон, куда выводить уменьшенный вариант и вешать линк на полный размер при помощи Ditto очень просто. Если нет желания готовить маленькие версии картинок, то тут DirectResize в помощь, он делает это автоматически.
Собственно, о самом выводе.
Делаем в админке новый документ-контейнер «Gallery», где будут лежать все изображения галереи. Контейнер, потому что каждая фотография будет, как подраздел.
Задаём контейнеру необходимый шаблон, в шаблон же пишем вывод Ditto:

[!Ditto? &startID=`1` &tpl=`gallery_chunk` &sortBy=`menuindex`!]

Теперь пояснения:

&startID=`1` — это ID-номер контейнера, из которого будут браться вложенные документы для формирования галереи.

&tpl=`gallery_chunk` — шаблон (чанк) вывода предпросмотра и ссылки на полное изображение. Как его сделать, будет описано ниже.

&sortBy=`menuindex` — сортировать документы по порядковому номеру в меню. Выбрал именно этот вариант, потому что по дате не устраивает, а писать отдельные tv-параметры не вижу смысла, если уже при создании документа можно задать порядковый номер. Также можно ещё прописать &sortDir=`ASC или DESC`. ASC — по возрастанию DESC — по убыванию. По умолчанию DESC.

Чанк вывода «gallery_chunk»:

Он достаточно маленький. Для начала создадим два tv-параметра: [*image_preview*] и [*big_image*], на самом деле, называть можно, как угодно, главное вывести их в чанк «gallery_chunk». Задаём обоим «тип ввода» — Image и ставим галочку на тот шаблон, для которого хотим, чтобы они были доступны, сейчас это шаблон «gallery».
Затем делаем новый чанк, называем его «gallery_chunk». В него пишем:

<a href=[+big_image+]«„ rel=“lightbox» title=[+title+]"">
<img src=[+image_preview+]"" alt=[+title+]"" />
</a>

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

Пояснения:

подстановщики в Ditto пишутся не со *, а с +, но сути это не меняет, конечно.

href=[+big_image+]«„ — ссылка на большое изображение.

rel=“lightbox» — я любитель подключать для просмотра картинок lightbox, в ModX он есть предустановленный, можно вызывать его иначе, но я верстаю макеты, учитывая сразу его наличие.

title=[+title+]"" и alt=[+title+]"" — можно взять любое поле, заполняемое при создании очередной фотографии, title — для lightbox-а, а alt по стандарту и поясняющий текст к картинке.

src=[+image_preview+]"" — это, собственно, сама маленькая картинка.

Теперь заходим в админку и в документе «Gallery» создаём дочерний документ, назначаем ему шаблон gallery, потому что именно к нему привязаны эти два tv-параметра, при помощи которых будут выводиться изображения. Вписываем заголовок. Под текстовым полем появились ещё два поля для подгрузки картинок, загружаем маленькую картинку и большую. После сохранения уже работает.

P.S. Когда залогинены в системе, не пытайтесь смотреть работу лайтбокса через этот же браузер, скрипты блокированы. Откройте в другом браузере, либо скиньте логины.

P.P.S. Если использовать для этих целей DirectResize, то изображения грузятся прямо в поле основного содержимого документа, и маленькое изображение генерируется автоматически, отпадает надобность в дополнительных tv-параметрах.

6января,
2009
Два фона, height: 100% и больше

Я продолбался битых 4 часа, пытаясь выяснить, что делать с двумя блоками, которые должны минимально занимать 100% высоты экрана, а также растягиваться свыше 100%, если контента больше. В общем, новые сутки я встретил в компании кучи запущенных браузеров, непослушных блоков, чашки кофе, от крепости которого глаза лезут на лоб и нежелания спать, пока проблема всё же не будет решена.

Как обычно, всё началось с того, что вылез баг в ие6. С данной проблемой я уже сталкивался, когда верстал макет Ecoorganic. Там проблема решалась проще, потому что блоку с фоном, лежащим под всем контентом, а также выступающим снизу, если текста на странице мало, можно было задать минимальную высоту в фиксированном значении. В этом же случае, мне надо было полностью не зависеть от содержимого и размера окна.
Сделав стандартный набор в css для html и body:

<span>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}</span>

я также прописал для html и body этакий «быстрый хак» — _height:100%;. Утверждают, что IE6 неправильно обрабатывает высоту, потому подобная запись на него действует, как свойство min-height для новых и нормальных браузеров. Однако, нет. Работает оно вообще не так, и точно не так, как хотелось бы.
Второй фон, который должен был занимать ширину и высоту поверх первого на 100%, я положил в div с классом:

<span>.layout {
text-align: left;
background: url(images/bck_ill.gif) center center;
width: 100%;
height: 100%;
min-height: 100%;
_height:100%;
}</span>

Вроде как во всех браузерах нормальное отображение, кроме Firefox 2, как ни странно. Внутри div-а с классом .layout находились блоки с float, что дало обычный в этих случаях результат — div сложился и контент вывалился из блока, образовав огромную дыру в пару экранов под футером сайта.
Естественно, что используют в этих случаях, я использовал для блока overflow: hidden;. Overflow отсёк лишнее, и блок занял нормальную высоту 100%, а также стал растягиваться по высоте контента за 100% высоты. Но в IE6 это выглядело совсем иначе: overflow:hidden; срезал всё, что ушло за высоту 100%, скроллбар стал неактивен. В общем, превышать содержимое страницы больше, чем один экран, стало невозможно.
Вот за решением этой проблемы и поиском, а также ползуясь методом тыка, я провёл ещё пару часов.
Ответ нашёлся весьма спонтанно. Убрав свойства min-height:100% у html и body и добавив .layout-у свойство display: table. Избавился везде от «быстрого хака» — _height:100%;.
Обработка свойств, назначенных html и body не требует указания минимальной величины, чтобы блок продолжал тянуться, он занимает всё пространство, которое занимает контент.
У блочного элемента с классом .layout указанное свойство min-height:100% для нормальных браузеров заставляет его растягиваться на 100%, а свойство display:table;, соответственно, заставляет блочный элемент вести себя, как табличный, что корректно работает и в IE6, и в остальных браузерах.

Окончательный код CSS:

<span>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}</span>

body {
 background: #FDF6DE url(images/bck.gif);
}
.layout {
 background: url(images/bck_ill.gif) center center;
 width: 100%;
 height: 100%;
 min-height: 100%;
 display: table;
}

Окончательный код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Some site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="inside.css" type="text/css">
</head>
<body>
<div class="layout">
Content
</div>
</body>
</html>

Этот вариант вёрстки был проверен в браузерах: Firefox 2, Firefox 3, Google Chrome, Safari for Windows, Safari for Mac, Opera 9.24, IE7, IE6 — везде отображается корректно.
HTML и CSS успешно прошли валидацию.

23ноября,
2008
Схлопывающийся div

В принципе, достаточно много об этом написано, найдено решение давно.
В CSS для блока, который не имеет фиксированной высоты и в нём находятся элементы с float, прописывается:

overflow: hidden;

Это свойство по какой-то причине заставляет блок растягиваться на высоту элементов содержащихся внутри. Однако, это свойство работает в IE6, если блоку указана ширина. Если таковой не имеется, то в этом несчастном браузере не происходит никаких положительных изменений. Можно указать блоку, конечно ширину, либо в процентах, либо жёстко фиксированную. Однако, если у блока есть margin или padding, а надо, чтобы блок был во всю ширину страницы, то результат не заставит себя ждать — блок уползёт за границы экрана и появится горизонтальный скролл.
Но решение всё же есть — свойство блока display. То, которое не понимает Mozilla Firefox (Mozilla Firefox 3 уже понимает), но понимает IE6 — display: inline-block;
Это свойство заставляет в IE6 блок растягивать на нужную ширину и высоту.
Чтобы избежать лишних ошибок в других браузерах, подобные детали стоит вынести в отдельный цсс, и при помощи conditional comments подключить это свойство.

P.S. Иногда всё-таки оно не срабатывает(что бывает крайне редко) и блок схлопывается, после обычной перезагрузки страницы, всё встаёт на свои места.