Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

Koken - CMS для фотогалерей - Изменяем тему

В предыдущей статье был рассмотрен первый обзор этой cms. Хотя админка этой cms, на мой взгляд, бесподобна, то сами шаблоны тем, которые по умолчанию вызываются на сайт, не очень привлекательны. К тому же хочется внедрить свой фирменный стиль и так далее. В общем, будет дальше смотреть данную cms и подстраивать свою фотогалерею под свои нужды.

16.03.2013 20 комментариев 23 381 просмотров

В предыдущей статье был рассмотрен первый обзор этой cms. Хотя админка этой cms, на мой взгляд, бесподобна, то сами шаблоны тем, которые по умолчанию вызываются на сайт, не очень привлекательны. К тому же хочется внедрить свой фирменный стиль и так далее. В общем, будет дальше смотреть данную cms и подстраивать свою фотогалерею под свои нужды.

Кроме данного обзора и своего подсайта, я этой CMS пока не занимался. Поэтому знаний больше, чем в статьях на блоге, у меня нет. Поэтому ответить на все ваши вопросы я не могу. Но на официальном сайте создатели активно и оперативно отвечают на вопросы (по крайней мере, когда писалась эта статья). Мне за сутки обычно отвечали. Спрашивайте, пожалуйста, у них. Они гораздо больше меня знают о своей системе.

Содержание

  • Демо
  • Цикл статей по Koken
  • Постановка задачи
  • Создание своей темы
  • Активация новой темы
  • Ставим Lightbox в теме
  • Чистка сайта от ненужных элементов
  • Редактирование настроек сайта
  • Редактирование темы
  • Редактирование CSS

Демо

Демо

Цикл статей по Koken

Koken – CMS для фотогалерей – Первый обзор
Koken – CMS для фотогалерей – Изменяем тему (Вы ее читаете)
Koken – CMS для фотогалерей – Принцип перевода сайта
Koken – CMS для фотогалерей – Подключение комментариев

На данный момент галерея выглядит с прошлой статьи вот так:
koken27

Постановка задачи

Задача. Надо создать свою фотогалерею, чтобы на главной странице были отображены все фотографии, а при клике на какую-нибудь фотографию открывался Lihghtbox, который бы в режиме AJAX подгружал другие фотографии. Также нужно внедрить фирменную символику.

Непосредственно первую часть не решает ни одна из тем данной cms (даже уточнил у разработчиков). Скорее всего это связано с тем, что в первую очередь CMS рассчитана на сложные фотогалерея с несколькими альбомами. Но хороший Lightbox там есть. Только он отрывается странно в темах, где он есть. Вначале надо щелкнуть по фотографии, потом она откроется в отдельном режиме просмотра одной фотографии, а потом только запускает Lightbox, то есть на одну операцию больше. Исправим это, создав свою тему.

Создание своей темы

  1. Идем в папку /storage/themes/
  2. Копируем папку той темы, которая Вам больше приглянулась и которая ближе всего к тому, что Вы хотите по структуре фотогалереи. И обзываем папку как-то по своему (без пробелов). Например, я буду изменять ту же тему regale, за которую взялся в прошлой статье.
  3. koken28

  4. Открываем файл info.json в папке темы и меняем там данные нашей темы. В первую очередь меняйте имя темы на своё уникальное. Было:
  5. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
    "name": "Regale",
    "version": "1.1.2",
    "description": "Regale is a bold, assured theme that fluidly scales content across the entire browser window for larger than life photos. Includes a basic header and footer navigation, social media links, plus a configurable grid layout that allows you to control spacing and column count. Single photos presented on the content page are scaled as large as they can go for maximum impact. Theme preview photos by Daniele Zedda.",
    "demo": "http://koken.me",
    "author": {
    "name": "Koken",
    "link": "http://koken.me"
    },
    "koken_version_required": "0.5.0",

    Стало:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
    "name": "Regale - Harrix version",
    "version": "1.0",
    "description": "Модифицированная тема Regale движка Koken для фотогалерей. Модификация сделана http://harrix.org",
    "demo": "http://halo.harrix.org",
    "author": {
    "name": "Harrix",
    "link": "halo.harrix.org"
    },
    "koken_version_required": "0.5.0",

  6. Удаляем файл koken.guid из папки с темой новой. Это обязательно.
  7. Потом, когда настроите тему (или сразу), поменяйте файл preview.jpg на свою превьюшку темы. Но это необязательный шаг. Я пока это делать не буду.
  8. Если Вы копировали на комп себе, то теперь обратно залейте папку новой темы в папку /storage/themes/ на Вашем домене.

Активация новой темы

  1. Зайдите в админку вашей фотогалереи [домен или папка]/admin и перейдите в раздел Site:
  2. koken29

  3. А там подраздел Themes (внизу):
  4. koken30
    О! Пока я писал статью, вышли обновления стандартных тем. Обновите и Вы, если видите такую надпись.

  5. А теперь спуститесь вниз и найдите свою тему:
  6. koken31

  7. Выберите ее и активируйте:
  8. koken32

  9. И примените изменения к сайту:
  10. koken33

  11. Вуаля! Теперь Ваша фотогалерея находится под управлением новой темы, которую мы будем дальше изменять под себя. Не рекомендуется изменять стандартные темы, без создания новых, а то все изменения слетят при обновлениях стандартных тем.

Ставим Lightbox в теме

Небольшая поправка. Я откладывал в этом месте написание статьи на несколько дней по техническим причинам. За это время вышло еще одно обновление Koken, в котором были исправлены некоторые места, которые мне не нравились. И это замечательно! Так как я переустанавливал еще движок, то не удивляйтесь, что фотографии будут другими. Это не важно – всё остальное точно такое же, как и было раньше.

Сама тема представляет набор множества файлов, которые потом интерпретируются движком по своим правилам, поэтому в коде этих файлов Вы найдете много нестандартных тэгов и команд вперемешку с обычными тэгами html.

Итак, на данный момент, наш сайт выглядит вот так:
koken35
При клике на фотографию загружается фотография отдельно:
koken36

Исправим ситуацию.

  1. В папке нашей темы находим файл inc/grid.html. Он отвечает за прорисовку сетки фотографий в режиме Content:
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <koken:include file="js/grid.js" />
     
    <div id="grid" class="col-{{ settings.grid_col_num }}">
    <div class="column"></div>
    </div>
     
    <koken:loop>
     
    <div class="item">
     
    <koken:link>
     
    <koken:img lazy="true" fade="true" />
     
    </koken:link>
     
    </div>
     
    </koken:loop>

  3. Находим строчки, отвечающие за отображение фотографии и ссылки для него:
  4. 1
    2
    3
    4
    5
    <koken:link>
     
    <koken:img lazy="true" fade="true" />
     
    </koken:link>

  5. И меняем их на одну строчку, отвечающую за показ Lightbox:
  6. 1
    <koken:link lightbox="true"><koken:img /></koken:link>

  7. Сохраним и перенесем на сервер. Если мы сейчас откроем сайт, то ничего не изменится, так как тему нужно применить измененную. Почему то это в движке не продумано – нет кнопки принудительного просмотра изменений. Можно вначале поставить другую тему, а затем эту. Но я предлагаю по другому. Переходим в режим Site и щелкнете по настройкам темы (шестеренка справа наверху).
  8. koken37

  9. Сдвиньте ползунок параметра Header pad top и примените изменения, а потом верните обратно и опять примените изменения:
  10. koken39

    koken38

  11. И теперь наш сайт поменял свою работу. Если мы кликнем по фотографии на главной странице, то увидим уже Lightbox, как в нормальных галереях:
  12. koken40

Чистка сайта от ненужных элементов

У нас уже есть отличный фотосайт, но будем доводить всё до ума. Но есть некоторые элементы, которые мне не нужны (Вам могут и пригодиться).

  1. Мне не нравится наличие вот этих ссылок:
  2. koken41
    Пока ничего не хочу добавлять: альбом будет только один, текстовых заметок не хочу добавлять. Удалим.

  3. В разделе сайт посмотрим на левую панель. В ней находятся те самые ссылки и ссылки в “подвале”:
  4. koken42

  5. Если щелкнете по шестеренке, то увидите, что сссылку можно удалить, переименовать или сделать главной на главную страницу сайта.
  6. koken43

  7. Мы же всё удалим, плюс из футера тоже всё нафиг удалим. И применим изменения:
  8. koken44

  9. Не беспокойтесь, если Вам потом эти ссылки будут нужны, то через Add Links… всё добавите:
  10. koken45

  11. Внизу еще остались социальные кнопки:
  12. koken46

    Открываем файл inc/footer.html и комментируем кнопки (а вдруг потом захочется?). Вы, наоборот, можете новые социальные приблуды добавить или что-то своё.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    </div> <!-- close container -->
     
    <footer class="main">
     
    <span class="copyright">
    {{ site.copyright }}
    </span>
     
    <koken:navigation group="footer" />
     
    <koken:if true="settings.show_social">
    <div class="social">
    <!--<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>-->
    </div>
    </koken:if>
     
    </footer>
     
    </body>
     
    </html>

    И также примените изменения к теме, как я выше писал.

Вроде почистили от мусора:
koken48

Редактирование настроек сайта

Теперь можно заняться редактированием настроек сайта.

  1. Заходим в настройки Settings:
  2. koken47

  3. В первом пункте Console Вы можете только поменять часовой пояс.
  4. В пункте Administrator Вы меняете системные параметры, которые назначали при установке. Из интересного, Вы можете вставить ссылки на Twitter и Facebook (для удаленных ссылок из “подвала”):
  5. koken49

  6. В разделе Uploading настройки для загрузки фотографий и видео. Ничего интересного. По умолчанию и так всё в порядке:
  7. koken50

  8. В разделах Applications, System, Plugins тоже нет ничего интересного:
  9. koken53

    koken51

    koken52

  10. Ну и раздел Publishing. Самый интересный для нас:
  11. koken54

  12. В пункте Site title введите имя своего сайта, а то пока оно в виде Вашего имени и фамилии. А в пункте Site tagline подпись к названию сайта (в некоторых темах присутствуют).
  13. koken55
    koken56

  14. В трех других пунктах аналогично:
  15. koken57

  16. Остальное меняйте по своему усмотрению. Я не трогал. И не забудьте сохранить изменения.
  17. koken58

  18. В итоге получаем такой сайт:
  19. koken59

Редактирование темы

Теперь настроим тему под себя инструментами самого движка

  1. Зайдите в раздел Site и справа нажмите шестеренку:
  2. koken60

  3. Первый блог позволяет менять отступы и положение названия сайта и верхушку сайта. Я выставил такие:
  4. koken64

  5. В следующем блоке Вы редактируете заголовок. Он может быть или в виде текста:
  6. koken62
    либо в виде рисунка, который предварительно загружается, так как там только url его указывается:

    koken65

  7. В следующих частях настраивается параметры шрифтов и социальных кнопок (ой, а может и не надо было комментировать?):
  8. koken66

  9. И далее настраиваются цвета текста, ссылок и фона. Я выбрал такие цвета:
  10. koken67

  11. Не забудьте сохранить изменения:
  12. koken68

  13. И теперь наш сайт выглядит вот так:
  14. koken69

Но есть недостатки, которые не убрались средствами движка:

  • Фоновые рисунки я бы поставил, а не только цветом.
  • Подчеркивается логотип линией как для ссылок.
  • Рисунки я бы надвинул бы на сам логотип.
  • Футер бы сделал не приклееным к низу окна браузера.

Редактирование CSS

Значит, надо доредактировать средствами CSS вручную. По способу настройки можно найти информацию в статье создателей движка.

  1. В режиме Site находим снизу слева Custom CSS:
  2. koken70

  3. И появляется окно добавления CSS кода:
    koken71
  4. В настройках темы, как я делал выше поменял параметр Inside pad на 10px. Это такое отступление:
  5. koken73

  6. Ну, а в блок CSS я вставил следующий текст:
  7. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    body {
    background-image:url("body.png");
    }
    header.main {
        background-image:url("body.png");
        margin-bottom:-60px;
    }
    footer.main {
        background-image:url("body.png");
        position: relative;
        height:50px;
    }
    a {
        border-bottom: 0px;
    }
    div #grid {
        margin-left:100px;
        margin-right:100px;
    }
     
    div#grid div.column a {
        margin-bottom: 25px;
        margin-right: 30px;
    }

    Разумеется, что файл body.png я скопировал в корень домена, где находится Koken: http://halo.harrix.org/body.png.

    И не забудьте сохранить изменения.

  8. Как я искал нужные элементы, чтобы понять, что и как в CSS менять? В Chrome выделял объект, который хочу поменять, правый клик мыши, и шел Посмотреть код элемента, и там уже искал свойства и имена элементов. Например, ниже я искал свойства картинки в как элемента сетки:
  9. koken72

  10. В итоге мы получаем всё, что нужно:
  11. koken74

Осталось еще два момента:

  • Перевод полученного сайта.
  • Внедрение системы комментариев.

Но, это уже другая статья.

Помните, что при выборе другой темы,все изменения не сохраняются. Вам придется их заново вбивать. Так что сохраняйте у себя на компе.

Статьи по теме:

  1. Koken - CMS для фотогалерей - Первый обзор
  2. Koken - CMS для фотогалерей - Принцип перевода сайта
  3. Koken - CMS для фотогалерей - Подключение комментариев
  4. FAQ по ReadyScript 2

Web программирование CMS, Koken, Фото

© 2014 Harrix