19

SonataAdminBundle （Doctrine2 ORMを使用）を使用していて、画像モデルにファイルアップロード機能を正常に追加しました。

[表示]ページと[編集]ページで、関連するフォームフィールドのすぐ上に単純な<img src="{{ picture.url }} alt="{{ picture.title }} />タグを表示して（もちろん、編集中の画像が新しいものでない場合）、ユーザーが現在の写真を表示して、変更するかどうか。

何時間もの研究の後、私はそれを行う方法を理解することができませんでした。テンプレートを上書きする必要があると思いますが、少し迷っています...誰かにヒントを教えてもらえますか？

ありがとうございました！

これが私のPictureAdminクラスの関連セクションです。

protected function configureFormFields(FormMapper $formMapper)
{
    $formMapper
        ->add('category', NULL, ['label' => 'Catégorie'])
        ->add('title', NULL, ['label' => 'Titre'])
        ->add('file', 'file', ['required' => false, 'label' => 'Fichier']) // Add picture near this field
        ->add('creation_date', NULL, ['label' => 'Date d\'ajout'])
        ->add('visible', NULL, ['required' => false, 'label' => 'Visible'])
        ->add('position', NULL, ['label' => 'Position']);
}

protected function configureShowFields(ShowMapper $showMapper)
{
    $showMapper
        ->add('id', NULL, ['label' => 'ID'])
        ->add('category', NULL, ['label' => 'Catégorie'])
        ->add('title', NULL, ['label' => 'Titre'])
        ->add('slug', NULL, ['label' => 'Titre (URL)'])
        ->add('creation_date', NULL, ['label' => 'Date d\'ajout'])
        ->add('visible', NULL, ['label' => 'Visible'])
        ->add('position', NULL, ['label' => 'Position']);
        // Add picture somewhere
}

4

7 に答える 7

14

編集フォームのフィールドの上に画像を配置することができました。ただし、アップロードを処理するためにVich Uploader Bundleを使用しているため、私のソリューションは少し具体的です。バンドルヘルパーのおかげで、画像のURLの生成が少し簡単になりました。

私の例、映画エンティティの映画ポスターフィールドを見てみましょう。これは私の管理者クラスの一部です：

//MyCompany/MyBundle/Admin/FilmAdmin.php

class FilmAdmin extends Admin {

protected function configureFormFields(FormMapper $formMapper)
{
 $formMapper
     ->add('title')
 ....
     ->add('poster', 'mybundle_admin_image', array(
                'required' => false,
                ))
}

mybundle_admin_imageカスタムフィールドタイプによって処理されます。これは、getParentメソッドを設定することでファイルタイプの子になります:(タイプクラスをサービスとして登録することを忘れないでください）

//MyCompany/MyBundle/Form/Type/MyBundleAdminImageType.php

public function getParent()
{
    return 'file';
}

次に、Sonataのデフォルトのスタイルを拡張するテンプレートがあり、それをadminクラスに含めています。

//MyCompany/MyBundle/Admin/FilmAdmin.php

public function getFormTheme() {
    return array('MyCompanyMyBundle:Form:mycompany_admin_fields.html.twig');
}

そして最後に、基本的なファイルタイプを拡張するカスタムイメージタイプのブロックがあります。

//MyCompany/MyBundle/Resources/views/Form/mycompany_admin_fields.html.twig

{% block mybundle_admin_image_widget %}
{% spaceless %}
    {% set subject =  form.parent.vars.value %}
    {% if subject.id and attribute(subject, name) %}
        <a href="{{ asset(vich_uploader_asset(subject, name)) }}" target="_blank">
            <img src="{{ asset(vich_uploader_asset(subject, name)) }}" width="200" />
        </a><br/>
    {% endif %}
    {% set type = type|default('file') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{% endspaceless %}
{% endblock %}

これにより、200ピクセル幅の画像のプレビュー（存在する場合）がアップロードフィールドの上に表示され、新しいタブで開くフルサイズバージョンにリンクされます。ライトボックスプラグインを追加するなど、必要に応じてカスタマイズできます。

于 2012-10-02T18:26:12.617 に答える
11

これは、ヘルパー（FormMapper-> setHelps）またはFormMapperのオプション「help」パスによって編集ページで簡単に行うことができます。

protected function configureFormFields(FormMapper $formMapper) {
    $options = array('required' => false);
    if (($subject = $this->getSubject()) && $subject->getPhoto()) {
        $path = $subject->getPhotoWebPath();
        $options['help'] = '<img src="' . $path . '" />';
    }

    $formMapper
        ->add('title')
        ->add('description')
        ->add('createdAt', null, array('data' => new \DateTime()))
        ->add('photoFile', 'file', $options)
    ;
}
于 2013-01-23T00:22:49.967 に答える
9

テンプレート属性の受け渡しにより、ショーページでこれを簡単に行うことができます$showmapper

->add('picture', NULL, array(
    'template' => 'MyProjectBundle:Project:mytemplate.html.twig'
);

テンプレート内で現在のオブジェクトを取得するので、getメソッドを呼び出して画像パスをプルできます

<th>{% block name %}{{ admin.trans(field_description.label) }}{% endblock %}</th>
<td>
    <img src="{{ object.getFile }}" title="{{ object.getTitle }}" />
    </br>
    {% block field %}{{ value|nl2br }}{% endblock %}
</td>

編集モードで画像を表示するには、オーバーライドfileTypeするか、上に独自のcustomTypeを作成する必要がありますfileType

この種の機能を持っているいくつかのバンドルもありますこのGenemuFormBundleをチェックしてください

于 2012-07-06T21:32:33.253 に答える
4

Symfony3のソリューション

@kkochanskiからの答えは、私がこれまでに見つけた最もクリーンな方法です。ここにSymfony3に移植されたバージョンがあります。また、いくつかのバグを修正しました。

新しいフォームタイプの新しいテンプレートimage.html.twigを作成します（フルパス:) src/AppBundle/Resources/views/Form/image.html.twig：

{% block image_widget %}
    {% spaceless %}
        {% set type = type|default('file') %}
        <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
        {% if image_web_path is not empty %}
            <img src="{{ image_web_path }}" alt="image_photo"/>
        {% endif %}
    {% endspaceless %}
{% endblock %}

新しいフォームタイプテンプレートをconfig.yml：に登録します。

twig:
    form_themes:
        - AppBundle::Form/image.html.twig

新しいフォームタイプを作成し、次のように保存しますImageType.php（フルパス:) src/AppBundle/Form/Type/ImageType.php：

<?php

namespace AppBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\FormView;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormBuilderInterface;

/**
 * Class ImageType
 *
 * @package AppBundle\Form\Type
*/
class ImageType extends AbstractType
{
    /**
     * @return string
     */
    public function getParent()
    {
        return 'file';
    }

    /**
     * @return string
     */
    public function getName()
    {
        return 'image';
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'image_web_path' => ''
        ));
    }

    /**
     * @param FormView $view
     * @param FormInterface $form
     * @param array $options
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['image_web_path'] = $options['image_web_path'];
    }

    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->setAttribute('image_web_path', $options['image_web_path'])
        ;
    }
}

これを行った場合。ImageTypeエンティティ管理クラスに新しいものをインポートするだけです。

use AppBundle\Form\Type\ImageType

そして最後に、inline-htmlやボイラープレートコードを含まない新しいフォームタイプを使用しますconfigureFormFields。

$formMapper
    ->add('imageFile', ImageType::class, ['image_web_path' => $image->getImagePath()])
;

代わりに$image->getImagePath()、画像にURLを返す独自のメソッドを呼び出す必要があります。

スクリーンショット

ソナタ管理者を使用して新しい画像エンティティを作成する：

ここに画像の説明を入力してください

ソナタ管理者を使用して画像エンティティを編集する：

ここに画像の説明を入力してください

于 2017-02-10T11:28:32.603 に答える
2

この方法で簡単に行うことができます

    $image = $this->getSubject();
    $imageSmall = '';

    if($image){
        $container = $this->getConfigurationPool()->getContainer();
        $media = $container->get('sonata.media.twig.extension');
        $format = 'small';
        if($webPath = $image->getImageSmall()){
            $imageSmall = '<img src="'.$media->path($image->getImageSmall(), $format).'" class="admin-preview" />';
        }
    }

   $formMapper->add('imageSmall', 'sonata_media_type', array(
      'provider' => 'sonata.media.provider.image',
      'context' => 'default',
      'help' => $imageSmall
   ));
于 2015-09-21T07:02:08.620 に答える
0

Teo.skは、VichUploaderを使用して画像を表示する方法を作成しました。このバンドルなしで画像を表示できるオプションを見つけました。

まず、form_typeを作成する必要があります。チュートリアルがあります：symfony_tutorial

メインの管理者クラス：

namespace Your\Bundle;

//.....//

class ApplicationsAdmin extends Admin {

//...//

public function getFormTheme() {
    return array_merge(
        parent::getFormTheme(),
        array('YourBundle:Form:image_type.html.twig') //your path to form_type template
    );

protected function configureFormFields(FormMapper $formMapper)
{
     $formMapper->add('file_photo', 'image', array(
            'data_class' => 'Symfony\Component\HttpFoundation\File\File',
            'label' => 'Photo',
            'image_web_path' => $this->getRequest()->getBasePath().'/'.$subject->getWebPathPhoto()// it's a my name of common getWebPath method
        ))
        //....//
        ;
}

}

次の部分は、ImageTypeクラスのコードです。

namespace Your\Bundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
use Symfony\Component\OptionsResolver\Options;
use Symfony\Component\Form\FormView;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormBuilder;
use Symfony\Component\Form\FormBuilderInterface;


class ImageType extends AbstractType
{

    public function getParent()
    {
        return 'file';
    }

    public function getName()
    {
        return 'image';
    } 

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'image_web_path'         => ''
        ));
    }

    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['image_web_path'] = $options['image_web_path'];
    }

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
             ->setAttribute('image_web_path', $options['image_web_path'])
        ;
    }
}

そして、image_type小枝テンプレートの終了時に。

{% block image_widget %}
{% spaceless %}
    {% set type = type|default('file') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
    <img src="{{ image_web_path }}" alt="image_photo"/>
{% endspaceless %}
{% endblock %}

私にとってはうまくいっています！また、雪崩バンドルを使用して画像のサイズを変更しています。

于 2014-10-20T10:29:07.307 に答える
0

簡単な方法がありますが、アップロードボタンの下に画像が表示されます。SonataAdminを使用すると、任意のフォームフィールドの「ヘルプ」オプションに生のHTMLを挿入できます。この機能を使用して、画像タグを埋め込むことができます。

protected function configureFormFields(FormMapper $formMapper) {

    $object = $this->getSubject();

    $container = $this->getConfigurationPool()->getContainer();

    $fullPath =     $container->get('request')->getBasePath().'/'.$object->getWebPath();


    $formMapper->add('file', 'file', array('help' => is_file($object->getAbsolutePath() . $object->getPlanPath()) ? '<img src="' . $fullPath . $object->getPlanPath() . '" class="admin-preview" />' : 'Picture is not avialable')

}
于 2015-01-28T16:52:40.353 に答える