画像ユニット

画像ユニットでは、画像ファイルの埋め込み表示とレイアウト、かんたんな編集ができます。

Ver.3.2から「画像ユニット」はレガシー機能となります。
新しく利用される場合は、代替機能の「メディアユニット」をご利用ください。

なお、画像ユニットの廃止予定はありません。すでにご利用中の方はそのままお使いいただけますが、新規利用は推奨いたしません。


画像ユニットでできること


  • 画像のアップロード
  • 画像のレイアウト(右寄せ・左寄せ・中央寄せ)
  • 画像サイズの指定
  • 拡大と回転の指定
  • (詳細設定として)キャプション、リンク、代替テキストの指定


画像のアップロード


操作中のPC内に保存されている画像ファイルをアップロードします。この際、複数のファイルを選択し、一括でアップロードもできます。また、画像ファイルを画像ユニットの編集画面にドラッグ&ドロップすることでもアップロードできます。(一括アップロード、ドラッグ&ドロップでのアップロードは、旧バージョンのIEでは動作しません) 一括アップロードを行った場合、レイアウト、サイズなどの指定は複数のファイルで同じ内容が指定されますのでご注意ください。



a-blog cmsでは、大きな画像ファイルをアップロードする際、ブラウザ側で縮小処理を行った後にアップロードをします。この際の縮小サイズは、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」の数値となります。



画像のレイアウト(右寄せ・左寄せ・中央寄せ)


画像を表示する際、右・左・中央のいずれかの配置を指定できます。


画像サイズの指定


エントリー内で表示する際の表示サイズを指定できます。 管理ページ > コンフィグ > 編集設定 にある「サイズセレクトのイメージサイズ選択肢」で指定した内容が選択肢として表示されます。



拡大と回転の指定


画像の簡単な編集として、画像の拡大禁止と回転を指定できます。 人物が写っている画像など、拡大して詳細を見せたくないという場合には「拡大表示させない」を選択すると、画像を表示する際に拡大リンクが無い状態となります。また、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」で指定したサイズの画像も作成されません。

回転には「時計回りで90度回転」「反時計回りで90度回転」「180度回転」があり、それぞれ画像を回転した状態で保存・表示します。

そのほか、項目として「削除」があり、選択して保存すると該当する画像ユニットが削除されます。ユニット右上の削除ボタンと同じ動作となります。



(詳細設定として)キャプション、リンク、代替テキストの指定


画像ユニットは、キャプション、リンク、代替テキストの指定ができます。

リンクは、リンク先を入力することで、エントリ内で表示される画像にリンクが指定されます。

代替テキストはブラウザ上での表示には影響しませんが、画像の代替テキストとなるalt属性として使用されます。



画像ユニットに関する注意点


アップロードできるファイル形式

画像ユニットでは、jpg、gif、png、bmp、xbmの各画像形式に対応しています。 なお、gifアニメーションには対応していません。

一定数以上、画像のアップロードができない

1つのエントリーで、画像ユニットや画像のカスタムフィールドを使って、写真・画像ファイルを添付すると20枚以上はアップロードできないことがあります。 サーバー側(PHP)の設定で、関連する項目に制限が設けられている場合にこのような問題が発生します。 詳しくは開発ブログ「画像が一定数枚までしかアップロードできない場合の対処法」をご確認ください。

「今いるページ / 全ページ数」を表示させるページャーのカスタマイズ


標準のページャーの設定では、上記の画像のように 1 2 3 4 のように表示され、今いるページのスタイルが違うような表示になるようになっています。先日サポートで、これを 1 / 4 と表示させたいという相談があり、その対応が簡単に思いつかなかったのでブログに書き残しておきます。

Entry_Summary のコンフィグ 初期設定



利用できる変数を考える

表示させる 1 / 4 は「現在表示しているページ / 全ページ数」ということになります。

「現在表示しているページ」については、Entry_Summary の変数にはありませんが、グローバル変数に %{PAGE} というものが用意されていますので、これを利用ください。



問題は「全ページ数」です。Entry_Summary の変数表に以下のような {lastPage} という設定があります。これがページ数が少ない時に初期の設定では表示ができない仕様になっております。これを強制的に表示するための設定するための「前後に表示するページ数」に -1 を設定することで目的の動きになります。

カスタマイズ設定

Entry_Summary のコンフィグ設定



テンプレートへの記述

<p class="acms-text-center">%{PAGE} / {lastPage}</p>

これで当初の目的である 1 / 4 が表示可能になります。


GETモジュールのID化


独自に開発した GET モジュール及び、V2 GET モジュールも、標準のビルドインモジュールと同様にモジュールID化できます。ここでは、モジュールID化の仕方と、モジュールID化によってどのような動作になるかを説明します。

モジュールID化できるようにする

まずモジュールID化に対応するため、モジュールID作成時に独自モジュールを選択できるようにします。

ご利用のテーマに以下のファイルを作成し、セレクト要素を記述します。

ファイル: /themes/ご利用テーマ/admin/module/select.user.html

従来のGETモジュールの場合

<optgroup label="独自モジュール">
    <option value="Sample"{name:selected#Sample}>独自モジュール(Sample)</option>
</optgroup>

V2 GETモジュールの場合

<optgroup label="独自モジュール">
    <option value="V2_Sample"{name:selected#V2_Sample}>独自モジュール(V2 Sample)</option>
</optgroup>

仕様(共通)

  • : テンプレートで呼び出すモジュール名と同じ値

  • 変数: {name:selected#セレクトの値}

この実装を行うことでモジュールIDの作成ができるようになります。

モジュールIDの作成

管理画面のモジュールID作成画面で、上記で追加した独自モジュールを選択し、識別子(identifier)を設定してモジュールIDを作成します。

従来のGETモジュールの呼び出し

標準テンプレートでは id 属性で識別子を指定します。

<!-- BEGIN_MODULE Sample id="sample" --><!-- END_MODULE Sample -->

V2 GETモジュールの呼び出し

Twig テンプレートでは module() の第2引数で識別子を指定します。

{% set result = module('V2_Sample', 'sample') %}

モジュールID化でのコンテキスト情報の取得

モジュールID化した時のコンテキスト情報の取得について解説します。従来のGETモジュールと V2 GET モジュールで、スコープの設定方法が異なりますが、引数・固定値によるコンテキストの取得ルールは共通です。

モジュールID化する前

モジュールIDを指定しない場合、スコープで global を設定していれば、$this->bid$this->cid$this->eid で表示ページの URL コンテキスト情報を取得できます。

従来のGETモジュール

public $_scope = [
    'bid' => 'global',
    'cid' => 'global',
    'eid' => 'global',
];

function get()
{
    return "BID = $this->bid, CID = $this->cid, EID = $this->eid";
}

V2 GETモジュール

protected $scopes = [
    'bid' => 'global',
    'cid' => 'global',
    'eid' => 'global',
];

public function get(): array
{
    return [
        'bid' => $this->bid,
        'cid' => $this->cid,
        'eid' => $this->eid,
    ];
}

モジュールID化した場合

モジュールIDを指定して呼び出した場合、そのままでは $this->cid$this->eid で表示ページのコンテキスト情報を取得できません。(bid だけはモジュールID化しても取得できます。)

URLコンテキスト情報を取得するには

モジュールID管理画面で、取得したい情報の引数項目にチェックを付けます。これにより URL コンテキストの情報を取得できるようになります。

固定値の設定

$this->cid$this->eid は通常 URL コンテキスト情報を取得しますが、モジュールID化すると、固定値を設定することで挙動が変わります。

モジュールID管理画面で固定値を設定した場合、表示している URL が別のカテゴリーや、トップページなどカテゴリー情報がない場合でも、常に $this->cid は固定値で設定したカテゴリーIDを返すようになります。

モジュールID化時のコンテキスト情報の取得まとめ(共通)

引数チェック

固定値

$this->cid などのプロパティ

あり

なし

URL の情報を取得

なし

あり

モジュールIDで設定した固定値を取得

あり

あり

URL に該当の情報があれば URL の情報を取得。ない場合は固定値を取得

表示ページのURLコンテキストを常に取得したい場合

モジュールIDの設定と関係なく表示ページの URL コンテキストを取得したい場合は、定数を利用します。

項目

定数

ブログID

BID

ユーザーID

UID

カテゴリーID

CID

エントリーID

EID

キーワード

KEYWORD

タグ

TAG

フィールド

FIELD

日時検索のスタート

START

日付検索のエンド

END

ページ番号

PAGE

並び順

ORDER

最大表示件数

LIMIT

// モジュールIDの設定に関係なく表示ページのカテゴリーIDを取得
$displayPageCid = CID;

従来のGETモジュールと V2 GETモジュールの違い(モジュールID化)

項目

従来のGETモジュール

V2 GETモジュール

スコープの設定

$_scope プロパティ

$scopes プロパティ

テンプレートでの呼び出し

<!-- BEGIN_MODULE Sample id="sample" -->

module('V2_Sample', 'sample')

戻り値

文字列

配列