Using nova-media-library to upload images and using nova-page to show it

1.8k Views Asked by At

So I am using Laravel 7 with Nova 2.

I have the classic-o/nova-media-library set up and working and I am using whitecube/nova-page to edit static content in my pages.

I managed to create an upload field for the logo of my website inside my HeaderOptions inside the whitecube/nova-page module. Everything seems to work fine on the backend side of things. I can select an image from my computer and sucessfuly upload it and save. So now I am at the pointe where I would like to show that image in my blade template.

I would normally use

@option('header.logo')

to get the data from whitecube/nova-page but that outputs the file ID (In this case, 18). I need the file path not the id. So I checked the classic-o/nova-media-library documentation and it appears I need to use the API in order to get the file path using the file ID ... So now I am just confused ... I don't understand how to do that ... I tried the following:

<div class="logo">
    @php
        use ClassicO\NovaMediaLibrary\API;
        $logo = API::getFiles(@option('header.logo'), null, true)
    @endphp
    <a href="/"><img src="{{ $logo->path }}" title="Boutique Terrey.ca" /></a>
</div>

But to me that does not seem right ... using a use in a blade template is just wrong ... also, the @option('header.logo') part does not seem to work when inside a @php @endphp tag.

The error is: Call to undefined function option()

My HeaderOptions.php page looks like this:

namespace App\Nova\Templates;

use Illuminate\Http\Request;
use Laravel\Nova\Fields\Text;
use Whitecube\NovaPage\Pages\Template;
use ClassicO\NovaMediaLibrary\MediaLibrary;

class HeaderOptions extends Template {

    /**
     * Get the fields displayed by the resource.
     *
     * @param  \Illuminate\Http\Request $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [
            MediaLibrary::make('Logo')->types(['Image'])->preview('thumb'),
            Text::make('Phone', 'phone'),
            Text::make('Email', 'email'),
        ];
    }

    /**
     * Get the cards available for the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function cards(Request $request)
    {
        return [];
    }

}

Whats the right way of outputting the file path when you use nova-media-library to upload images and using nova-page to show it? I am lost! Thanks in advance!

===========================

UPDATE

Good news! I managed to get it working ... but I just don't like my solution ...

<div class="logo">
    @php
        use ClassicO\NovaMediaLibrary\API;
        $id =  Page::option('header')->logo;
        $logo = API::getFiles($id, null, true);
    @endphp
    <a href="/"><img src="{{ $logo->url }}" title="Boutique Terrey.ca" /></a>
</div>

The image appears ... but using a "use" inside my blade template is ugly ... Is there a better way of doing this?

Now I could also just do

<div class="logo">
    @php
        $logo = ClassicO\NovaMediaLibrary\API::getFiles(Page::option('header')->logo, null, true);
    @endphp
    <a href="/"><img src="{{ $logo->url }}" title="Boutique Terrey.ca" /></a>
</div>

But again, the $logo should not be in the blade file ... How can I pass that to my controller?

0

There are 0 best solutions below