Портфолио фильтров может быть очень полезным для веб-сайтов, особенно когда есть много изображений, которые вы хотите показать пользователям. Всегда приятно хранить его в разных категориях и позволять пользователю играть с ними.
Но добавлять тег и div к сотням изображений определенно не весело. Наша цель сегодня — использовать PHP для создания портфеля фильтров, а не добавлять их вручную один за другим.
Логика такая: сначала у нас есть папка, содержащая все изображения портфолио. Это может быть так:
«активы-›img-›логотипы-›бизнес»
А в папке «бизнес» у нас есть несколько подпапок, чтобы поместить все изображения в разные категории, например:
Каждая подпапка содержит разные изображения в этой категории, и наша цель — использовать имена этих подпапок в качестве фильтров, а изображения в каждой категории будут добавляться автоматически. Давай сделаем это.
Я знаю, что люди ненавидят это, но мы собираемся использовать небольшой предварительно созданный файл javascript под названием MixitUp, я обещаю, что это очень простой, но мощный инструмент, см. демонстрацию здесь.
В их репозитории github уже есть очень подробное руководство по установке этого плагина, вы можете следовать любому из них.
Нажмите на эту ссылку git -> src, чтобы открыть репозиторий для файла javascript, загрузите и сохраните его в папке вашего ресурса.
Вы можете сделать это прямо перед закрывающим тегом body. Вероятно, у вас уже установлен Jquery, но на всякий случай.
Рекомендуется связать функцию Mixitup, пока ваш документ готов, поэтому добавьте ее после строк импорта.
Вот где начинается самое интересное! Я не буду делать какие-либо стили в этом уроке, так как вы всегда можете настроить его самостоятельно. Хорошо, во-первых, добавьте div в качестве контейнера вашего раздела портфолио фильтров, поэтому:
Затем нам нужно добавить эти кликабельные кнопки фильтра в только что созданный div. Мы можем добавить их программно, но, честно говоря, не так уж и плохо сделать это вручную.
Обратите внимание, что для этих тегов <a> вам необходимо следовать шаблонам MixitUp. По сути, в атрибуте класса вам нужно указать для него «фильтр», а в фильтре данных вам нужно указать, к какой категории он относится. Далее мы собираемся написать некоторый код PHP, чтобы перебрать папку назначения и обработать файлы в ней.
Код довольно прост, просто хочу обозначить пару вещей.
Сначала мы указали, с какими папками мы работаем, а затем использовали встроенные рекурсивные итераторы для циклического перемещения по папке.
Для каждого элемента, который мы нашли в каждой подпапке, $it->getSubPath вернет имя подпапки, а $it->getSubPathName вернет имя файла. Создайте div для каждого изображения и поэкспериментируйте с возвращенными параметрами, чтобы подогнать их под шаблон MixitUp.
Функция $it-›isDot() и регулярные выражения используются для фильтрации некоторых скрытых системных файлов, таких как «.DS_Store» и других, поскольку мы не хотим, чтобы они отображались в виде изображений.
Легко, верно? Если вам нравится этот пост, нажмите «Поделиться» и помогите людям, у которых есть такая проблема.
Первоначально опубликовано на https://www.loginradius.com.
