Using ebess/advanced-nova-media-library field within flexible content doesn't generate converted images

[phaerakh]

The package works great and it has been of great help, but there is one issue. While using ebess/advanced-nova-media-library field like Images inside flexible content layout it works doesn't seem to generate converted images. Am I missing something?

Here's the model:

<?php

namespace App\Models;

use App\Casts\ConstructorCast;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\Image\Manipulations;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Whitecube\NovaFlexibleContent\Concerns\HasFlexible;

class Event extends Model implements HasMedia
{
    use HasFactory, InteractsWithMedia, HasFlexible;

    /**
     * Register the conversions that should be performed.
     *
     * @return array
     */
    public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(130)
            ->height(130)
            ->sharpen(10)
            ->performOnCollections('preview')
            ->nonOptimized();

        $this->addMediaConversion('detail-webp')
            ->format(Manipulations::FORMAT_WEBP)
            ->width(1920)
            ->height(888)
            ->sharpen(10)
            ->performOnCollections('detail')
            ->nonOptimized()
            ->nonQueued();

        $this->addMediaConversion('detail')
            ->width(1920)
            ->height(888)
            ->sharpen(10)
            ->performOnCollections('detail')
            ->nonOptimized()
            ->nonQueued();

        $this->addMediaConversion('preview-webp')
            ->format(Manipulations::FORMAT_WEBP)
            ->width(750)
            ->height(563)
            ->sharpen(10)
            ->performOnCollections('preview')
            ->nonOptimized()
            ->nonQueued();

        $this->addMediaConversion('preview')
            ->width(750)
            ->height(563)
            ->sharpen(10)
            ->performOnCollections('preview')
            ->nonOptimized()
            ->nonQueued();

        $this->addMediaConversion('slider-webp')
            ->format(Manipulations::FORMAT_WEBP)
            ->width(750)
            ->height(500)
            ->sharpen(10)
            ->performOnCollections('photo_main_1', 'photo_main_2')
            ->nonOptimized()
            ->nonQueued();

        $this->addMediaConversion('slider')
            ->width(750)
            ->height(500)
            ->sharpen(10)
            ->performOnCollections('photo_main_1', 'photo_main_2')
            ->nonOptimized()
            ->nonQueued();
    }

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('preview')->singleFile();
        $this->addMediaCollection('detail')->singleFile();
        $this->addMediaCollection('photo_main_1')->singleFile();
        $this->addMediaCollection('photo_main_2')->singleFile();
    }

    public function getRouteKeyName()
    {
        return 'slug';
    }

    protected $dates = [
        'held_at'
    ];

    protected $casts = [
        'held_at' => 'datetime',
        'detail_content' => ConstructorCast::class
    ];

    public function tags()
    {
        return $this->belongsToMany(Tag::class);
    }
}

Here's the layout:

<?php

namespace App\Nova\Flexible\Layouts;

use Ebess\AdvancedNovaMediaLibrary\Fields\Images;
use Spatie\Image\Manipulations;
use Whitecube\NovaFlexibleContent\Layouts\Layout;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Whitecube\NovaFlexibleContent\Concerns\HasMediaLibrary;

class SliderLayout extends Layout implements HasMedia
{
    use HasMediaLibrary;

    /**
     * The layout's unique identifier
     *
     * @var string
     */
    protected $name = 'slider';

    /**
     * The displayed title
     *
     * @var string
     */
    protected $title = 'Slider block';

    /**
     * Register the conversions that should be performed.
     *
     * @return array
     */
    public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(130)
            ->height(130)
            ->performOnCollections('images');

        $this->addMediaConversion('webp')
            ->format(Manipulations::FORMAT_WEBP)
            ->width(750)
            ->height(450)
            ->performOnCollections('images')
            ->nonQueued();

        $this->addMediaConversion('standard')
            ->width(750)
            ->height(450)
            ->performOnCollections('images')
            ->nonQueued();
    }

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('images');
    }

    /**
     * Get the fields displayed by the layout.
     *
     * @return array
     */
    public function fields()
    {
        return [
            Images::make('Images', 'images')
        ];
    }
}

[mvdstam]

I've ran across the same issue, and after some debugging it seems the registerMediaConversions method is never called for the Layout instance.

For example. If you have a Layout defining a collection called image, the nova-flexible-content package eventually dynamically appends a suffix to that collection with an unique key (namely, the layout key of the corresponding layout entry). This leads to collections being named something like image_7544fd521d3e9199. This means that the media conversions themselves need to be defined dynamically as well.

I fixed this by updating the registerMediaConversions method in the corresponding Eloquent model as follows:

public function registerMediaConversions(Media $media = null): void
    {
        if ($media && Str::startsWith($media->collection_name, 'image_')) {
            $this
                ->addMediaConversion('view')
                ->fit(Manipulations::FIT_CROP, 1600, 960)
                ->performOnCollections($media->collection_name);
        }

        // Your other, non-dynamic conversions
}

The conversions, even in deeply nested layouts, seem to work correctly now. Regenerating media via the php artisan media-library:regenerate works correctly as well. Please be aware that this is more of a workaround rather than being an actual fix. Your mileage may vary.

[soyab72]

Thanks @mvdstam This solutions helped me a lot. i've used different method ->fit(Manipulations::FIT_STRETCH, 373, 244)

[cv-chameleon]

@mvdstam I have the same issue you had, but I don't understand what the solution was for you.

As you said, the "registerMediaConversions" doesn't seem to be called on the Layout instance, so the changes you suggested within these function don't make a difference for me, as the function wasn't called anyway.

Thanks in advance for the help!