Temporary/Signed (S3) urls for responsive images

[chancezeus]

I've been working with this package for a bit now and it works like a charm. I only have one question, for the main image and the main url of the conversion the package supports temporary urls when running on S3 (or any other Adapter that supports temporary urls), however the responsive images do not...

Since some use cases/requirements might require that the files are stored privately (and only be available for a specific duration), it seems to me that it should be possible to also generate temporary urls for the responsive variants as well.

An additional idea is that it would be nice to have a config option where you can specify a default duration (int or interval string) and when set, calling ->getUrl (or ResponsiveImage::url) will instead generate a temporary url so you can use the same method for both situations (for example for local development) without having to add custom logic.

[modrink]

I have solved this by extending the library - it's not the prettiest (or correct?, for that matter) solution, but it works.
Of course, the files will need to be updated accordingly on new releases (built for v10.4.5).

In my example I use caching to avoid regenerating temporary URLs while they're still valid (fixes browser caching of images, because URL is not refreshed on every page reload).

Here are the files:

https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/using-your-own-model
app\Models\Media.php

<?php

namespace App\Models;

use Spatie\MediaLibrary\MediaCollections\Models\Media as BaseMedia;
use DateTimeInterface;
use Illuminate\Support\Facades\Cache;
use App\Services\MediaLibrary\CustomRegisteredResponsiveImages;
use App\Services\MediaLibrary\CustomHtmlableMedia;

class Media extends BaseMedia
{
    public function getTemporaryUrl(DateTimeInterface $expiration, string $conversionName = '', array $options = []): string
    {
        return Cache::remember("media_$this->uuid\_$conversionName\_url", $expiration, function () use ($expiration, $conversionName, $options) {
            return parent::getTemporaryUrl($expiration, $conversionName, $options);
        });
    }

    public function getTemporarySrcset(DateTimeInterface $expiration, string $conversionName = ''): string
    {
        return Cache::remember("media_$this->uuid\_$conversionName\_srcset", $expiration, function () use ($expiration, $conversionName) {
            return $this->responsiveImages($conversionName)->getSrcset($expiration);
        });
    }

    public function responsiveImages(string $conversionName = ''): CustomRegisteredResponsiveImages
    {
        return new CustomRegisteredResponsiveImages($this, $conversionName);
    }

    public function img(string $conversionName = '', $extraAttributes = []): CustomHtmlableMedia
    {
        return (new CustomHtmlableMedia($this))
            ->conversion($conversionName)
            ->attributes($extraAttributes);
    }

    public function __invoke(...$arguments): CustomHtmlableMedia
    {
        return $this->img(...$arguments);
    }
}

https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/generating-custom-urls
app\Services\MediaLibrary\CustomUrlGenerator.php

<?php

namespace App\Services\MediaLibrary;

use DateTimeInterface;
use Spatie\MediaLibrary\Support\UrlGenerator\DefaultUrlGenerator;

class CustomUrlGenerator extends DefaultUrlGenerator
{
    public function getResponsiveImageTemporaryUrl(string $fileName, DateTimeInterface $expiration): string
    {
        return $this->getDisk()->temporaryUrl($this->getResponsiveImagesDirectoryUrl() . rawurlencode($fileName), $expiration);
    }
}

app\Services\MediaLibrary\CustomHtmlableMedia.php

<?php

namespace App\Services\MediaLibrary;

use DateTimeInterface;
use Spatie\MediaLibrary\Conversions\ConversionCollection;
use Spatie\MediaLibrary\Conversions\ImageGenerators\Image;
use Spatie\MediaLibrary\Conversions\ImageGenerators\ImageGeneratorFactory;
use Spatie\MediaLibrary\MediaCollections\HtmlableMedia;

class CustomHtmlableMedia extends HtmlableMedia
{
    protected ?DateTimeInterface $temporaryAttributeValue = null;

    public function temporary(DateTimeInterface $expiration): self
    {
        $this->temporaryAttributeValue = $expiration;

        return $this;
    }

    public function toHtml()
    {
        $imageGenerator = ImageGeneratorFactory::forMedia($this->media) ?? new Image();

        if (!$imageGenerator->canHandleMime($this->media->mime_type)) {
            return '';
        }

        $attributeString = collect($this->extraAttributes)
            ->map(fn ($value, $name) => $name . '="' . $value . '"')->implode(' ');

        if (strlen($attributeString)) {
            $attributeString = ' ' . $attributeString;
        }

        $loadingAttributeValue = config('media-library.default_loading_attribute_value');

        if ($this->conversionName !== '') {
            $conversionObject = ConversionCollection::createForMedia($this->media)->getByName($this->conversionName);

            $loadingAttributeValue = $conversionObject->getLoadingAttributeValue();
        }

        if ($this->loadingAttributeValue !== '') {
            $loadingAttributeValue = $this->loadingAttributeValue;
        }

        if ($this->temporaryAttributeValue !== null) {
            $temporaryAttributeValue = $this->temporaryAttributeValue;
        }

        $viewName = 'image';
        $width = '';
        $height = '';

        if ($this->media->hasResponsiveImages($this->conversionName)) {
            $viewName = config('media-library.responsive_images.use_tiny_placeholders')
                ? 'responsiveImageWithPlaceholder'
                : 'responsiveImage';

            $responsiveImage = $this->media->responsiveImages($this->conversionName)->files->first();

            $width = $responsiveImage->width();
            $height = $responsiveImage->height();
        }

        $media = $this->media;
        $conversion = $this->conversionName;

        return view("media-library::{$viewName}", compact(
            'media',
            'conversion',
            'attributeString',
            'loadingAttributeValue',
            'temporaryAttributeValue',
            'width',
            'height',
        ))->render();
    }
}

app\Services\MediaLibrary\CustomRegisteredResponsiveImages.php

<?php

namespace App\Services\MediaLibrary;

use DateTimeInterface;
use Spatie\MediaLibrary\ResponsiveImages\RegisteredResponsiveImages;
use App\Services\MediaLibrary\CustomResponsiveImage;
use App\Models\Media;

class CustomRegisteredResponsiveImages extends RegisteredResponsiveImages
{
    public function __construct(Media $media, string $conversionName = '')
    {
        $this->generatedFor = $conversionName === ''
            ? 'media_library_original'
            : $conversionName;

        $this->files = collect($media->responsive_images[$this->generatedFor]['urls'] ?? [])
            ->map(fn (string $fileName) => new CustomResponsiveImage($fileName, $media))
            ->filter(fn (CustomResponsiveImage $responsiveImage) => $responsiveImage->generatedFor() === $this->generatedFor);
    }

    public function getSrcset(DateTimeInterface $expiration = null): string
    {
        $filesSrcset = $this->files
            ->map(function (CustomResponsiveImage $responsiveImage) use ($expiration) {
                $url = $expiration ? $responsiveImage->temporaryUrl($expiration) : $responsiveImage->url();
                return "{$url} {$responsiveImage->width()}w";
            })
            ->implode(', ');

        $shouldAddPlaceholderSvg = config('media-library.responsive_images.use_tiny_placeholders')
            && $this->getPlaceholderSvg();

        if ($shouldAddPlaceholderSvg) {
            $filesSrcset .= ', ' . $this->getPlaceholderSvg() . ' 32w';
        }

        return $filesSrcset;
    }
}

app\Services\MediaLibrary\CustomResponsiveImage.php

<?php

namespace App\Services\MediaLibrary;

use DateTimeInterface;
use Spatie\MediaLibrary\Support\UrlGenerator\UrlGeneratorFactory;
use Spatie\MediaLibrary\ResponsiveImages\ResponsiveImage;

class CustomResponsiveImage extends ResponsiveImage
{
    public function temporaryUrl(DateTimeInterface $expiration): string
    {
        $conversionName = '';

        if ($this->generatedFor() !== 'media_library_original') {
            $conversionName = $this->generatedFor();
        }

        $urlGenerator = UrlGeneratorFactory::createForMedia($this->media, $conversionName);

        return $urlGenerator->getResponsiveImageTemporaryUrl($this->fileName, $expiration);
    }
}

https://spatie.be/docs/laravel-medialibrary/v10/responsive-images/customizing-the-rendered-html
app\resources\views\media-library\image.blade.php

<img{!! $attributeString !!}@if ($loadingAttributeValue) loading="{{ $loadingAttributeValue }}" @endif
    @if ($temporaryAttributeValue) src="{{ $media->getTemporaryUrl($temporaryAttributeValue, $conversion) }}
    @else
    src="{{ $media->getUrl($conversion) }}" @endif
    alt="{{ $media->name }}">

app\resources\views\media-library\responsiveImage.blade.php

<img{!! $attributeString !!} @if ($loadingAttributeValue) loading="{{ $loadingAttributeValue }}" @endif
    @if ($temporaryAttributeValue) srcset="{{ $media->getTemporarySrcset($temporaryAttributeValue, $conversion) }}"
    src="{{ $media->getTemporaryUrl($temporaryAttributeValue, $conversion) }}
    @else
    srcset="{{ $media->getSrcset($conversion) }}"
    src="{{ $media->getUrl($conversion) }}" @endif
    width="{{ $width }}" height="{{ $height }}">

app\resources\views\media-library\responsiveImageWithPlaceholder.blade.php

<img{!! $attributeString !!} @if ($loadingAttributeValue) loading="{{ $loadingAttributeValue }}" @endif
    @if ($temporaryAttributeValue) srcset="{{ $media->getTemporarySrcset($temporaryAttributeValue, $conversion) }}"
    src="{{ $media->getTemporaryUrl($temporaryAttributeValue, $conversion) }}
    @else
    srcset="{{ $media->getSrcset($conversion) }}"
    src="{{ $media->getUrl($conversion) }}" @endif
    onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});"
    sizes="1px" width="{{ $width }}" height="{{ $height }}">

Now you should be able to generate your image html like this:
App\Models\Media::first()->img('optimized')->temporary(now()->addMinutes(60))->lazy();

Maybe someone will refactor and raise a PR for this :)