Media

Dearnex themes are built up of assets that are stored in the theme itself in the assets folder or in the media manager on Beacon.

Accessing Assets

If you want to access assets in the assets folder you can use the cdn_asset() function which will retrieve the url for you.

Loading an image example:

<img src="{{ cdn_asset('images/my-image.png') }}" />

Loading a placeholder, the example will load an image that is 480px (w) x 520px (h)

<img src="{{ placeholder(480,520) }}" />

In the example above we are loading my-image.png from the assets/images/my-image.png folder.

Accessing Media Manager Assets

You cannot just randomly access images from the media manager, they must be loaded by a component initially unless it's an image from the settings or a primary image like: logo, checkout logo or email logo.

If you wanted to load the stores primary logo you can do this:

@if(Site::logo())
    <img src="{{ media_obj(Site::logo()) }}" alt="{{ config('shop.name') }} Logo">
@else
    {{ config('shop.name') }}
@endif

In the example, if the logo is not present, we just display the shops name instead.

Any image being loaded from the media manager will instead use the media_obj() function which accepts a null value or instance of the App\Models\Media model.

The media_obj also accepts a second parameter which can be either: null, "small", "medium" or "large".

Alternatively if you want to configure the: size, fit, quality, background and other little details of the image you can use the media() function which also accepts an instance of the AppModels\Media model

Example, resizing the logo to fit a very specific box (200x50)

@if(Site::logo())
    <img src="{{ media(Site::logo(), ['width' => 200, 'height' => 50, 'fit' => 'contain', 'bg' => '#ffffff']) }}" alt="{{ config('shop.name') }} Logo" width="200" height="50">
@else
    {{ config('shop.name') }}
@endif