How to change the front page & component image from the backend? how to get HTML tag attributes in php?

问题

my model Settings.php

class Settings extends Model
{
    public $implement = ['System.Behaviors.SettingsModel'];
    // A unique code
    public $settingsCode = 'dca_plugins_settings';
    // Reference to field configuration
    public $settingsFields = 'fields.yaml';
    /**
     * @var array Relations
     */
    public $attachOne = [ 'avatar' => ['System\Models\File'] ];
}

my Fields.yaml

fields:
  id:
    label: ID
    disabled: true

  avatar:
    label: Avatar
    type: fileupload
    mode: image
    imageHeight: 150
    imageWidth: 250

my Component comp.php

public $avatar_id = 1;

public function getAvatarImage($avatar_id)
{
    $var = \System\Models\File::select('disk_name')->where('attachment_id', $avatar_id)->first();           
    if (count($var) == 0) return "";

    return $var->path;
} 

function setMyAvatarId($id)
{
    $this->avatar_id = $id;
}

my html default.htm

{% set avatar_id= __SELF__.property("avatar_id") %}

{% if avatar_id is not empty %}
{% do __SELF__.setMyAvatarId(avatar_id) %}
{% endif %}

<img id="avatar-image" alt="Virtual agent avatar" src="{{ __SELF__.getavatarImage(avatar_id) }}">
<script>
var avatar_id = {{ avatar_id }};
</script>

I manage to get a random link but the image is not shown

backend - model settings

Does anyone know how to define page properties? How do I link my page to the model settings?

How do I make it work? Someone pls help me~~ I'm so lost :(

回答1:

To change the image you can add this to your model:

public $attachOne = ['avatarImage'];

and you don't have to create a column in the database called avatarImage because October will automatically store your image in another table called 'system_files' or something like that. So in your fields.yaml you'll have to add this:

avatarImage:
     type: mediafinder
     mode: image
     label: My Avatar

Then October will create a mediafinder form widget in your settings controller in the control panel and you can change it. And to show the image in your frontend page you will have to add some code in the php code section of the page

$this['settings'] = //The Code to Get the Model;

And easily you can display the image using getPath() method.

<img src="{{ settings.getPath() }}" />

If the above code didn't work you can replace it with:

<img src="{{ settings.getPath()|media" />

I think the second one will work correctly, I didn't use october for a while :D

I hope this helps you.

来源：https://stackoverflow.com/questions/38428114/how-to-change-the-front-page-component-image-from-the-backend-how-to-get-html

标签

php

model-view-controller

frontend

backend

octobercms