Иногда люди любят что-нибудь менять в своем окружении. Ну, там, мебель в комнате переставить или сменить прическу. Не все люди подвержены таким порывам, но многие. Я в том числе. В данном случае, поддавшись очередной волне желаний, решил поменять немного вид блога. Просто так…

Если кто читал мою страничку “О сайте”, тот, возможно, вычитал там, что дизайн для этого блога когда-то нарисовал Фоча, светлая ему память.

Чего там не написано, так это то, что Фоча отдал мне не просто какой-то конкретный макет, а весь проект целиком. Он включает в себя аж три различных версии сайта, каждая из которых не просто детально проработана во всех своих элементах, но еще и предлагается в нескольких модификациях:

То оформление, которое вы видели до сего момента, это была, вообще, “отступническая” версия, полная моей самодеятельности :-)

Когда задумался на днях, как бы мне изменить оформление блога, то самым логичным решением, в сложившихся обстоятельствах, было выкинуть к чертям свою “отступническую” версию и буквально использовать оригинальный Фочин проект. А именно, восьмую модификацию, его третьей версии:

Но это все, так… бла-бла-бла… Интереснее, наверное, рассказать про то, о чем просили меня читатели на протяжении последних лет.

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

Про всплывающие картинки…

Найти вменяемый попапер оказалось не так просто. Большинство из них представлет собой каких-то неповоротливых галерейных монстров. Не все могут работать в мобильных броузерах. Некоторые вообще на флеше. Но в итоге я нашел два, которые удовлетворири моим запросам. Но каждый имеет по маленькому изъяну. Первый глючит под хромом. Не всегда, но периодически. Второй не глючит нигде, но не умеет по клику в области картинки, показывать её в полный размер. Выбирая из двух зол, выбрал второй.

Если надо открыть картинку в полном размере, то пользователи Хрома могут просто ткнуть по всплывшему поапу правой кнопкой и в выпавшей менюшке выбрать “Open image in new tab”. Пользователи Файрфокса – аналогично, но у них этот пункт называется “View Image”. Пользователи Оперы тоже, подозреваю, могут как-то это сделать (лень ставить еще и Оперу, чтобы проверить). Пользователи IE… Ну, пользователи IE могут установить себе Хром, Файрфокс или Оперу – простите :-)

В основном, я масштабирую изображения для блога под размер 1024х768. Поскольку, у большинства читающих, мониторы уже давно имеют гораздо большее разрешение, то и без всяких извратов в попапе вы будете видеть изображение целиком (попапер подгоняет изображение под ширину окна броузера). так, что у основной массы читателей все должно быть хорошо.

Из мобильных средств, лично смог проверить только в своем антикварном айфоне (который еще 2G) – проверка пройдена успешно. Если уж этот попапер работает в таком динозавре, значит он будет работать практически везде.

Про ветвление комментариев…

Оно ограничено пятью уровнями вложенности. Могу сделать больше, но, во-первых, не очень уверен, что это нужно, во-вторых, шестой и далее уровень начнет превращаться в такие узкие колонки, что при небольшой ширине броузерного окна, они станут нечитабельными.

Появилось, так же, кое-что, о чем не просили, но оно теперь есть.

Про аватарки…

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

С аватарками – важный момент. Сам механизм моего блога не имеет функций управления аватарками пользователя. Можно, конечно, поставить какой-нибудь плагин, но это уже будет излишество. поэтому не ищите у себя в учетной записи, где поменять картинку. Нет там такого.

По умолчанию, ваш аватар будет браться с граватара. Кто там зарегистрирован – ок, значит ваши аватарки поттянутся сюда автоматически. Кто не зарегистрирован – зарегистрируйтесь. Оно пригодится не только у меня на блоге. Очень много ресурсов в сети пользуются централизованными аватарохранилищами. Там вы просто указываете свой eMail и привязываете к нему аватарку (можете с компа загрузить, можете из библиотеки готовых выбрать). Все. Остальное дело техники. Мой блог сам вас распознает и покажет аватарку.

Кому не хочется нигде регистрироваться – не партесь. Механизм вам автоматически сгенерирует, какую-нибудь рожу в качестве аватара… Она будет противной, но зато уникальной.

* * *

Как-то, вот так все… Еще по мелочи много чего надо причесать в шаблонах, восстановить “Файловый архив”, который я случайно поломал и т.п. Так, что ближайшие пару дней тут могут периодически открываться порталы в Ад, ехать разметка и выскакивать таинственные сообщения об ошибках – не обращайте внимания :-)

Комментарии:

Вы можете написать новый комментарий или ответить на уже имеющийся. Во втором случае, воспользуйтесь кнопкой "Ответить" под соответствующим комментарием.

  • maniac

    Если надо открыть картинку в полном размере, то пользователи Хрома могут просто ткнуть по всплывшему поапу правой кнопкой и в выпавшей менюшке выбрать “Open image in new tab”. Пользователи Файрфокса – аналогично, но у них этот пункт называется “View Image”.

    Можно и не открывать сначала попап, а кликать правой кнопкой прямо по тамбнейлу в странице. Ну или в том же FireFox щелчок средней кнопкой откроет картинку сразу в новом окне.

    попапер подгоняет изображение под ширину окна броузера

    Не только под ширину, но и под высоту. Она гораздо чаще является ограничивающим фактором. Я не в смысле, что с этим надо что-то делать, просто заметил.

    • Jim

      Да, чего-то я перемудрил с рекомендациями в новом окне. Конечно, оно и с превьюшке в посте точно так же откроет.
      Под “шириной” окна я имел в виду размер окна вообще. Неточно выразился, каюсь… И делать с этим точно ничего не надо. Первый из упомянутых попаперов, как раз это делает – подгоняет только по ширине. Из-за этого верх и низ картинки уползают за пределы экрана, что в убивает часть смысла показа картинки в попапе :-)

  • The-eBook

    Резиновый дизайн хорошо, но на большом экране строки текста получаются слишком длинными.

    А в пикселях нынче не кошерно указывать размеры текста, ввиду ошибок браузеров. Я бы заменил на “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;
    }

    • Jim

      > Резиновый дизайн хорошо, но на большом экране строки текста получаются слишком длинными.

      Поэтому, те, кого это беспокоит, не растопыривает окно броузера на весь экран. Иначе у них не только мой сайт, но и вообще больше половины всего интернета будет “слишком длинным” :-)

      > А в пикселях нынче не кошерно указывать размеры текста, ввиду ошибок браузеров.

      ОК. Заменил во всей таблице стилей размер шрифтов с px на em. Вот только для основного текста 1.05em делать не стал. Очень уж буквы становятся отвратными при таком значении. Как выбитые зубы :-)

      > Цвет Буквицы лучше сделать одного цвета с заголовком и ремнем

      ОК. Изменил.

      > Комментарии выровнять с основным блоком,

      Угу. Поправил…

      > А в общем – очень хороший дизайн.

      А то! Как говорится – сейчас таких уже не делают :-)
      Посмотрел дату последнего изменения в файле с макетом: Monday, ‎June ‎27, ‎2005, ‏‎3:25:58 PM

      > Еще бы левое меню сделать считываемым

      Что-то в этом есть. Мнда… ОК. Пускай пока так будет, как ты предложил…

      Спасибо за замечания!

    • maniac

      Я хочу встрять. Не знаю, почему, сто лет уже про эти темы не ругался. Но видя, как живучи Мифы Практической Вёрстки, меня просто ниазнанку выворачивает… Хотя от всего, что я скажу, визуально ничего не изменится. И прошу The-eBook не воспринимать это на свой счёт.

      font-size: 1.05em;
      min-width: 780px;

      Единица “em” зависит от размера шрифта, она через него определена. Поэтому указывать размер шрифта в em’ах бессмыслленно. Хотя, разработчики браузеров всю жизнь вынуждены мириться с тем, что пишут верстальщики, поэтому эта запись всё таки имеет смысл: размер шрифта пересчитывается в долях себя же. То есть вот это 1.05em эквивалентно просто 105%. Другое дело, что непонятно, зачем нужно это 5% увеличение от дефолтного размера. Поэтому Джим прав, написав 1em. Только это, очевидно, равно просто 100% и означает “оставить размер шрифта, как был”. А поэтому можно просто выкинуть это правило, и ничего не изменится.

      Дальше. Если наша задача сделать так, чтобы строчка не была слишком длинной, то почему же min-width? Конечно тут должен быть max-width. Но думаю, это просто опечатка. Интересней то, что мы хотим ограничить количество символов. И раз уже мы только что отказались от идеи указывать размер шрифта в пикселах, то какой же смысл max-width указывать в них? Получается, что если у кого-то будет стоять недефолтный размер шрифта (я знаю, что это странно), то у него в строке будет совсем другое количество символов. Собственно, именно для этого и придумали единицу em — чтобы указывать размеры элементов, зависящие от реального размера шрифта. Поэтому логичней писать не 780px (откуда вообще эта цифра?), а 50em (при текущем размере шрифта точный эквивалент будет 48.75em, но я округлил для красоты).

      • Jim

        > 780px (откуда вообще эта цифра?)

        Из конца 90-х. При распространенном тогда стандарте разрешения под 800х600, приходилось верстать под 780, оставляя 20 пикселей запаса под скроллер и оконные бордюры… Иначе горизонтальный скрол появлялся. Подобного рода цифры отпечатываются в сознании навсегда, как IDDQD и AT&DP9955555 :-)

    • maniac

      P.S. Какие, к чёрту, “ошибки браузеров” с размерами шрифтов в пикселах? Это в 2005 году последний раз имело хоть какое-то значение.

      • The-eBook

        Недавно было обновление Chrome, в нем заметил несколько ошибок. Не верно передается значение линии. Не верно происходит сглаживание шрифта и .05 я как раз рассчитал на потерю от сглаживания, хотя шрифты менее 12 px все равно показываются с потерей. То есть, это просто наблюдение за поведением браузеров.

        На мелком тексте видна потеря:

        Вот линия есть:

        Вот ее уже нет:

        • The-eBook

          К сожалению тег img у Джима запрещен. Иллюстрации не видны…

        • maniac

          Пытаться обойти это в стилях — это делать сразу на две фундаментальные ошибки:

          – Пытаться достичь допиксельной точности рендеринга. Это, во-первых, почти нереально, а во-вторых, что важнее, никому на самом деле не нужно. Люди не сравнивают рендеринг в разных браузерах, они просто воспринимают то, что видят. Тот же рендеринг шрифтов сильно отличается на Windows, Mac и на моей Ubuntu, например.

          – Править ошибки браузеров в стилях имело смысл, когда браузеры были очень разные и чинились очень медленно. Это давно не так. Всё, к чему это приведёт, это то, что починив что-то в одном конкретно взятом браузере, мы сломаем что-то в других, а потом забудем это убрать, когда разработчики это починят в самом браузере.

          • The-eBook

            В каком то смысле, это правда. Но так получается, что хочется сделать лучше. У Джима шрифты отображаются с засечками в Windows, а у меня по Maс OS X и iOS сглаживание шрифтов во всех браузерах идеально. Поэтому постулат о том, что нынче что-то изменилось к лучшему – не верен. Мы по-прежнему будет адаптировать свои сайты под желание сделать их лучше.

  • The-eBook

    > А то! Как говорится – сейчас таких уже не делают :-)

    Нет, не делают и такие материалы не публикуют! :-)))

  • The-eBook

    Кстати Джим! Так как сайт уже имеет огромный размер, то прописывание миниатюр уже затруднительно для записей. Предлагаю, как сделано у меня. Прописываешь процедуру в файле 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(); отвечает за вставку иллюстраций, остальное можешь сделать по своему вкусу.

    • The-eBook

      у тебя и коды съедает… если в исходнике сообщения то же самое, свяжись со мной, я тебе кину точный код.

      • Jim

        В исходнике то же самое, но не суть… Этот код я уже видел на суппорте вордпрессовом. Да… Вот он. Просто, я уже думал над подтягиванием превьюшек из первых фоток в анонсы на главной и отказался от этой мысли в итоге. Главным образом потому, что первая фотография у меня – не всегда та, что может олицетворять смысл поста. В будущих постах я бы еще мог заморочиться на эту тему, но не перепахивать же сотни уже имеющихся. Да и не уверен, что мельтешение картинок на главной – во благо…

Оставить комментарий:

Чтобы оставлять комментарии, вы должны авторизоваться.