astrotomic/laravel-weserv-images

A fluent URL generator for images.weserv.nl with Laravel bindings.

0.5.0 2020-03-04 10:59 UTC

This package is auto-updated.

Last update: 2020-05-22 12:49:16 UTC


README

Latest Version MIT License Offset Earth

GitHub Workflow Status StyleCI Total Downloads

This package provides a Laravel wrapper for the fluent URL builder astrotomic/php-weserv-images.

Installation

You can install the package via composer:

composer require astrotomic/laravel-weserv-images
php artisan vendor:publish --provider="Astrotomic\Weserv\Images\Laravel\WeservImagesServiceProvider" --tag=config

Usage

use Astrotomic\Weserv\Images\Enums\Fit;

echo weserv('https://images.weserv.nl/lichtenstein.jpg')
    ->w(512)
    ->h(512)
    ->we()
    ->fit(Fit::INSIDE);
// https://images.weserv.nl/?w=512&h=512&we=1&fit=inside&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg

HTML

The img() method allows you to create a <img> tag with an optional srcset. The following example will create a <img> tag with a srcset for normal and retina screens.

use Astrotomic\Weserv\Images\Laravel\Url;
use Astrotomic\Weserv\Images\Enums\Fit;

echo weserv('https://images.weserv.nl/lichtenstein.jpg')
    ->w(512)
    ->h(512)
    ->we()
    ->fit(Fit::INSIDE)
    ->img([
        'alt' => 'The alt text for this image', 
        'class' => 'rounded',
        'loading' => 'lazy',
    ], [
        '1x' => fn(Url $url) => $url->dpr(1),
        '2x' => fn(Url $url) => $url->dpr(2),
    ]);
<img alt="The alt text for this image" class="rounded" loading="lazy" src="https://images.weserv.nl?w=512&h=512&we=1&fit=inside&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg" srcset="https://images.weserv.nl?w=512&h=512&we=1&fit=inside&dpr=1&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg 1x, https://images.weserv.nl?w=512&h=512&we=1&fit=inside&dpr=2&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg 2x" />

The picture() method allows you to create a <picture> tag with webp support and srcset. The following example will create a <picture> tag with a webp source and a srcset for normal and retina screens.

use Astrotomic\Weserv\Images\Laravel\Url;
use Astrotomic\Weserv\Images\Enums\Fit;

echo weserv('https://images.weserv.nl/lichtenstein.jpg')
    ->w(512)
    ->h(512)
    ->we()
    ->fit(Fit::INSIDE)
    ->picture([
        'alt' => 'The alt text for this image', 
        'class' => 'rounded',
        'loading' => 'lazy',
    ], [
        '1x' => fn(Url $url) => $url->dpr(1),
        '2x' => fn(Url $url) => $url->dpr(2),
    ]);
<picture>
   <source type="image/webp" srcset="https://images.weserv.nl?w=512&h=512&we=1&fit=inside&output=webp&dpr=1&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg 1x, https://images.weserv.nl?w=512&h=512&we=1&fit=inside&output=webp&dpr=2&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg 2x" />
   <img alt="The alt text for this image" class="rounded" loading="lazy" src="https://images.weserv.nl?w=512&h=512&we=1&fit=inside&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg" srcset="https://images.weserv.nl?w=512&h=512&we=1&fit=inside&dpr=1&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg 1x, https://images.weserv.nl?w=512&h=512&we=1&fit=inside&dpr=2&url=https%3A%2F%2Fimages.weserv.nl%2Flichtenstein.jpg 2x" />
</picture>

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email dev@astrotomic.info instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

Treeware

You're free to use this package, but if it makes it to your production environment I would highly appreciate you buying the world a tree.

It’s now common knowledge that one of the best tools to tackle the climate crisis and keep our temperatures from rising above 1.5C is to plant trees. If you contribute to my forest you’ll be creating employment for local families and restoring wildlife habitats.

You can buy trees at offset.earth/treeware

Read more about Treeware at https://treeware.earth