Лого форума для iPhone/iPad

Alex

Administrator
Команда форума
LV
0
 
На написание этого мануала, меня сподвиг , нашего уважаемого пользователя mms.
На Renita-дисплеях, плотность пикселей в 4 раза больше, чем на обычных. К примеру, блок на обычных дисплеях будет занимать область 300x100 пикселей, а на Retina-дисплеях тот же блок получит 600x200 пикселей. Подробнее можно ознакомиться в статье на .
В принципе, то что предложил mms, можно использовать, но этот способ немного искажает изображение для обычных экранов.
Почитав статьи по этому поводу, пришел к мнению, что лучше всего использовать для логотипа векторную графику, формат svg. Это метод дает самый качественный результат, т.к. графика будет выглядеть одинаково четко при любом приближении. Но не буду его касаться, так как не могу работать с вектором, да и большинство присутствующих тоже :).
Не буду останавливаться на других методах, о которых вы можете прочитать, перейдя по ссылке выше, опишу, как мне показалось, более интересный способ с использованием retina.js.
  1. Для начала сделаем логотип, если вам необходим лого размером 200х70 пикселей, то делаем его в двух вариантах, сначала для renita - 400х140 пикселей, с именем logo@2x.png, потом уменьшаем его (опять же это надо сделать правильно, читайте уроки по фотошоп) до размера для обычных дисплеев - 200х70 пикселей logo.png. Изображения лучше делать в формате PNG.
  2. Заливаем изображения на сайт. По умолчанию, логотип лежит в папке xenforo, вашего стиля.
  3. Скачиваем архив с файлами js, там их два обычный и сжатый, использовать можно любой, отличаются размером.
  4. Читаем .
  5. Применяем на своем сайте:
  • Создаем папку в директории js, с названием retina и заливаем в нее выбранный файл, retina.js или retina.min.js
  • Подключаем retina.js(retina.min.js) в шаблоне page_container_js_body

Код:
<script type="text/javascript" src="{$javaScriptSource}/retina/retina.js"></script>

В шаблоне logo_block находим:

Код:
 <div id="logo"><a href="{$logoLink}">
                <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
            </a></div>

И дописываем условие для альтернативного, х2, логотипа:

Код:
 <div id="logo"><a href="{$logoLink}">
                <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                <img src="@headerLogoPath" data-at2x="http://АДРЕС САЙТА/styles/ВАШ СТИЛЬ/xenforo/logo@2x.png" alt="{$xenOptions.boardTitle}" />
            </a></div>

Я указал полный адрес до логотипа х2 в папке по умолчанию САЙТА/styles/ВАШ СТИЛЬ/xenforo/logo@2x.png, если у вас другой путь, то укажите его.

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