Search code examples
laraveloctobercmsoctobercms-backend

Media Finder display Image on Front End

I created a Model and Database and can upload an image using the Media Finder.

media finder

I set Media Finder field as photo in fields.yamal.

But after uploading, no image path is saved to the database in the photo column.

Database Tables

  • id (integer)
  • title (string)
  • photo (string)

Twig

{% for product in builderListCatalog.records %}
    {{ product.title }}
    <img src="{{ product.photo }}" />
{% endfor %}

This successfully displays the Title but not the Photo path because it is empty in the database.

Solution

  • You need to remove all the relation added to that field from model.

    You are using public $attachOn remove it that is the issue now its treated like file attachment relation not a finder image so it will not store path of image in that photo (string) field in table

    If you use media finder you just need to add normal string (photo) field in table no need to add any relation in model and it will just store selected file path in that field for ex. /someimage.png

    Now to show it in front-end you can use

    <img src="{{ model.photo|media }}" />

    In component partial you can use

    <img src="<?php echo 'https://october-plaza.com/storage/app/media/' . $model->photo ?>" />

    if any doubt please comment.