Media

Introduction

ozu-client is not just a connector for the Ozu Dashboard and for the Ozu Builder Platform. It also provides multiple tools to help you achieve the basics more efficiently and quickly, such as media handling.

Attached visuals or files are Media

If you want to attach images or files to your models, leverage the Code16\OzuClient\Eloquent\Media model via a MorphOne or a MorphMany relation:

use Code16\OzuClient\Eloquent\Media;
// ...

class Project extends Model
{
    use IsOzuModel;

    public function visuals(): MorphMany
    {
        return $this->morphMany(Media::class, 'model')
            ->withAttributes(['model_key' => 'visuals'])
            ->orderBy('order');
    }
    
    public function attachments(): MorphMany
    {
        return $this->morphMany(Media::class, 'model')
            ->withAttributes(['model_key' => 'attachments'])
            ->orderBy('order');
    }
    
    public function ogImage(): MorphOne
    {
        return $this->morphOne(Media::class, 'model')
            ->withAttributes(['model_key' => 'ogImage']);
    }
    
    // ...
}

WARNING

You must define the model_key in withAttributes in the relationship to differentiate the different types of media you can attach to your models.

You can then use this relation in your views to display the images, and leverage the thumbnail() method to get the URL of the image at the desired size:

@if(count($project->visuals))
    <div class="mt-12">
        <div class="grid sm:grid-cols-3 grid-cols-2 gap-4">
            @foreach($project->visuals as $visual)
                <img class="aspect-square" src="{{ $visual->thumbnail(400, fit: true) }}" alt="">
            @endforeach
        </div>
    </div>
@endif

INFO

Ozu will try to use the VIPS driver to render images' thumbnails. If you have set up the VIPS driver locally, it will automatically be used for performance improvments, but Ozu will fallback to more common drivers such as GD or Imagick if not found. This is for performances reasons inside the Ozu Builder Platform.

Media useful methods

thumbnail(?int $width = null, ?int $height = null, bool $fit = false)

Returns a ThumbnailResult object, which can be cast to a string to get the URL of the image:

<img src="{{ $visual->thumbnail(400, fit: true) }}" alt="">

The ThumbnailResult also provides width() and height() methods:

@php($thumb = $visual->thumbnail(400))
<img src="{{ $thumb }}" width="{{ $thumb->width() }}" height="{{ $thumb->height() }}">

downloadUrl()

Returns the URL to the original file:

<a href="{{ $visual->downloadUrl() }}">Download</a>

humanReadableSize()

Returns the size of the file in a human-readable format (e.g. 1.2 MB):

<span>Size: {{ $file->humanReadableSize() }}</span>

Custom properties

Ozu allows you to define custom properties for your media (like an alt text or a caption). These are stored in a custom_properties JSON column but can be accessed directly as regular attributes:

<img src="{{ $visual->thumbnail(400) }}" alt="{{ $visual->alt_text }}">