Разрыв шаблонов
Иногда люди любят что-нибудь менять в своем окружении. Ну, там, мебель в комнате переставить или сменить прическу. Не все люди подвержены таким порывам, но многие. Я в том числе. В данном случае, поддавшись очередной волне желаний, решил поменять немного вид блога. Просто так…
Если кто читал мою страничку “О сайте”, тот, возможно, вычитал там, что дизайн для этого блога когда-то нарисовал Фоча, светлая ему память.
Чего там не написано, так это то, что Фоча отдал мне не просто какой-то конкретный макет, а весь проект целиком. Он включает в себя аж три различных версии сайта, каждая из которых не просто детально проработана во всех своих элементах, но еще и предлагается в нескольких модификациях:
То оформление, которое вы видели до сего момента, это была, вообще, “отступническая” версия, полная моей самодеятельности 🙂
Когда задумался на днях, как бы мне изменить оформление блога, то самым логичным решением, в сложившихся обстоятельствах, было выкинуть к чертям свою “отступническую” версию и буквально использовать оригинальный Фочин проект. А именно, восьмую модификацию, его третьей версии:
Но это все, так… бла-бла-бла… Интереснее, наверное, рассказать про то, о чем просили меня читатели на протяжении последних лет.
Из особенно настойчивых просьб я запомнил две: чтобы фотографии в постах открывались в виде попапа, а не в окне и чтобы комментарии были древовидные. Вот, пожалуйста – и то и другое теперь к вашим услугам. Правда, есть некоторые нюансы.
Про всплывающие картинки…
Найти вменяемый попапер оказалось не так просто. Большинство из них представлет собой каких-то неповоротливых галерейных монстров. Не все могут работать в мобильных броузерах. Некоторые вообще на флеше. Но в итоге я нашел два, которые удовлетворири моим запросам. Но каждый имеет по маленькому изъяну. Первый глючит под хромом. Не всегда, но периодически. Второй не глючит нигде, но не умеет по клику в области картинки, показывать её в полный размер. Выбирая из двух зол, выбрал второй.
Если надо открыть картинку в полном размере, то пользователи Хрома могут просто ткнуть по всплывшему поапу правой кнопкой и в выпавшей менюшке выбрать “Open image in new tab”. Пользователи Файрфокса – аналогично, но у них этот пункт называется “View Image”. Пользователи Оперы тоже, подозреваю, могут как-то это сделать (лень ставить еще и Оперу, чтобы проверить). Пользователи IE… Ну, пользователи IE могут установить себе Хром, Файрфокс или Оперу – простите 🙂
В основном, я масштабирую изображения для блога под размер 1024х768. Поскольку, у большинства читающих, мониторы уже давно имеют гораздо большее разрешение, то и без всяких извратов в попапе вы будете видеть изображение целиком (попапер подгоняет изображение под ширину окна броузера). так, что у основной массы читателей все должно быть хорошо.
Из мобильных средств, лично смог проверить только в своем антикварном айфоне (который еще 2G) – проверка пройдена успешно. Если уж этот попапер работает в таком динозавре, значит он будет работать практически везде.
Про ветвление комментариев…
Оно ограничено пятью уровнями вложенности. Могу сделать больше, но, во-первых, не очень уверен, что это нужно, во-вторых, шестой и далее уровень начнет превращаться в такие узкие колонки, что при небольшой ширине броузерного окна, они станут нечитабельными.
Появилось, так же, кое-что, о чем не просили, но оно теперь есть.
Про аватарки…
Оказывается они давно уже были, но мой прежний шаблон содержал ошибку в вызове функции и они не рисовались. Теперь рисуются.
С аватарками – важный момент. Сам механизм моего блога не имеет функций управления аватарками пользователя. Можно, конечно, поставить какой-нибудь плагин, но это уже будет излишество. поэтому не ищите у себя в учетной записи, где поменять картинку. Нет там такого.
По умолчанию, ваш аватар будет браться с граватара. Кто там зарегистрирован – ок, значит ваши аватарки поттянутся сюда автоматически. Кто не зарегистрирован – зарегистрируйтесь. Оно пригодится не только у меня на блоге. Очень много ресурсов в сети пользуются централизованными аватарохранилищами. Там вы просто указываете свой eMail и привязываете к нему аватарку (можете с компа загрузить, можете из библиотеки готовых выбрать). Все. Остальное дело техники. Мой блог сам вас распознает и покажет аватарку.
Кому не хочется нигде регистрироваться – не партесь. Механизм вам автоматически сгенерирует, какую-нибудь рожу в качестве аватара… Она будет противной, но зато уникальной.
* * *
Как-то, вот так все… Еще по мелочи много чего надо причесать в шаблонах, восстановить “Файловый архив”, который я случайно поломал и т.п. Так, что ближайшие пару дней тут могут периодически открываться порталы в Ад, ехать разметка и выскакивать таинственные сообщения об ошибках – не обращайте внимания 🙂
Комментарии:
Можно и не открывать сначала попап, а кликать правой кнопкой прямо по тамбнейлу в странице. Ну или в том же FireFox щелчок средней кнопкой откроет картинку сразу в новом окне.
Не только под ширину, но и под высоту. Она гораздо чаще является ограничивающим фактором. Я не в смысле, что с этим надо что-то делать, просто заметил.
Да, чего-то я перемудрил с рекомендациями в новом окне. Конечно, оно и с превьюшке в посте точно так же откроет.
Под “шириной” окна я имел в виду размер окна вообще. Неточно выразился, каюсь… И делать с этим точно ничего не надо. Первый из упомянутых попаперов, как раз это делает – подгоняет только по ширине. Из-за этого верх и низ картинки уползают за пределы экрана, что в убивает часть смысла показа картинки в попапе 🙂
Резиновый дизайн хорошо, но на большом экране строки текста получаются слишком длинными.
А в пикселях нынче не кошерно указывать размеры текста, ввиду ошибок браузеров. Я бы заменил на “em”, причем на неточное значение.
body {
margin: 0px;
padding: 0px;
background: url(images/jtII_bgMain.png) left top;
font-family: Georgia, Times New Roman;
font-size: 1.05em;
min-width: 780px;
}
Цвет Буквицы лучше сделать одного цвета с заголовком и ремнем:
.letter { /* буквица */
font-size: 300%;
float: left;
color: #48270c;
padding-right: 3px;
line-height: 35px;
}
.linkD a {
color: #744d2d;
}
Комментарии выровнять с основным блоком, а то у тебя везде 20, а тут 10 почему то:
.jtII_contentTitle {
padding: 20px 20px 10px;
height: 51px;
}
А в общем – очень хороший дизайн. Еще бы левое меню сделать считываемым, а то оно выглядит общим текстом:
.jtII_widget-content li{
list-style: none;
border-bottom: 1px dashed #48270c;
padding-top: 6px;
padding-bottom: 6px;
}
> Резиновый дизайн хорошо, но на большом экране строки текста получаются слишком длинными.
Поэтому, те, кого это беспокоит, не растопыривает окно броузера на весь экран. Иначе у них не только мой сайт, но и вообще больше половины всего интернета будет “слишком длинным” 🙂
> А в пикселях нынче не кошерно указывать размеры текста, ввиду ошибок браузеров.
ОК. Заменил во всей таблице стилей размер шрифтов с px на em. Вот только для основного текста 1.05em делать не стал. Очень уж буквы становятся отвратными при таком значении. Как выбитые зубы 🙂
> Цвет Буквицы лучше сделать одного цвета с заголовком и ремнем
ОК. Изменил.
> Комментарии выровнять с основным блоком,
Угу. Поправил…
> А в общем – очень хороший дизайн.
А то! Как говорится – сейчас таких уже не делают 🙂
Посмотрел дату последнего изменения в файле с макетом: Monday, June 27, 2005, 3:25:58 PM
> Еще бы левое меню сделать считываемым
Что-то в этом есть. Мнда… ОК. Пускай пока так будет, как ты предложил…
Спасибо за замечания!
Я хочу встрять. Не знаю, почему, сто лет уже про эти темы не ругался. Но видя, как живучи Мифы Практической Вёрстки, меня просто ниазнанку выворачивает… Хотя от всего, что я скажу, визуально ничего не изменится. И прошу The-eBook не воспринимать это на свой счёт.
Единица “em” зависит от размера шрифта, она через него определена. Поэтому указывать размер шрифта в em’ах бессмыслленно. Хотя, разработчики браузеров всю жизнь вынуждены мириться с тем, что пишут верстальщики, поэтому эта запись всё таки имеет смысл: размер шрифта пересчитывается в долях себя же. То есть вот это 1.05em эквивалентно просто 105%. Другое дело, что непонятно, зачем нужно это 5% увеличение от дефолтного размера. Поэтому Джим прав, написав 1em. Только это, очевидно, равно просто 100% и означает “оставить размер шрифта, как был”. А поэтому можно просто выкинуть это правило, и ничего не изменится.
Дальше. Если наша задача сделать так, чтобы строчка не была слишком длинной, то почему же min-width? Конечно тут должен быть max-width. Но думаю, это просто опечатка. Интересней то, что мы хотим ограничить количество символов. И раз уже мы только что отказались от идеи указывать размер шрифта в пикселах, то какой же смысл max-width указывать в них? Получается, что если у кого-то будет стоять недефолтный размер шрифта (я знаю, что это странно), то у него в строке будет совсем другое количество символов. Собственно, именно для этого и придумали единицу em — чтобы указывать размеры элементов, зависящие от реального размера шрифта. Поэтому логичней писать не 780px (откуда вообще эта цифра?), а 50em (при текущем размере шрифта точный эквивалент будет 48.75em, но я округлил для красоты).
> 780px (откуда вообще эта цифра?)
Из конца 90-х. При распространенном тогда стандарте разрешения под 800х600, приходилось верстать под 780, оставляя 20 пикселей запаса под скроллер и оконные бордюры… Иначе горизонтальный скрол появлялся. Подобного рода цифры отпечатываются в сознании навсегда, как IDDQD и AT&DP9955555 🙂
P.S. Какие, к чёрту, “ошибки браузеров” с размерами шрифтов в пикселах? Это в 2005 году последний раз имело хоть какое-то значение.
Недавно было обновление Chrome, в нем заметил несколько ошибок. Не верно передается значение линии. Не верно происходит сглаживание шрифта и .05 я как раз рассчитал на потерю от сглаживания, хотя шрифты менее 12 px все равно показываются с потерей. То есть, это просто наблюдение за поведением браузеров.
На мелком тексте видна потеря:
Вот линия есть:
Вот ее уже нет:
К сожалению тег img у Джима запрещен. Иллюстрации не видны…
upd… Странно, а от имени простого юзера, действительно – нельзя… Покопаю завтра настройки, посмотрю, почему так. Вроде я ничего в этом плане явно не запрещал никогда…
Пытаться обойти это в стилях — это делать сразу на две фундаментальные ошибки:
– Пытаться достичь допиксельной точности рендеринга. Это, во-первых, почти нереально, а во-вторых, что важнее, никому на самом деле не нужно. Люди не сравнивают рендеринг в разных браузерах, они просто воспринимают то, что видят. Тот же рендеринг шрифтов сильно отличается на Windows, Mac и на моей Ubuntu, например.
– Править ошибки браузеров в стилях имело смысл, когда браузеры были очень разные и чинились очень медленно. Это давно не так. Всё, к чему это приведёт, это то, что починив что-то в одном конкретно взятом браузере, мы сломаем что-то в других, а потом забудем это убрать, когда разработчики это починят в самом браузере.
В каком то смысле, это правда. Но так получается, что хочется сделать лучше. У Джима шрифты отображаются с засечками в Windows, а у меня по Maс OS X и iOS сглаживание шрифтов во всех браузерах идеально. Поэтому постулат о том, что нынче что-то изменилось к лучшему – не верен. Мы по-прежнему будет адаптировать свои сайты под желание сделать их лучше.
> А то! Как говорится – сейчас таких уже не делают 🙂
Нет, не делают и такие материалы не публикуют! :-)))
Кстати Джим! Так как сайт уже имеет огромный размер, то прописывание миниатюр уже затруднительно для записей. Предлагаю, как сделано у меня. Прописываешь процедуру в файле function.php
/* Пока миниатюр */
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/files/no-image.gif.jpg”;
}
return $first_img;
}
if ( function_exists( ‘add_theme_support’ ) ) add_theme_support( ‘post-thumbnails’ );
/* /Показ миниатюр */
А потом вставляешь показ миниатюры там, где это нужно, например в файле archive.php
‘post_thumbnail’)); }
else { ?>
<div class="tumbr" style="border: 1px solid #333; margin: 0px 0px 10px 20px; float: right; width: 230px;height: 165px;background: url(http://путь к файлу, если нет иллюстрации/no-image.gif.jpg) 0 0 no-repeat;”>
Смысл операции в том, что она берет первую иллюстрацию в статье и делает ее небольшой пиктограммой. Вставка echo catch_that_image(); отвечает за вставку иллюстраций, остальное можешь сделать по своему вкусу.
у тебя и коды съедает… если в исходнике сообщения то же самое, свяжись со мной, я тебе кину точный код.
В исходнике то же самое, но не суть… Этот код я уже видел на суппорте вордпрессовом. Да… Вот он. Просто, я уже думал над подтягиванием превьюшек из первых фоток в анонсы на главной и отказался от этой мысли в итоге. Главным образом потому, что первая фотография у меня – не всегда та, что может олицетворять смысл поста. В будущих постах я бы еще мог заморочиться на эту тему, но не перепахивать же сотни уже имеющихся. Да и не уверен, что мельтешение картинок на главной – во благо…
Не хочешь первую, сделай случайную! Будет впечатление, что что-то все время меняется! 🙂
Так, вон, фотография слева вверху, под ссылкой на “Начало” – она как раз это самое и делает. меняется каждый раз на случайную и что-то все время меняет 🙂
Так может ссылку туда поставить, чтобы фотография заманивала, а текст расплачивался! 🙂
Да, у меня есть такая мысль. Но там придется механизм помогучее прикрутить под это дело. Чтобы он автоматически брал из случайного поста случайную картинку, обрезал/масштабировал, поворачивал на определенный угол, вставлял в рамку и рисовал под шапкой, формируя соответствующую ссылку… Надо сперва помедитировать над кодом вдумчиво. Когда-нибудь, в абстрактном “потом”…