Создание галереи изображений с помощью Symfony Flex настройка


Оглавление (нажмите, чтобы открыть):

Symfony Flex

Symfony 4 — это прорыв в фреймворк-строении, никогда еще не было так легко создавать приложения, любого формата будь это RestFull API, микросервис или просто сайт одностраничник!

Symfony 4 стал таким гибким благодаря использованию компонента Symfony Flex, который может быть подключен и к Symfony 3.4

Разработчики провели огромную работу, вы только представьте фреймворк из коробки стал весить на 70% меньше и стал еще быстрее. Без папки vendor, всего 16 файлов и

1800 строк кода.

Давайте запомним этот день 30 ноября 2020 года, дата релиза Symfony 4.0

Какие изменения произошли по сравнению с Symfony 3.4 ?

1. Стало больше стандартных идей, меньше «symfony-ideas». Например вместо точки входа web/app.php в Symfony 3, стал использоваться путь по умолчанию для веб-сервера public/index.php

2. Автоматическая установка пакетов с помощью Symfony Flex

3. Автоматическая регистрация сервисов, теперь не нужно отдельно в AppKernel.php регистрировать свои бандлы

4. Бандлов теперь нет. WTF? Теперь весь проект и есть бандл.

5. Symfony 4 позиционируется как micro-framework.

6. Автоматическое создание кода с помощью MakerBundle

Это были основные изменения, добавим немного магии. Теперь зависимости можно устанавливать по alias, например чтобы установить twig (шаблонизатор), нужно набрать следующую команду:

composer require template

В это время composer пройдет в Symfony Recipes Server и если найдет там подходящий «рецепт», то скачает и установит его, параллельно обновив зависмость в файле symfony.lock, по аналогии с composer.lock

В Symfony 4, появляется такое понятие как packets . Это репозиторий с единственный файлом composer.json . Его удобство в том, чтобы подключить к себе полноценную orm на проект, не нужно подключать несколько зависимостей, достаточно подключить packet. Например пакет orm-packet , с помощью него сразу подключаются все необходимые бандлы с необходимыми версиями.

  • doctrine/orm
  • doctrine/doctrine-bundle
  • doctrine/doctrine-migrations-bundle

И что важно, они не будут конфлитковать между собой. Если же нужно изменить версии бандлов, то пакет нужно удалить с помощью команды:

composer unpack orm

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

Flex: Составьте ваше приложение¶

После прочтения первой части этого туториала, вы решили, что Symfony стоит ещё 10 ваших минут. Отличный выбор! В этой второй части, вы узнаете о Symfony Flex: потрясающем инструменте, который делает добавление новых функций таким же простым, как выполнение команды. Он также является причиной того, почему Symfony идеален для маленького микро-сервиса или огромного приложения. Интересно? Отлично!

Symfony: Начните с микро!¶

Кроме случаев, когда вы строите чистый API (об этом позже!), вы скорее всего захотите отобразить HTML. Чтобы сделать это, вы будете использовать Twig. Twig — это гибкий, быстрый и безопасный шаблонизатор для PHP. Он делает ваши шаблоны более читаемыми и компактными; он также делает их более дружественными для веб-дизайнеров.

Twig уже установлен в нашем приложении? На самом деле, ещё нет! И это прекрасно! Когда вы начинаете новый проект Symfony, он маленький: только самые критично важные зависимости включены в ваш файл composer.json :

Это отличает Symfony от любого другого PHP фреймворка! Вместо того, чтобы начинать с громоздкого приложения с каждой возможной функцией, которая может вам понадобиться, приложение Symfony маленькое, простое и быстрое. И вы полностью контролируете, что добавлять.

Рецепты и дополнительные имена Flex¶

Так как же нам установить и сконфигурировать Twig? Просто выполните одну команду:

Две очень интересные вещи происходят за кулисами благодаря Symfony Flex: плагину Composer, который уже установлен в нашем проекте.

Во-первых, twig — это не имя пакета Composer: это дополнительное имя Flex, которое указывает на symfony/twig-bundle . Flex разрешает это дополнительное имя для Composer.

И во-вторых, Flex устанавливает рецепт для symfony/twig-bundle . Что такое рецепт? Это способ для библиотеки автоматически конфигурировать себя, добавляя и изменяя файлы. Благодаря рецептам, добавление функций незаметно и автоматизировано: установите пакет и вы закончили!

Вы можете найти полный список рецептов и дополнительных имён, зайдя на https://symfony.sh.

Что сделал этот рецепт? В дополнение к автоматическому подключению функции в config/bundles.php , он добавил 3 вещи:

config/packages/twig.yaml Файл конфигурации, который устаналивает Twig с разумными настройками по умолчанию. config/routes/dev/twig.yaml Маршрут, который помогает вам отладить ваши страницы ошибок. templates/ Каталог, в котором будут жить файлы шаблонов. Рецепт также добавил файл макета base.html.twig .

Twig: Отображение шаблона¶

Благодаря Flex, после одной команды вы можете незамедлительно начать использовать Twig:

Расширив AbstractController , у вас теперь есть доступ к перечню методов сокращения и инструментов, вроде render() . Создайте новый шаблон:

Вот и всё! Синтаксис << name >> отобразит переменную name , которая передаётся из контроллера. Если вы новичок в Twig, то добро пожаловать! Вы узнаете больше о его синтаксисе и силе позже.

Но, прямо сейчас. страница содержит только тег h1 . Чтобы предоставить ему макет HTML, расширьте base.html.twig :

Это называется наследование шаблона: наша страница теперь наследует структуру HTML из base.html.twig .

Профилировщик: Рай отладки¶

Одна из самых крутых функций Symfony ещё даже не установлена! Давайте это исправим:

Да! Это ещё один союзник! И Flex также устанавливает другой рецепт, который автоматизирует конфигурацию Профилировщика Symfony. Какой результат? Обновите!

Видите эту черную панель внизу? Это панель инструментов веб-отладки, и это ваш новый лучший друг. Наведя на на каждую иконку, вы можете получить информацию о том, какой контроллер был выполенен, инфромацию о производительности, удачи и неудачи кеширования и многое другое. Нажмите на любую иконку, чтобы зайти в профилировщик, где вы можете получить ещё более детализированные данные об отладке и производительности!

А, и по ходу установки новых библиотек, вы будете получать больше инструментов (например иконку панели инструментов веб-отладки, которая отображает запросы БД).

Использование профилировщика просто, так как он сконфигурировал себя сам благодаря рецепт. Что ещё мы можем установить так же легко?

Богатая поддержка API¶

Вы строите API? Вы можете уже с лёгкостью вернуть JSON из любого контроллера:

Но для действительно богатого API, попробуйте установить Платформу Api:

Создан новый проект Symfony 3.4 с использованием Flex — действительно ли это Symfony 3.4?

Вопрос:

Это Symfony 3.4 проект, созданный с помощью установщика Flex действительно Symfony 3.4 ? Или более «проект Symfony 4 с файлами ядра 3.4?


Полная история:

Я работаю над миграцией существующего Symfony 2.8 проект для Symfony 3.4 , Сначала я создал новый Symfony 3.4 проект с использованием установщика Symfony:

Структура файлов и папок немного отличается от Symfony 2.8 но в целом все довольно похоже. Было не так сложно перенести конфигурацию, файлы и т. Д. Из существующего проекта 2.8.

Однако после некоторых исследований я подумал, что было бы неплохо начать новый проект 3.4, используя вместо этого рекомендованный установщик Flex. Это дало бы мне новую структуру папок, которая также используется в Symfony 4 , что может упростить будущую миграцию на эту версию.

Конечно, структура каталогов отличается в этом проекте. Но не только папки разные, но и почти все. Как организована полная конфигурация, как определяются и управляются маршруты, как организованы пакеты (нет вообще), как определяются и используются параметры и т. Д.

Там почти ничего не осталось, что выглядит Symfony 3.4 , Это похоже на Symfony 4 установка, где только файлы в vendor/symfony/. с версии 3.4

Миграция проекта 2.8 в эту настройку была бы более сложной.

Конечно, я знаю, что многое изменилось в Symfony 4 в то время как Symfony 3.4 все еще очень похож на Symfony 2.8 , Но как это возможно, что два Symfony 3.4 установки так резко отличаются?

Я понял, что Flex — это новый рабочий процесс для управления проектами, но не должен быть конечным результатом — новым Symfony 3.4 проект — быть более или менее одинаковым независимо от того, какой рабочий процесс / установка использовался для его создания?

Flex более эффективен при настройке и управлении различными проектами. Однако я хочу настроить проект один раз и запустить его в течение нескольких лет. Есть ли какое-либо преимущество (в ближайшем будущем) в использовании подхода Flex?

Решение

Чтобы ответить на ваш первый вопрос: Да, проект Symfony 3.4, созданный с помощью Flex, действительно является проектом 3.4. «bin / console —version» проверит это.

Что касается структуры каталогов, Symfony пытается найти баланс между поддержанием обратной совместимости, но в то же время продолжает двигаться вперед и совершенствовать свой дизайн. Для получения информации о том, почему что-то было сделано, полезно следить за блогом Symfony и, возможно, посетить слабый канал. Особенно посты, когда Flex был представлен, а также новая структура каталогов.

Одна из целей Symfony — максимально упростить переход с долгосрочной версии поддержки на более новую версию. Следовательно, 2.8 в значительной степени идентичен 3.0, за исключением того, что множество устаревших функций было удалено. Если бы вы следили за вещами в то время, вы бы заметили, что между 2,7 и 2,8 произошел довольно большой скачок.

Мастер Йода рекомендует:  Те же грабли разбор частых ошибок новичков в программировании

То же самое для 3.4 до 4.0, будучи простым, но несколько возможных ударов, идущих от 3.0 до 3.4.

Вроде немного извилистый. Сожалею.

Чтобы ответить на ваш второй вопрос о ценности использования Flex, как и все вопросы, основанные на мнении, единственный правильный ответ: это зависит.

В моем случае выбор новой структуры каталогов был простым. У меня есть несколько приложений, и я использую Symfony ежедневно. Идти в ногу с последними и величайшими имеет смысл для меня. Потратив время на портирование приложений (некоторые из которых относятся к 2.3) на 4.0, я облегчаю общее бремя обслуживания. Время, потраченное на эксперименты с портированием, помогло мне понять новую функциональность. Как только я освоился с процессом, это было по большей части просто упражнение копирования / вставки / переименования. Сложнее всего было убедиться, что некоторые из сторонних зависимостей были должным образом обновлены.

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

Другие решения

Symfony Flex — это новый способ установки и управления приложениями Symfony. Flex — это не новая версия Symfony, а инструмент, который заменяет и улучшает Symfony Installer и Symfony Standard Edition.

Symfony Flex автоматизирует наиболее распространенные задачи приложений Symfony, такие как установка и удаление пакетов и других зависимостей Composer. Symfony Flex работает с Symfony 3.3 и выше. Начиная с Symfony 4.0, Flex должен использоваться по умолчанию, но он по-прежнему не обязателен.

Создайте вашу первую страницу в Symfony¶

Создание новой страницы – не важно, будет это страница HTML или JSON – это простой процесс, состоящий из 2 шагов:

  1. Создайте маршрут: Маршрут – это URL (например, /about ) вашей страницы и указание на контроллер;
  2. Создайте контроллер: Контроллер – это РНР функция, написанная вами, которая создаёт страницу. Вы берете входящую информацию запроса, и используете её для создания объекта Symfony Response , который может содержать HTML содержимое, JSON строку, или даже бинарный файл вроде изображения или PDF.

Cоздание страницы: маршрут и контроллер¶

Перед тем, как продолжать, убедитесь в том, что вы прочли главу про установку, и можете вызвать приложение Symfony из своего браузера.

Допустим, вы хотите создать страницу /lucky/number , которая будет генерировать счастливое (хорошо, случайное) число и отображать его. Для этого, создайте «класс контроллера» и внутри него метод «контроллера»:

Теперь вам нужно проассоциировать эту функцию контроллера с публичным URL (например, /lucky/number ), чтобы метод number() выполнялся, когда пользователь переходит поссылке. Эта ассоциация определяется путём создания маршрута в файле config/routes.yaml :

Вот и всё! Если вы используете веб-сервер Symfony, испробуйте его, перейдя по ссылке:

Если вы увидите отображенное счастливо число – поздравляем! Однако перед тем, как бежать играть в лотерею, посмотрите, как это работает. Помните два шага по созданию страницы?

  1. Создайте маршрут: В config/routes.yaml , маршрут определяет URL к вашей странице ( path ), и какой controller вызывать. Вы узнаете больше о маршрутизации в разделе о ней, включая то, как cоздавать переменные URL;
  2. Создайте контроллер: Это функция, в которой вы строите страницу и возвращаете объект Response . Вы узнаете больше о контроллерах в разделе о них, включая то, как возвращать ответы JSON.

Маршруты аннотаций¶

Вместо того, чтобы определять ваш маршрут на YAML, Symfony также позволяет вам использовать маршруты аннотаций. Чтобы сделать это, установите пакет аннотаций:

Теперь вы можете добавлять ваш маршрут прямо над контроллером:

Вот и всё! Страница https://localhost:8000/lucky/number будет работать точно так же, как и раньше! Аннотации являются рекомендоанным способом конфигурации маршрутов.

Автоустановка рецептом с помощью Symfony Flex¶

Возможно вы не заметили, но когда вы выполнили composer require annotations , произошли две особенные вещи, обе благодаря мощному плагину Composer по имени Flex.

Во-первых, annotations — это не настоящее имя пакета: это дополнительное имя (т.е. ярлык), который Flex разрешает до sensio/framework-extra-bundle .

Во-вторых, после того, как был скачан этот пакет, Flex выполнил рецепт, который является набором автоматических инструкций, которые сообщают Symfony, как интегрировать внешний пакет. Рецепты Flex существуют для многих пакетов (см. symfony.sh) и имеют возможность делать многое, вроде добавления файлов конфигурации, создания каталогов, обновления .gitignore и добавления новой конфигурации в ваш файл .env . Flex автоматизирует установку пакетов, чтобы вы могли вернуться к написанию кода.

Вы можете узнать больше о Flex, прочитав «Upgrading Existing Applications to Symfony Flex«. Но это не обязательно: Flex автоматически работает в фоновом режиме, когда вы добавляете пакеты.

Команда bin/console¶

Ваш проект уже имеет в себе мощный инструмент отладки: команду bin/console . Попробуйте выполнить её:

Вы должны увидеть список команд, которые могут дать вам информацию об отладке, помочь сгенерировать код, сгенерировать миграции БД и многое другое. Когда вы будете устанавливать больше пакетов, вы будете видеть больше команд.

Чтобы получить список всех маршрутов в вашей системе, используйте команду debug:router :

Сейчас вы должны увидеть ваш один маршрут:

Имя Метод Схема Хост Путь
app_lucky_number любой любой любой /lucky/number

You’ll learn about many more commands as you continue!

Панель инструментов веб-отладки: отладка мечты¶

Одной из убийственных функций Symfony является Панель инструментов веб-отладки: панель, которая отображает огромное количество информации отладки внизу вашей страницы во время разработки.

Чтобы использовать панель инструментов веб-отладки, просто установите её:

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


Пакет profiler также является отличным примером Flex! После скачивания пакета, рецепт создал несколько файлов конфигурации, чтобы панель инструментов веб-отладки работала незамедлительно.

Отображение шаблона¶

Если вашему контроллеру нужно возвращать HTML, то вы, скорее всего, захотите использовать шаблон. К счастью, в Symfony есть шаблонизатор Twig – простой, многофункциональный и, на самом деле, классный.

Для начала, установите Twig:

Далее, убедитесь в том, что LuckyController расширяет базовый класс Symfony Controller :

Теперь, используйте удобную функцию render() , чтобы отобразить шаблон. Передайте ей переменную number , чтобы вы могли использовать её в Twig:

Файлы шаблонов живут в каталоге templates/ , который был создан для вас автоматически при установке Twig. Создайте новый каталог templates/lucky с новым файлом number.html.twig внутри:

Синтаксис << number >> используется для отображения переменных в Twig. Обновите ваш брайзер, чтобы получить ваше новое счастливое число!

Теперь вам может быть интересно, куда делась Панель инструментов веб-отладки: она пропала, так как в текущем шаблоне нет тега

Создание улучшенных адаптивных галерей изображений с использованием Flexbox

29 декабря 2020 | Опубликовано в css | 1 Комментарий »

Одна из самых распространенных проблем в адаптивном веб-дизайне — проблема «висячей строки». Легко расположить элементы примерно одинакового размера в одну строку, когда на это хватает места:

Но когда окно браузера сужается, последний элемент не помещается на строку и падает вниз, оставаясь в одиночестве:

В идеале все элементы, которые переносятся на новую строку, займут на ней то же пространство, что и оставшиеся выше, создавая более цельный дизайн:

Для решения именно таких задач и был создан flexbox. Допустим, у нас есть галерея изображений с одинаковыми пропорциями в элементе шапки:

Лучше поместить каждое изображение в блочный элемент из-за особенности работы некоторых версий браузера Firefox при масштабировании изображений с использованием Flexbox.

После этого запишем следующий код CSS только с помощью нового синтаксиса, ради ясности и краткости:

Как видите на примере выше, при изменении размеров окна браузера проблема с расположением изображений решена изящно: изображение, которое оттолкнулось на новую строку, займет на ней ширину, равную ширине верхней строки. Если к этому изображению присоединится следующее при сужении окна, они поделят размер строки пополам.

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

Такой подход хорошо подойдет и для не графических элементов разной высоты и различных пропорций.

Использована фотография Jeremiah Wilson, лицензированная по лицензии Creative Commons.

Symfony 4. Flex — Коротко о главном

Время летит неумолимо быстро! Казалось, вот только запланировал серию статей о Symfony 2 и Silex, но с течением времени все поменялось: Symfony team зарелизила версию 3, потом 4, а Silex с выходом Symfony 4 использовать уже просто нецелесообразно (подробнее здесь) и вы скоро сами поймете почему.

Symfony Flex — это новый путь установки и управления Symfony приложениями. Этот подход был анонсирован с выходом Symfony 4. Это не новая версия Symfony, но инструмент, который призван заменить Symfony installer и Symfony Standard Edition. Symfony Flex автоматизирует наиболее частые задачи Symfony приложений, такие как установка и удаление бандлов и других компонентов. Symfony Flex работает начиная с Symfony 3.3 и выше, а начиная с Symfony 4.0, Flex используется по умолчанию, но не является обязательным к использованию.

Как работает Flex

К примеру, если в проекте мы будем отсылать электронную почту, то всё, что нужно, это только перейти в папку с проектом и набрать команду:

Если вы выполните эту команду в Symfony проекте, который не использует Flex, вы увидете composer error, который гласит, что «mailer» не является валидным именем существующего пакета. На самом деле Flex хранит на своих серверах специальные рецепты, которым соответствуют алиасы (по этим алиасам в итоге и определяется пакет, необходимый для установки). То есть в нашем случае Flex отсылает на свой сервер алиас «mailer», сервер определяет, что этому алиасу соответвует пакет SwiftmailerBundle и возвращает рецепт для его установки (recipe), также будут выполнены все соответствующие данному пакету автоматизированные таски.т

Flex сохраняет всю информацию об установленных рецептах в файле symfony.lock, который нужно закомитить в репозиторий системы контроля версий.

Для удаления ранее установленного пакета все так же используем алиас:

Как использовать Flex в новом проекте

Вместе с Flex команда разработчиком Symfony подготовила новый skeleton-app для нас, установить который можно следующий образом:

Стоит отметить, что использовать symfony installer не рекомендуется с момента релиза Symfony 3.3. Для все новых проектов используйте composer команду create-project.

Полезные рецепты Flex

Этот список полезных рецептов планируется расширять по мере нахождения / вспоминания других полезных. Начинайте использовать Symfony c Flex и оцените их по достоинству!

Создание галереи изображений с помощью Symfony Flex: настройка

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

New pull request

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Downloading .

Want to be notified of new releases in symfony/flex ?

Launching GitHub Desktop .

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop .

If nothing happens, download GitHub Desktop and try again.

Launching Xcode .

If nothing happens, download Xcode and try again.

Launching Visual Studio .

Permalink


Type Name Latest commit message Commit time
Failed to load latest commit information.
src minor #564 Uniformize the text tags (maxhelias) Oct 14, 2020
tests bug #533 Fix docker configurator with many mark in volumes section (m… Aug 1, 2020
.gitignore Implement «sync-recipes —force» option Dec 11, 2020
.php_cs.dist minor #368 Enhancement: Enable ordered_imports fixer (localheinz) May 5, 2020
.travis.yml add php 7.3 to travis Oct 29, 2020
LICENSE Update year Jul 15, 2020
README.md moved away from symfony.sh Jul 11, 2020
composer.json bumped version to 1.4 Jun 26, 2020
phpunit.xml.dist removed obsolete PHPUnit configuration May 13, 2020

Symfony Flex helps developers create Symfony applications, from the most simple micro-style projects to the more complex ones with dozens of dependencies.

Discover the available recipes.

  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

How to Build a Responsive Image Gallery with Flexbox

You may have noticed I’ve updated the site to include a front page with a grid listing all the tutorials. As you resize the screen, it goes from three columns, to two columns, to a single column on mobile. Another great example of that is this really weird musical side project of mine, where I arrange all the songs as if they’re a Spotify album listing. The only real difference between those two is that one has margins, and the other doesn’t.

In this quick article, I’m going to go over how to create a responsive grid of images like that with flexbox.

  • Basic knowledge of HTML and CSS.
  • Create a responsive, repeating gr >

Make sure before starting to include some sort of reset, or at least set box-sizing: border-box and margin: 0 to the body. (More about all that, if you’re not sure.) Now we can get started on the grid.

We’ll start off by making the mobile page — mobile first layout means utilizing min-width @media queries for bigger screen sizes.

I’m just going to put everything inside a generic container to start.

The grid class will be the flex wrapping container. For mobile, everything is one column, so it doesn’t need to be defined as flex yet.

Ins >cell and place an image ins >max-width on it.

And the image should be a block level element.

So here’s our whole HTML code.

It looks like this.

That’s all we need for mobile. Now we’ll move on to the medium screen devices.

I’m going to choose 600px as the width to start showing the mid-screen view. We want the images to show up in rows of two now.

The grid wrapping container is defined as a flex element, which will wrap in the direction of a row (horizontal). Since I now want the images to show up in rows of two columns, I’m going to set the w >50% .

At 1000px , I’m going to show the desktop view, which will display the images in rows of three.

I write out the w >calc(100% / 3) instead of 33.33333% , because it’s easier to make sure it’s correct.

This gallery has no padding or spacing between the images. You have to make some slight adjustments if you want to add space between all the images.

First, add a margin around the cell for all screen sizes.

Then edit the width of the cells on their respective sizes.

The best part about this grid is it can be easily looped. If you’re not familiar with WordPress, here’s the article to get you started.

Instead of using a WordPress gallery plugin, you can pull images by category from the media gallery. The prerequisite to this is allowing category for attachments, which you can do by adding this code to functions.php.

There is one small, useful plugin that you might want to use that allows you to bulk add and delete category from gallery images — Media Library Categories.

Here’s an example using the flex grid above and pulling all images from the gallery with the category of «Gallery».

I’m Tania Rascia. I document everything I learn and help thousands of people start coding careers. My site has no ads, sponsors, or bullshit. If you enjoy my content, please consider supporting what I do.

Building an Image Gallery Blog with Symfony Flex: the Setup

This article is part of a zero-to-hero project — a multi-image gallery blog — for performance benchmarking and optimizations. (View the repo here.) In this part, we’ll set our project up so we can fine tune it throughout the next few posts, and bring it to a speedy perfection.

Now and then you have to create a new project repository, run that git init command locally and kick off a new awesome project. I have to admit I like the feeling of starting something new; it’s like going on an adventure!

The journey of a thousand miles begins with one step

We can think about the project setup as the very first step of our thousand miles (users!) journey. We aren’t sure where exactly we are going to end up, but it will be fun!


We also should keep in mind the advice from prof. Donald Knuth:

Premature optimization is the root of all evil (or at least most of it) in programming.

Our journey towards a stable, robust, high-performance web app will start with the simple but functional application — the so-called minimum viable product (MVP). We’ll populate the database with random content, do some benchmarks and improve performance incrementally. Every article in this series will be a checkpoint on our journey!

This article will cover the basics of setting up the project and organizing files for our Symfony Flex project. I’ll also show you some tips, tricks and helper scripts I’m using for speeding up the development.

What Are We Building?

Before starting any project, you should have a clear vision of the final destination. Where are you headed? Who will be using your app and how? What are the main features you’re building? Once you have that knowledge, you can prepare your environment, third-party libraries, and dive into developing the next big thing.

In this series of articles, we’ll be building a simple image gallery blog where users can register or log in, upload images, and create simple public image galleries with descriptions written in Markdown format.

We’ll be using the new Symfony Flex and Homestead (make sure you’ve read tutorials on them, as we’re not going to cover them here). We picked Flex because Symfony 4 is just about to come out (if it hasn’t already, by the time you’re reading this), because it’s infinitely lighter than the older version and lends itself perfectly to step-by-step optimization, and it’s also the natural step in the evolution of the most popular enterprise PHP framework out there.

All the code referenced in this article is available at the GitHub repo.

We’re going to use the Twig templating engine, Symfony forms, and Doctrine ORM with UU >

Entities and routes will use annotations; we’ll have simple email/password based authentication, and we’ll prepare data fixtures to populate the database.

Getting started with the app

To try out the example we’ve prepared, do the following:

  • Set up an empty database called “blog”.
  • Clone the project repository from GitHub.
  • Run composer install .
  • If you now open the app in your browser, you should see an exception regarding missing database tables. That’s fine, since we haven’t created any tables so far.
  • Update the .env file in your project root directory with valid database connection string (i.e., update credentials).
  • Run the database init script ./bin/refreshDb.sh and wait until it generates some nice image galleries.
  • Open the app in your browser and enjoy!

After executing bin/refreshDb.sh you should be able to see the home page of our site:

You can log in to the app with credentials user1@mailinator.com and password 123456 . See LoadUserData fixture class for more details regarding generated users.

Starting from scratch

In this section, we’ll describe how to set up a new project from scratch. Feel free to take a look at the sample app codebase and see the details.

After creating a new project based on symfony/skeleton by executing the command

… we can first set minimum stability to “dev” because of some cutting edge packages:

… and then require additional packages (some of them are referenced by their aliases, the new feature brought by Flex):

Dependencies used only in the dev environment are required with the —dev flag:

Flex is doing some serious work for us behind the scenes, and most of the libraries (or bundles) are already registered and configured with good-enough defaults! Check the config directory. You can check all the dependencies used in this project in the composer.json file.

Routes are defined by annotations, so the following will be automatically added into config/routes.yaml :

Database, Scripts and Fixtures

Configure the DATABASE_URL environment variable (for example, by editing the .env file) to set up a working DB connection. If you’re using our own Homestead Improved (recommended), you’ve got a database set up called homestead with the user / pass homestead / secret . A DB schema can be generated from existing entities by executing:

If this doesn’t run, try executing the console by invoking the PHP binary, like so:

If this step executed fine in the “Getting Started with the app” section above, you should be able to see newly created tables in the database (for Gallery, Image and User entities).

If you want to drop the database schema, you can run:

Fake it ’til you make it!

I can’t imagine developing an app today without having data fixtures (i.e., scripts for seeding the DB). With a few simple scripts, you can populate your database with realistic content, which is useful when it comes to rapid app development and testing, but it’s also a requirement for a healthy CI pipeline.

I find the Doctrine Fixtures Bundle to be an excellent tool for handling data fixtures as it supports ordered fixtures (i.e., you can control the order of execution), sharing objects (via references) between scripts, and accessing the service container.

Default Symfony services configuration doesn’t allow public access to services, as best practice is to inject all dependencies. We’ll need some services in our fixtures, so I’m going to make all services in App\Services publicly available by adding the following to config/services.yaml :

I’m also using Faker to get random but realistic data (names, sentences, texts, images, addresses, …).

Take a look at the script for seeding galleries with random images to get a feeling of how cool this combination is.

Usually, I combine commands for dropping the existing DB schema, creating the new DB schema, loading data fixtures, and other repetitive tasks into a single shell script — for example, bin/refreshDb.sh — so I can easily regenerate the schema and load dummy data:

Make sure you restrict execution of this script on production, or you’re going to have some serious fun at one point.

One can argue that randomly generated data can’t reproduce different edge cases, so your CI can sometimes fail or pass depending on the data generation. It’s true, and you should make sure all edge cases are covered with your fixtures.

Every time you find an edge case causing a bug, make sure you add it to data fixtures. This will help you build a more robust system and prevent similar errors in the future.

Controllers, Templates and Services

Controller classes are located under the src\Controller directory and are not extending the existing Controller class provided by FrameworkBundle . All dependencies are injected through constructors, making the code less coupled and easier to test. I don’t like “magic” for simple stuff!

In the new Symfony directory structure, templates are located under templates .
I’ve created a master template base.html.twig that defines basic HTML structure and references external resources.

Other templates are extending it and overriding its blocks (for example, style sheets, body, header, content, JavaScripts and other blocks).

Local assets are referenced by using the asset Twig function, as it will provide us with better control later (such as changing hosts and appending query strings for versioning). Other templates are organized in subdirectories within the src/templates directory.

Services are automatically registered and configured by default in Symfony’s service configuration. That way, you don’t need to manually configure Twig extensions with filters for Markdown support and generating URLs for Image entities located under src/Twig .

Source Code Management / Version Control

Hopefully, you already know about Git basics and understand how .gitignore works.

Symfony Flex manages the default project .gitignore by adding known bundle files and folders to the ignore list. For example, Flex would add the following files to the ignore list for symfony/framework-bundle :

We’re going to store uploaded files in var/uploads , so we need to create it first. Instead of doing it manually on every project setup, we can add a command for creating all the needed directories to post-install-cmd event in our composer.json scripts section and make Composer run that for us (for example, «mkdir -p var/uploads» ). Read more about composer scripts here and auto-scripts here.

We should add all other directories and files we want to be ignored to .gitignore but outside the commented and clearly marked section managed by Flex.

Other Tips and Troubleshooting

  • Check your Homestead.yaml file for environment variables. If you already have an APP_ENV variable, Symfony won’t try to load the one from the .env file. Your best bet is to comment out the APP_ENV section in Homestead.yaml just to be safe.
  • Cache clear within your Vagrant machine can fail because of permissions. You can simply run sudo rm -rf var/cache/* to clear the cache manually, or if that fails, clear it from outside the VM, on the host machine in the shared folder.

Conclusion

In this article, we successfully set up a project with entities, controllers, templates and helper scripts. The database is populated with dummy content, and users are able to register and create their galleries.

In the next article, we’ll demonstrate how to populate the database with a more massive dataset to test the app’s performance in a more realistic environment, how to set up a simple testing suite, and simple CI based on Docker.

Отзывчивая галерея изображений с использованием CSS flexbox или grid-layout

Я работаю над Image-Gallery-Widget, где пользователь может установить ширину миниатюры, высоту эскиза и маркер (между эскизами), и виджет будет представлять все изображения-thumnails в хорошей сетке, где каждое изображение имеет одинаковую ширину и высоты.

Мне интересно, может ли css- flexbox или css-grid сделать это без необходимости определять строки и столбцы в коде и без необходимости наличия контрольных точек/медиа-запросов.

Изображения с миниатюрами завернуты в якорь, поэтому элемент галереи (или элемент сетки) будет выглядеть примерно так:

Элементы галереи должны полностью заполнять контейнер div, т.е. не должно быть промежутка между последним эскизом в строке и правым краем контейнера div (кроме случаев, когда у нас недостаточно элементов для заполнения строки, т.е. когда 3 элемента ft в строке, но у нас есть только 8 элементов, тогда 3-я строка будет иметь только 2 элемента и пробел справа, равный ширине одного элемента).

Элементы галереи никогда не могут быть более широкими, чем ширина пользовательского набора, которая не будет уменьшаться, потому что мы не хотим ухудшать качество эскизов. Для этого примера допустим ширину 300 пикселей. Поля между элементами галереи фиксированы и заданы пользователем. Если для заполнения строки осталось недостаточно элементов, просто выровняйте их слева. Например:

Я не хочу определять точки останова в CSS и не добавлять любые html для строковых/столбцовых конструкций. Я хочу, чтобы браузер просто размещал столько элементов галереи рядом друг с другом, как вставляется в контейнер. Если есть пробел справа (т.е. 3 эскиза * 300px w >

В этом gif вы можете увидеть желаемое реагирующее поведение (при изменении ширины браузера):

То, что вы видите в gif, выполняется без flexbox, но нуждается в тонне CSS, которого я надеялся избежать с помощью flexbox. Я довольно немного исследовал flexbox, но пока еще не смог полностью обдумать его.

Добавить комментарий