This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

sercanvirlan
sercanvirlan

or is there a way to manipulate data on column listing before show?

planetadeleste
planetadeleste

@sercanvirlan

I have the same question. Can you show images in lists?

thanks

Flynsarmy
Flynsarmy

+1. I notice you can use type: switch|datetime|time|date|timesince on list columns but there's no file or image yet.

Shahiem
Shahiem

Like this?

(ShahiemSeymor\Forum\Models\Emoticons)

public function getImageAttribute()
{
    $image = Emoticon::find($this->id);
    return '<img src="'.$image->emoticon->getPath().'" />';
}

Last updated

Flynsarmy
Flynsarmy

I'm not sure that's the greatest solution. For instance in the List you'll want a very small thumbnail of the image. On the frontend of your website you'll want the full size or a much larger thumbnail (or even multiple sizes).

Daniel81
Daniel81

You could use the getThumb() from the Database/Attach/File.php class?

d.negativa
d.negativa

O yes! thanks Shahiem and Daniel81!
my example:
add this method for your model:
(in my case this Product)


public function getImageAttribute()
{
        // $product = Product::find($this->id);
        $product = $this->find($this->id);
        return '<img src="'.$product->featured_images[0]->getThumb(50, 50, 'crop').'" />';
}

add this field for columns.yaml


columns:
  image:                # <- add this prewiew column
    label: Prewiew
  name:
    label: Name
    searchable: true

sorry for my english

Last updated

planetadeleste
planetadeleste

@d.negativa

Can you explain how to do that? Do you need a "image" column in database? I try your example and I receive an Exception of missed "image" column in Db.

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'image' in 'order clause' 

Thanks.

planetadeleste
planetadeleste

Ok, I figured how to do that. I made some mistakes.

First

file config_list.yaml on Controller
Uncomment the default sorting lines

# Default sorting column
defaultSort:
    column: name
    direction: asc

Second

file columns.yaml on Model
Use the option sortable: no

columns:
    image:
        label: Thumbnail
        sortable: no

Thirth

Model file
If the relation is attachOne use the attach method without the array selection. In my case:

public $attachOne = [
    'featured' => ['System\Models\File']
];

And use $project->featured->getThumb( ... )

If use attachMany select the first element $project->featured[0]->getThumb( ... )

Write this:

public function getImageAttribute()
{
    $project = $this->find($this->id);
    return '<img src="'.$project->featured->getThumb(50, 50, 'crop').'" />';
}

Issues

The problem here is when you see the list, the column image can be sorted, the option sortable: no has no effect here.
octoberCMS listing images issue

planetadeleste
planetadeleste

Ups, my mistake. The sortable option must be sortable: false I got confused with the search option searchable: yes|no.

Daniel81
Daniel81

Does this still work - I can't seem to get it working (build 133) ? I used to have it working, but for some reason it doesn't anymore, have I missed something ?

columns.yaml:

columns:

    thumb:
        label: Thumbnail
        sortable: false

config_list.yaml:

defaultSort:
    column: thumb
    direction: desc

Model:

public function getThumbAttribute()
{
    return "THUMB";
 }

but all I get is the error:

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'thumb' in 'order clause' (SQL: select `system_files`.* from `system_files` group by `system_files`.`id` order by `thumb` desc)
Daniel81
Daniel81

Got it working again, you need to use image in your columns.yaml file like:

image:
    label: Thumbnail
    sortable: false

Last updated

Daniel81
Daniel81

This is weird, the above works on one installation I have of October, but not on another - both MAMP 2 v5.5.10 ?

Get the error:

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'image' in 'order clause' (SQL: select `system_files`.* from `system_files` group by `system_files`.`id` order by `image` desc)

Weird!

Is there a way to add a column to the list widget that's NOT in the database table?

Last updated

adis.osmonov
Sylvert
Sylvert

bump i have the same problem SQLSTATE[42S22]: Column not found: 1054 Unknown column 'icon' in 'order clause' (SQL: select sylvert_gameservers_games.* from sylvert_gameservers_games order by icon desc limit 20 offset 0)

<?php namespace Sylvert\GameServers\Models;

use Model;

/**
 * Game Model
 */
class Game extends Model
{

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

    /**
     * @var array Fillable fields
     */
    protected $fillable = ['code', 'name', 'source_engine'];

    /**
     * @var array Validation rules
     */
    public $rules = [
        'code'          => 'required|unique:sylvert_gameservers_games',
        'name'          => 'required',
        'source_engine' => 'required'
    ];

    public $attachOne = [
        'icon' => ['System\Models\File']
    ];

     /**
     * Returns the public image file path to this user's icon.
     */
    public function getIconAttribute()
    {
        $image = Game::find($this->id);
        return '<img src="'.$image->icon->getThumb(50, 50, 'crop').'" />';
    }
}

columns.yaml

# ===================================
#  List Column Definitions
# ===================================

columns:
    icon:
        label: Icono
        sortable: no
    code:
        label: Código del juego
    name:
        label: Nombre

Last updated

Anand Patel
Anand Patel

@Sylvert

its because you have shown icon at first, as far i think OC sorts first column(icon) by default when you don't specify defaultSort in configuration list.

specify defaultSort : other column in list configuration by refering following documentaiton https://octobercms.com/docs/backend/lists#configuring-list

Last updated

alt
alt

I think

$image = Emoticon::find($this->id);
return '<img src="'.$image->emoticon->getPath().'" />';

is a redundant form of:

return '<img src="'.$this->emoticon->getPath().'" />';

@Sylvert Another hint is you shouldn't name the column identically to the relation, otherwise you'll override its access method. When you try to get $this->someth inside getSomethAttribute() you end up in an infinite loop.

planetadeleste
planetadeleste

@Sylvert , like @alt say, the use of relation named icon and defining a custom attribute like icon, have no sense.

In my app I have the relation named images in a model

public $attachMany = [
    'images' => ['System\Models\File', 'order' => 'sort_order']
];

And for the thumbnail in backend, I have a custom attribute named image. Maybe thumb was a best definition.

public function getImageAttribute()
{
    return ($this->images->count()) ? '<img src="' . $this->images->first()->getThumb(
            50,
            50,
            'crop'
        ) . '" />' : '<img src="http://placehold.it/50x50" />';
}

The custom attribute use the first image and them crop it to 50x50. And for the controller setting, set the config_list.yaml to not sort at first column (like @Anand Patel say), in my case use this:

# Default sorting column
defaultSort:
     column: updated_at
     direction: desc

I hope you solve this problem. Have a nice holidays!!!

Last updated

Jiri Kubak
Jiri Kubak

Functional solution to the latest version 244 columns.yaml


    imageThumb:
        label: Title Image
        type: partial
        path: ~/plugins/webpagesoftware/party/models/area/_column_image.htm

_column_image.htm



=  IMG SRC: $record->image->getThumb('auto', 50) ?>

Last updated

Scott
Scott

If you use the above solution (jirikubak's response), make sure to include this in your controller or you'll run into an N+1 problem and be firing off a bunch of extra queries.

public function index($userId = null)
{
    $this->asExtension('ListController')->index();
}

public function listExtendQuery($query)
{
    $query->with('image');
}

1-20 of 33

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.