Ad

October CMS | How To Get The Path Of An Image In A Component From The Backend File Uploader?

- 1 answer

So I have my plugin setup (or so I believe) but for some reason, in the default.htm file, I cannot get the path of the image that I have uploaded via the backend using the File Upload widget.

For example: <img src="{{ plugin.upload.path }}"> will not show me the path of the image but if I do <img src="{{ plugin.upload.first.path }}"> or <img src="{{ plugin.upload.[0].path }}"> I do indeed get the path of the image but this isn't ideal as I want to show multiple images.

I have a feeling that I'm missing something extremely simple but do excuse my ignorance as I'm very new to October.

Thank you in advance.

components/gallerys/default.htm:

{% set gallerys = __SELF__.gallery %}

<ul>
{% for gallery in gallerys %}

<li>{{ gallery.uploads.path }}</li>

{% endfor %}
</ul>

components/Gallerys.php:

<?php namespace MartinSmith\Gallerys\Components;

use Cms\Classes\ComponentBase;
use MartinSmith\Gallerys\Models\Gallery;

class gallerys extends ComponentBase
{

public $gallery;

public function componentDetails(){
    return [
        'name' => 'Frontend Gallery',
        'description' => 'A gallery for you webpage'
    ];
}

public function onRun(){
    $this->gallery = $this->loadGallerys();
}

protected function loadGallerys(){
    return Gallery::all();
}

}

models/Gallery.php:

<?php namespace MartinSmith\Gallerys\Models;

use Model;

/**
* Model
*/
class Gallery extends Model
{
use \October\Rain\Database\Traits\Validation;

/*
 * Disable timestamps by default.
 * Remove this line if timestamps are defined in the database table.
 */
public $timestamps = false;


/**
 * @var string The database table used by the model.
 */
public $table = 'martinsmith_gallerys_';

/**
 * @var array Validation rules
 */
public $rules = [
];

public $attachMany = [
    'uploads' => 'System\Models\File'
];

}

models/columns.yaml:

columns:
name:
    label: name
    type: text
    sortable: true
uploads:
    type: partial
    path: ~/plugins/martinsmith/gallerys/models/gallery/_image.htm

models/fields.yaml:

fields:
name:
label: Name
span: auto
type: text
uploads:
    label: Upload
    span: full
    mode: image
    useCaption: true
    thumbOptions:
        mode: crop
        extension: auto
    imageWidth: '200'
    imageHeight: '200'
    type: fileupload
Ad

Answer

You are really close to getting it. Here is what I think is going on. You are retrieving an array of items from the model ( {% for gallery in gallerys %} ). Now each of those items in the model can accept an array of images because you are using $attachMany ( {% for image in gallery.uploads %} ). So when you call {{ plugin.upload.first.path }} or {{ plugin.upload.[0].path }} you are taking the first image of the array and getting the path.

So all you need to do is:

{% set gallerys = __SELF__.gallery %}

<ul>
{% for gallery in gallerys %}

    {% for image in gallery.uploads %}

    <li>{{ image.path }}</li>

    {% endfor %}

{% endfor %}
</ul>

One awesome plugin that can help you debug OctoberCMS is the Twig Dump+ ( there is another one that is Twig Dump and that works too but I like the Twig Dump+ ). This allows you to write {{ d(gallery.uploads) }} to see the dump of the object.

Ad
source: stackoverflow.com
Ad