Media Conversions - Retrieve - Vue

[Felda01]

Hi!

how to load media conversions into Vue?

Model:

public function registerMediaConversions(Media $media = null): void
    {
        $this->autoRegisterPreviews();

        $this->addMediaConversion('detail_hd')
            ->width(1920)
            ->height(1080)
            ->sharpen(10)
            ->performOnCollections('images');

        ...
    }

Controller:

$project->load(['media', ...]);

Vue:

Files:

There is an example of loading media conversions in the docs, but it's PHP code - https://docs.craftable.pro/basic-features/media#retrieve

Thanks

[timoransky]

Hi @Felda01 ,

in Vue, you can only work with the data you sent from your controllers. Since we haven't changed the Media behaviour too much, to access all media conversions you can try to follow Spatie's documentation https://spatie.be/docs/laravel-medialibrary/v10/converting-images/retrieving-converted-images.

But at least including some easy way to load all the conversions might be an excellent enhancement. 🤔

[Felda01]

Hi @timoransky ,

This is my temporary (or permanent?) solution:

app\Http\Middleware\CraftableProHandleInertiaRequests.php:

class CraftableProHandleInertiaRequests extends Middleware
{
   ...
   public function share(Request $request): array
   {
        ...
        return array_merge(parent::share($request), [
            ...
            'media' => [
                'conversions_folder' => 'conversions',
                'defaul_format' => '.jpg'
            ],
        ]);
    }

resources\js\craftable-pro\types\index.ts:

import { PageProps } from "craftable-pro/types/page";

export type ExtendedPageProps = PageProps & {
  media: {
    conversions_folder: string;
    defaul_format: string;
  }
}

export type ExtendedUploadFile = UploadedFile & {
  generated_conversions: Record<
    string,
    {
      detail?: boolean;
      detail_hd?: boolean;
    }
  >;
  name: string;
  conversions_disk: string;
}
// detail and detail_hd are registered media conversions in the Laravel model

resources\js\craftable-pro\helpers\index.ts:

import type { ExtendedPageProps, ExtendedUploadFile } from "../types";

const page = usePage<ExtendedPageProps>();

export const getMediaUrl = (media: ExtendedUploadFile | undefined, conversion: string | undefined) => {
  if (isEmpty(conversion) || (conversion !== undefined && media?.generated_conversions[conversion] === undefined)) {
    return media?.original_url;
  }

  return '/' + [media?.conversions_disk, media?.id, page.props.media.conversions_folder, media?.name + "-" + conversion + page.props.media.defaul_format].join('/');
}

const isEmpty = (value: string | undefined) => {
  return !value || value === undefined || value === "";
};

resources\js\craftable-pro\Pages\ModelExample\types.d.ts

export type ModelExample = {
  ...
  media?: ExtendedUploadFile[];
  ...
}