Help us understand the problem. What is going on with this article?

cakePHP3で画像を使ったradioFormを作る

More than 3 years have passed since last update.

やりたかったこと

どの海パンを選びますか?
mi.png

みたいなformが作りたかったのです。

作り方

基本的なformの作り方は、公式リファレンスを見ていただくとして・・。
inputの部分ですが、こんな感じに書くといけます。

// $iconsには、***.pngというファイル名が配列で格納されており、
// webroot/imgに***.pngが置かれてあるとします。
echo $this->Form->radio('icon', array_map(function ($icon) {
    return ['value' => $icon, 'text' => $this->Html->image($icon, ['alt' => $icon])];
}, $icons), ['escape' => false]);

どうなっているかというと、まずFormHelperのradio()の引数はこんな感じになってます。

FormHelper.php
public function radio($fieldName, $options = [], array $attributes = []) {
    ...
}

コツとしては、\$optionsに、textで画像のhtmlを渡すこと。
もう1つ目のコツは、引数の$attributesに、escapeをfalseで渡すことです。
こうすることで、HtmlHelperで生成されたimgのhtmlが、そのままradio用の画像として使われます。
escapeを指定しないと、生成されたhtmlがサニタイズされるので、文字列のまま表示されます。

注意点

逆に言うと、escapeをfalseにするとサニタイズされません。
具体的には、valueとtextが対象となります。
使用するときは、十分気をつけてください。
上記の例だと、\$iconをサニタイズしたほうが良いと思います。

$icon = h($icon);
ukisoft
まったり developer です。python と js を使うことが多いです。
rymansat
普段は宇宙開発に関わっていないサラリーマンが身近で誰でもできる宇宙開発を実現させることがリーマンサット・プロジェクト(Ryman Sat Project=rsp.)の目的です。キューブサットの開発をはじめ、宇宙を軸として様々なコミュニティやクリエイターとコラボレーションし、民間宇宙開発に関するネットワークを強化、拡張することを目指して活動しています。
https://www.rymansat.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした