Devisto provides a convenient way to store assets of any type. The storage space is unlimited, which means you can store as many files as you want without any extra cost.
For images, we provide extra tools like automatic resizing and optimization, to make sure your websites load always as fast as possible.
There are several places in Devisto where you can upload assets.
Click Assets in the left-hand navigation to access the global asset folders. Initially, there is only the root folder called Assets, but you're free to create any folder structure you want. Click on the plus icon to create a subfolder. You can also drag & drop folders around to change the tree structure.
Use these folders to store assets you want to access globally, like a logo or a favicon.
When you create a field of the type Asset, you can upload assets when creating or updating an entry.
Notice that these assets are completely separate from assets stored in folders. In other words, to link an asset to a data entry, you don't have to upload it first to some folder. You can upload it directly in the entry form.
Globals are similar to tables, but are only used to store a single value. Globals of type Asset will behave similarly as table fields of type Asset.
You can request any stored asset in your code. The result will be an Asset object (or a collection of them when dealing with 'multiple' fields).
// Get a global asset
$image = asset('path/to/test.jpg');
// Get an asset from an entry
$image = table('products')->first()->image;
// If the field is 'multiple', a collection of assets is returned
$images = table('products')->first()->images;
// Get an asset field from a global
$image = globals('general')->image;
// Properties
$image->name; // test.jpg
$image->path; // path/to/test.jpg
$image->extension; // jpg
$image->type; // image
$image->mime_type; // image/jpeg
$image->size; // 6472302 (in bytes)
$image->width; // 1024 (in pixels)
$image->height; // 768 (in pixels)You can use the url() helper method on Asset objects to generate the URL for the asset:
$image->url();We recommend to always use this technique and never use hard-coded URLs in your code, otherwise assets will not work properly whenever your site is renamed, duplicated or published:
{{-- ❌ Not recommended --}}
<a href="https://mywebsite.devisto.com/assets/...">Click Here</a>
{{-- ✅ Recommended --}}
<a href="{{ asset('path/to/asset.pdf')->url() }}">Click Here</a>To include images on your pages, you could just use a regular <img /> tag and put the URL in the src attribute. Although this works, it's not very performant because you include the original source file in the image tag. It would be better to include just the size you need, and to include a srcset of other sizes for alternative screen sizes. To make it easy for you to do this, Devisto provides you an <x-img /> component, which does all the heavy lifting for you:
{{-- ❌ Don't use a normal img-tag (works but is not performant) --}}
<img src="{{ asset('path/to/asset.jpg')->url() }}">
{{-- ✅ Use the x-img component to render images --}}
{{-- You can just give it a path --}}
<x-img src="path/to/asset.jpg" />
{{-- Or pass PHP stuff, but be aware to never use {{ ... }} like in
regular Blade, but prefix the attribute with a colon --}}
<x-img src="{{ $image }}" /> {{-- ❌ Won't work --}}
<x-img :src="$image" /> {{-- ✅ Will work --}}
{{-- Closing the tag is mandatory --}}
<x-img :src="$image"> {{-- ❌ Won't work --}}
<x-img :src="$image" /> {{-- ✅ Will work --}}
{{-- You can threat it as a normal HTML tag --}}
<x-img :src="$image" class="border border-green-500 rounded-full" alt="..." />
{{-- Example with a loop --}}
@foreach (table('products')->get() as $product)
<h2>{{ $product->title }}</h2>
<x-img :src="$product->image" />
@endforeach
{{-- Example with the Tailwind aspect ratio utilities --}}
<div class="aspect-w-4 aspect-h-3">
<x-img :src="$image" class="object-cover" />
</div>So, whenever you need to include an image, make sure to always use the <x-img /> tag.
In CSS you can also include assets, for example to work with font files:
@font-face {
font-family: 'filson-pro';
src: url('path/to/filson-pro-light.woff2') format('woff2');
...
}Devisto will automatically compile this CSS to include the correct asset URL.