エントリー
freoのエントリーとページの編集画面でオプションの画像を表示する方法
- 更新
- カテゴリー:管理画面
- タグ:freoテンプレート
【2018/03/16】ファイルの拡張子が .jpg、.jpeg、.png、.gif の場合は、画像を表示し、それ以外の場合はファイル名を表示するように修正しました。
以前、freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法 を紹介しましたが、今回はオプションで種類をファイルにし画像を登録した場合、編集画面で画像を表示する方法を紹介します。
エントリー編集の場合
templates/internals/admin/entry_form.html の56~64行目あたり(オプションの種類がファイルの部分)の
<!--{elseif $option.type == 'file'}-->
<dd>
<input type="file" name="entry_associate[option][{$option.id}]" size="30" />
<!--{if $input.entry_associate.option[$option.id]}-->
<input type="checkbox" name="entry_associate[option_remove][{$option.id}]" id="label_option_{$option.id}" value="{$input.entry_associate.option[$option.id]}"{if $input.entry_associate.option_remove[$option.id]} checked="checked"{/if} /> <label for="label_option_{$option.id}">{$input.entry_associate.option[$option.id]}を削除</label>
<input type="hidden" name="entry_associate[option][{$option.id}]" value="{$input.entry_associate.option[$option.id]}" />
<!--{/if}-->
</dd>
<!--{/if}-->
の部分を、
<!--{elseif $option.type == 'file'}-->
<dd>
<input type="file" name="entry_associate[option][{$option.id}]" size="30" />
<!--{if $input.entry_associate.option[$option.id]}-->
<br />現在の{$option.name}<br />
<a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_options/{$freo.query.id}/{$option.id}/{$input.entry_associate.option[$option.id]}"><!--{if $input.entry_associate.option[$option.id]|regex_match:'/\.(jpe?g|png|gif)$/i'}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_options/{$freo.query.id}/{$option.id}/{$input.entry_associate.option[$option.id]}" alt="現在の{$option.name}" width="100" /><!--{else}-->{$input.entry_associate.option[$option.id]}<!--{/if}--></a>
<input type="checkbox" name="entry_associate[option_remove][{$option.id}]" id="label_option_{$option.id}" value="{$input.entry_associate.option[$option.id]}"{if $input.entry_associate.option_remove[$option.id]} checked="checked"{/if} /> <label for="label_option_{$option.id}">{$input.entry_associate.option[$option.id]}を削除</label>
<input type="hidden" name="entry_associate[option][{$option.id}]" value="{$input.entry_associate.option[$option.id]}" />
<!--{/if}-->
</dd>
<!--{/if}-->
に変更(赤字を追加)します。
【2018/03/16】ファイルの拡張子が .jpg、.jpeg、.png、.gif の場合は、画像を表示し、それ以外の場合はファイル名を表示するように修正(ピンク字の部分を追加)。
ページ編集の場合
templates/internals/admin/page_form.html の58~66行目あたり(オプションの種類がファイルの部分)の
<!--{elseif $option.type == 'file'}-->
<dd>
<input type="file" name="page_associate[option][{$option.id}]" size="30" />
<!--{if $input.page_associate.option[$option.id]}-->
<input type="checkbox" name="page_associate[option_remove][{$option.id}]" id="label_option_{$option.id}" value="{$input.page_associate.option[$option.id]}"{if $input.page_associate.option_remove[$option.id]} checked="checked"{/if} /> <label for="label_option_{$option.id}">{$input.page_associate.option[$option.id]}を削除</label>
<input type="hidden" name="page_associate[option][{$option.id}]" value="{$input.page_associate.option[$option.id]}" />
<!--{/if}-->
</dd>
<!--{/if}-->
の部分を、
<!--{elseif $option.type == 'file'}-->
<dd>
<input type="file" name="page_associate[option][{$option.id}]" size="30" />
<!--{if $input.page_associate.option[$option.id]}-->
<br />現在の{$option.name}<br />
<a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_options/{$freo.query.id}/{$option.id}/{$input.page_associate.option[$option.id]}"><!--{if $input.page_associate.option[$option.id]|regex_match:'/\.(jpe?g|png|gif)$/i'}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_options/{$freo.query.id}/{$option.id}/{$input.page_associate.option[$option.id]}" alt="現在の{$option.name}" width="100" /><!--{else}-->{$input.page_associate.option[$option.id]}<!--{/if}--></a>
<input type="checkbox" name="page_associate[option_remove][{$option.id}]" id="label_option_{$option.id}" value="{$input.page_associate.option[$option.id]}"{if $input.page_associate.option_remove[$option.id]} checked="checked"{/if} /> <label for="label_option_{$option.id}">{$input.page_associate.option[$option.id]}を削除</label>
<input type="hidden" name="page_associate[option][{$option.id}]" value="{$input.page_associate.option[$option.id]}" />
<!--{/if}-->
</dd>
<!--{/if}-->
に変更(赤字を追加)します。
【2018/03/16】ファイルの拡張子が .jpg、.jpeg、.png、.gif の場合は、画像を表示し、それ以外の場合はファイル名を表示するように修正(ピンク字の部分を追加)。
すると編集画面の
だった部分が
になります。
※添付ファイルが画像以外の場合は下のようにリンク表示になります。
関連エントリー
- 2023/09/05 freoのプロフィールやコメントでGravatarのアバターを表示する方法
- 2021/11/14 ショッピングカートプラグインの商品配送方法・料金などの変更
- 2018/06/10 freo用markItUp!拡張版の配布
- 2018/05/12 freoのエントリーのタグ投稿を楽にする方法
- 2018/03/16 freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法
- 2018/02/09 freoのエントリーとページの管理画面に閲覧制限情報を表示する
- 2017/06/10 freoのtablesorter.jsを最新版にしてメディアの挿入ファイルを更新日時の新しいもの順に並べる
- 2017/06/10 freoのコメント登録フォームを折りたたむボタン
- 2017/06/10 freoをスマートフォンから見た時にリストのリンクなどをボタン化する
- 2017/05/23 freoの管理用テンプレートをBootstrap3でカスタマイズ
コメント
- コメントはまだありません。
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。