Обробка зображень у Laravel за допомогою Glide

0
Перекладено ШІ
Оригінал: Laravel News
Оновлено: 11 жовтня, 2025
Ви коли-небудь задумувались, як спростити обробку зображень у вашому проекті на Laravel? У нашій статті ви дізнаєтеся про пакет Glide, який дозволяє легко маніпулювати зображеннями на льоту, генеруючи чіткі, адаптивні графіки прямо з ваших Blade-шаблонів. Читайте далі, щоб дізнатися про його можливості!

Glide для Laravel — це пакет для маніпуляції зображеннями на льоту, який використовує League/Glide. Він пропонує компоненти Blade для створення адаптивних зображень з автоматичною генерацією srcset, підписуванням URL для безпеки та безперешкодною інтеграцією з файловою системою Laravel і її кешем.

Ви можете програмно генерувати URL-адреси зображень, які знаходяться у папці resources/assets (можна налаштувати) за допомогою наданого Facade:

use Daikazu\LaravelGlider\Facades\Glide;

// Формат за замовчуванням (webp)
Glide::getUrl('featured-image-unbranded.png', ['w' => 1100]);
// http://glider-demo.test/img/<hash>.webp

// Формат jpg
Glide::getUrl('featured-image-unbranded.png', ['w' => 1100, 'fm' => 'jpg']);

З Glider ви можете швидко обробляти свої зображення, додавати водяні знаки, створювати кілька адаптивних зображень для різних екранів та багато іншого:

{{-- Оригінальне зображення --}}
<x-glide-img src="featured-image-unbranded.png"
    glide-w="800"
    class="mb-4"
/>

{{-- Зображення з водяним знаком --}}
<x-glide-img src="featured-image-unbranded.png"
    glide-mark="laravel-news-logo.png"
    glide-markw="75"
    glide-markh="75"
    glide-markpad="15"
    glide-markalpha="60"
    glide-w="800"
    class="mb-4"
/>

Вказуючи зображення для водяного знака та налаштовуючи його, ви можете легко отримати чистий водяний знак, не змінюючи оригінальні зображення.

Unbranded image generated by Glide
Безбрендове зображення, згенероване за допомогою Glide
Unbranded image generated by Glide
Зображення з водяним знаком, згенероване за допомогою Glide

Приклад із Blade містить параметри, які не зафіксовані у документації до пакету Glide для Laravel; проте ознайомлення з документацією Glide допоможе вам зрозуміти, як користуватися сервісом та компонентом Blade.

Наприклад, якщо параметр для водяного знака — markh, то параметр для компонента Blade буде glide-markh. Зверніться до Швидкої довідки для швидкого перегляду доступних опцій.

# Функції Mail

💻 Розпочніть використання Glider для Laravel на GitHub: daikazu/laravel-glider

📕 Документація Glide є корисною для всіх доступних опцій: Документація Glide та Швидка довідка

Популярні

Logomark Logotype

Створення CLI-додатка за допомогою Laravel та Docker

Зазирніть у світ Laravel, де потужний CLI-фреймворк відкриває нові можливості для розробки командного інтерфейсу. Дізнайтеся, як створити просту утиліту для перевірки акцій, яка працює з Docker, та які переваги це може принести у вашому проєкті!

Logomark Logotype

Журнал аудиту в Laravel

Хочете забезпечити повну прозорість у своїх Laravel-додатках? Пакет Laravel Audit Log допоможе вам детально відстежувати всі зміни моделей Eloquent та відповідати вимогам регуляторів. Читайте далі, щоб дізнатися, як цей потужний інструмент може підвищити надійність вашого проєкту

Logomark Logotype

Випущено Livewire 3.6

Laravel Livewire випустив нову версію 3.6, яка приносить з собою цікаві HTML-директиви для управління видимістю DOM-елементів і JavaScript-діями. Досліджуйте нові можливості Livewire, що допоможуть вам створити ще більш інтерактивні користувацькі інтерфейси!