"Военный альбом" периодически дорабатывается, вносятся небольшие изменения, о которых нет смысла писать отдельные анонсы. Тем не менее, как оказалось, посетители замечают нововведения и иногда считают изменения привычных вещей ошибками. Кроме того, некоторые изменения, хотя и мелкие, являются довольно интересными. Поэтому я решил вести этот лог технических изменений сайта.
***
Технические параметры "Военного альбома":
- CMS: Wordpress
- Тема оформления: собственная Waralbum
- Веб-сервер: nginx
- Сервер: 2 x Intel Xeon L5630, 24 ГБ RAM, 4 x 1 ТБ ГБ HDD
- Хостинг: Selectel
Внесены косметические изменения в форму поиска в шапке сайта: заменена иконка поиска, подправлен CSS-стиль.
У постоянных посетителей форма может показываться некорректно из-за кэша браузера, нажмите Ctrl+F5.
На неделе внесены масштабные изменения в верстку дизайна и скрипты генерации страниц. Это практически не отразилось на внешнем виде сайта, но зато:
- Увеличилась скорость загрузки страниц;
- Уменьшен объем трафика пользователя;
- Улучшена индексация сайта поисковыми системами.
Среди изменений:
- Окончательно убрана устаревшая табличная верстка (кроме фрагментов, где нужно показать собственно таблицу). Анализ и выдача браузером страниц сайта стали понятными и логичными. Например, исчез давний баг, когда на странице результатов поиска контент был шире, чем шапка сайта;
- Сокращено количество счетчиков для сбора статистики. Удалены счетчики Google Analytics, Mail.Ru, Rambler. Оставлены только счетчики Яндекс.Метрики (экспертный уровень) и LiveInternet (более простая статистика + топ страниц сайта за сегодня, который транслируется на ВА);
- Сокращено количество Javascript-скриптов и CSS-стилей, вставляемых в страницу;
- В Wordpress отключено создание дублей страниц с фото;
- На страницах фото оптимизирован блок с дополнительной информацией о фото.
Для соответствия требованиям Федерального закона от 27.07.2006 №152-ФЗ «О персональных данных» опубликована Политика конфиденциальности персональных данных. Текст создан при помощи сервиса Tilda.cc, за что ему спасибо.
По той же причине добавлена нелепая функция уведомления об использовании cookies, текст в нем отражает недоумение о необходимости кого-то уведомлять о этом.
Продлял делегирование домена waralbum.ru на очередной год и обратил внимание, что домен waralbum.com свободен. На всякий случай зарегистрировал и его, поставил перенаправление с него на waralbum.ru.
Только у сайта появилась мобильная версия, а уже подъехало серьезное ее изменение - переделано мобильное меню (всплывающее по тапу на кнопке справа вверху экрана).
Как оказалось, плагин для Wordpress Groovy Menu, реализующий это меню, является форменным bloatware - у него огромные, под сотню килобайт, CSS-стили (к тому же вставляемые во все страницы сайта, а не только мобильную версию), а своими настройками он заспамил таблицу базы данных с полями фото (!), что очень усложнило работу с добавлением фотографий на сайт.
В связи с этим я заказал у фрилансера верстку аналогичного меню без всякого лишнего кода. Результат, по-моему, отличный - при том же функционале весь код уместился в 11 КБ, и размещен он только на мобильной версии. Разумеется, никакого вмешательства в базу данных для работы меню не требуется, весь спам плагина из нее удален.
Как всегда при изменениях верстки, для корректного отображения нового меню необходимо очистить кэш у мобильных браузеров.
В связи с оживлением аккаунтов "ВА" в соцсетях их иконки добавлены в подвал сайта.
Если они уехали влево или иным образом некорректно отображаются - нажмите Ctrl+F5 для очистки кэша браузера.
Нет предела совершенству :)
В URL-ах страниц раздела "Каталог фотографий" стандартное стремноватое "category" заменено на короткое и логичное "photo". То есть, к примеру, раздел "Лучшее" вместо waralbum.ru/category/best теперь имеет адрес waralbum.ru/photo/best.
Старые ссылки /category/ работают - перенаправляют на соответствующий раздел в /photo/.
Переделал блок "Похожие фотографии" на страницах с фото. Это был не очень-то хорошо читаемый список из пяти ссылок с крошечными превью фото, на которых было невозможно что-то разобрать. Теперь этот блок переехал ниже, ссылки превращены в отдельные прямоугольные блоки, расположенные в 2 строки. Превью фото увеличены почти в 6 раз - с 25x25 до 60x60, поэтому основные черты соответствующей фотографии по ним понять уже можно.
На мобильной версии сайта для нормального отображения на небольших экранах выводится 3 блока друг под другом.
Так как поменялись CSS-стили верстки страниц, нажмите Crl+F5 для их обновления в кэше браузера.
Сравнение блоков до и после, взяты фрагменты экрана одинакового размера для сохранения масштаба:
Было:
Стало:
Для фотографий, которые являются частью серии (в заголовке указано [1], [2], [3] и т.д., вот пример) добавил под описанием ссылки для перехода на другие фотографии серии:
Блок ссылок строится корректно, если у всех фото серии текст в поле "Заголовок" до квадратной скобки идентичен.
Внес улучшения в анонсированный выше блок ссылок на фото серии:
1. В блоке "Похожие фото" не показываются фото серии, чтобы не было дублирования ссылок в блоках "Серия фото" и "Похожие фото".
2. Исправлена ошибка, из-за которой ссылка на первое фото серии была некорректна, если у этого фото в заголовке не было "[1]".
Уточню, что открытое фото опознается как часть серии по наличию "[" в заголовке. Поэтому, если квадратной скобки в заголовке нет, то блок серии фото не строится, фильтрация "Похожих" (п.1 этого поста) также не производится. А вот на страницах [2], [3] и т.д. ссылка на первое фото будет, так как по заголовку с квадратной скобкой можно вычислить заголовок без [1].
Теоретически, я мог бы добавить код, чтобы при открытии любого фото проверялось наличие в базе фото с таким же названием, но и еще с квадратной скобкой в заголовке, и блок серии фото строился бы и в том случае, если для первого фото серии не стоит [1]. Но это означало бы десятки тысяч новых запросов к базе в день, только малая часть которых оказывалась бы полезной, что как-то неразумно. Оптимальнее не нагружать базу зря, а со временем проставить [1] там, где он нужен. А пока с первого фото серии, где нет [1], можно перейти на второе через блок "Похожие фото", ну а там уже блок серии будет показываться как надо.
В колонке справа снова появился блок с новостями сайта - которые теперь публикуются на этом форуме.
Если с момента публикации новости прошло менее двух недель, рядом с ее заголовком выводится слово "new" красным цветом.
В связи с новым логотипом поменял иконку сайта (favicon.ico) для браузера, а также сделал и прописал в код страниц сайта иконки для других приложений, например, под Android и iOS. Фигура кинооператора с логотипа смотрится в крошечных иконках невнятно, ограничился объективом камеры.
Нет предела совершенству - 2 :)
1. В блоке "Похожие фотографии" заголовки фото по длине теперь ограничены 90 символами (пример). Это ограничение и так есть при публикации новых фото, но оно действует только с февраля 2017 года, и многие более ранние фотографии имеют длинный заголовок. Теперь же блоки "Похожие фото" имеют одинаковый размер из-за стандартизированной длины заголовков, а полный заголовок можно посмотреть, если навести курсор мыши на превью фото.
2. В списках фотографий (главная страница, каталог фото) описания фотографий ограничены по длине для более аккуратного отображения списка фото. К описаниям, которые имеют больше текста, чем обычно, добавлено [...] - это намекает на то, что фото имеет смысл открыть на отдельной странице.
В результатах поиска такой формат описания не применяется - там этим делом управляет поисковая машина.
Добавил кнопки регистрации/входа на сайт через социальные сети и сервисы - ВК, Mail.Ru, Одноклассники, Twitter, Google. Пока нет Facebook - они приостановили авторизацию новых разработчиков в связи с COVID-19.
Если соцсеть при авторизации передает e-mail (ВК, Google), то есть ВА этот e-mail видит, и ваш существующий акканут на ВА с тем же e-mail, то в аккаунт на ВА можно входить через соответствующую соцсеть.
Анонс в новостях пока не делаю - надо протестировать на большом количестве разных учетных записей, я на тестовом сайте не все ситуации мог отловить.
Решил разобраться с багом - категория "Освобождение Франции" в "Западном фронте" упорно показывается последней в списке операций этого ТВД, несмотря на то, что в админке порядок выставлен правильно.
Та же ситуация с "Партизанской войной" в ВОВ. Но если ситуация с ней еще не так глаза режет, так как у нее точного места в хронологии операций ВОВ нет, ее можно и отдельно от других категорий показывать, то "Освобождение Франции" после Арденн и захвата Германии - это срамота.
Плагин для Wordpress, который делает специальную сортировку, брошен разработчиком очень давно, спрашивать не с кого. Поставил другой, аналогичный. Тот сортирует вроде бы нормально, но имеет другой баг - он странным образом ломает стандартную выдачу списка категорий для категории "Война" (почему именно для нее? не понятно), из-за чего на ее странице выводятся совершенно другие подкатегории. Пришлось написать программный костыль, который все же достает нужный список подкатегорий "Войны". В общем, вся эта система специальной сортировки категорий выглядит принципиально ненадежной и как бы не пришлось в итоге отключать ее и возвращаться к стандартному порядку сортировки - по алфавиту.
Вышла и установлена на сайте новая версия движка нашего форума - 1.7.5.
Содержит в основном мелкие изменения и исправления багов. Но есть одно интересное нововведение - появилась возможность добавлять новые вкладки в профиль пользователя. Я пока не изучал ее, но если там все спроектировано достаточно гибко для расширения, то можно будет написать программный код для вывода в профиле лент комментариев пользователя к фото и добавленных им фотографий, чего сейчас явно не хватает.
P.S. Тут же выпустили срочное обновление 1.7.6 с исправлениями багов.
P.P.S. Да что ж такое! Срочное обновление 1.7.7 с новыми багофиксами.
Изменения в дизайне сайта:
1. Увеличен размер шрифта в главной колонке сайта.
2. В качестве эксперимента (не уверен, что это правильно) убрано подчеркивание ссылок.
3. В списках фотографий (главная страница, категории каталога, результаты поиска) убран избыточный текст. А именно:
а) категория фото показывается только одна;
б) если в описании фото продублирован его заголовок, то заголовок вырезается при выводе описания, чтобы под фото не шло два одинаковых предложения подряд. Если в результате этого в качестве описания выводить нечего (заголовок и описание одинаковы), то на месте описания показывается время съемки (если оно указано).
