ここでは、メディアに登録された画像の編集に関する機能について紹介します。

メディアを編集する場所

管理画面 > メディア管理 よりメディアに登録した画像やファイルを編集することができます。

編集ボタンをクリックすると以下の画像のように編集用のモーダルウィンドウが出現します。

メディアが画像ファイルの場合、「編集ボタン」からさらに画像のトリミングなどの機能を利用可能です。「編集ボタン」をクリックすると以下のように画像編集用のモーダルウィンドウが表示されます。

画像のトリミング機能

今までCMSの中で直接画像をトリミングすることができなかったので画像編集ソフトなどで一回画像を加工してからCMSに登録するケースが多々ありました。 そこで今回は以下の画像のように画像をアップロードしてその場でトリミングできるような機能を追加しました。画像は、「カスタム、1:1、4:3、16:9」の中から選択してトリミングできます。 下の画像は、「切り抜き」から「1:1」を選択した際のトリミングの様子です。

焦点座標の指定機能

また焦点座標を決めることで、縦長の画像の特定の部分に焦点を合わせて画像をプログラムからトリミングすることも可能です。 たとえば以下のトリミングの例では、人物に焦点が設定されているため、人物を中心に画像をトリミングできます。

js-focused-image

先ほど画像に対して設定した焦点座標は新しく追加された組み込みJS「js-focused-image」を利用することによって効力を発揮します。 以下はエントリーサマリーを表示しているのですが、全く同じ二つの画像をテスト的に用意しました。 一つは焦点座標が設定されていない画像、もう一つは焦点座標が設定された画像です。焦点座標が設定された画像は綺麗に人物が中央に表示されているのがわかります。

Entry_Summaryモジュールでの表示場合 entry:loopブロック内で以下のようなHTMLをかくことで簡単に実装することができます。

<div style="width: {x}px; height: {y}px;">
    <img class="js-focused-image"
      data-focus-x="{focalX}"
      data-focus-y="{focalY}"
      src="%{ROOT_DIR}{path}" alt="{alt}">
</div>

画像の反転や回転処理

また、画像編集モーダル上では画像を反転させたり回転させたりすることが可能です。以下の画像の赤枠で囲われたエリアのボタンをクリックしてみましょう。

例えば一番上の「反転（水平）」をクリックすると以下のように画像が反転しているのがわかります。

編集前の画像に戻す

また、「元画像を使用」と書かれたボタンをクリックすると加工前の元々の画像に戻すことができます。先ほど反転させた画像も、「元画像を使用」ボタンをクリックすることで最初の状態に戻すことができます。

編集結果を保存

画像を編集しても保存するまでは編集結果が保存されません。「適用する」ボタンをクリックした後、「新しいメディアとして作成」か「上書き保存」をクリックして変更を反映させましょう。

「上書き保存」と「新しいメディアとして作成」の違い

「上書き保存」は、すでに登録されているメディアを上書きする形で保存します。「新しいメディアとして作成」は今編集しているメディアの情報は変更せず、変更内容を元に新しいメディアとして保存します。ですので、「新しいメディアとして作成」したばあいは、変更前の画像と変更後の画像が両方ともメディアに登録されるかたちになります。

メディアを利用したカスタムフィールドとは

Ver.2.10からメディアを利用したカスタムフィールドを作れるようになりました。メディアのカスタムフィールドを使うとメディア管理に登録されている画像やファイルをカスタムフィールドとして登録することができます。

a-blog cmsに標準で梱包されているsiteテーマにもブログのカスタムフィールドにメディアのカスタムフィールドが組み込まれています。

メディア選択

「メディア選択」をクリックするとメディア一覧から画像もしくはファイルを選択するモーダルウィンドウが出現します。

メディアアップロード

またカスタムフィールドより「アップロード」ボタンをクリックするとそこから新たにメディアを登録するためのモーダルウィンドウが出現します。

メディアのカスタムフィールドからもメディアユニットのように複数ファイルアップロード可能ですが、カスタムフィールドとして登録されるファイルは初めの一個だけになります。

メディア編集

また「メディア編集ボタン」をクリックすることで、メディアのカスタムフィールドから直接登録されたメディアを編集することができます。ただし、このメディアが他の場所でも使われている可能性があるので十分注意して編集してください。

メディア削除

また、カスタムフィールドに登録してあるメディアは「削除」ボタンをクリックすることでカスタムフィールドへの登録を解除できます。メディアに登録されたファイルは削除されません。

カスタムフィールドの記述方法

メディアのカスタムフィールドは簡単なHTMLを記述するだけで作成可能です。下はメディアのカスタムフィールドのサンプルコードになります。

<tr class="js-media-field">
  <th>サイト ロゴ
    <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="サイトのロゴ画像を設定します。"></i>
  </th>
  <td>
    <div>
      <!-- BEGIN_IF [{site_logo@thumbnail}/nem] -->
      <img src="{site_logo@thumbnail}" class="acms-admin-img-responsive js-preview" alt="{site_logo@alt}" />
      <!-- ELSE -->
      <img src="" style="display:none" class="acms-admin-img-responsive js-preview" />
      <!-- END_IF -->
    </div>
    <div class="acms-admin-margin-top-mini">
      <button type="button" class="js-insert acms-admin-btn">メディア選択</button>
      <button type="button" class="js-insert acms-admin-btn" data-mode="upload">アップロード</button>
      <button type="button" class="js-edit acms-admin-btn">メディア編集</button>
      <button type="button" class="js-remove acms-admin-btn acms-admin-btn-danger">削除</button>
    </div>
    <input type="hidden" name="site_logo" value="{site_logo}" class="js-value" />
    <input type="hidden" name="field[]" value="site_logo" />
    <input type="hidden" name="site_logo:extension" value="media" />
  </td>
</tr>

メディアのカスタムフィールドを利用したい領域に js-media-field というクラスを追加します。その後その領域内で、メディア選択ボタンには、js-insert、メディア編集ボタンにはjs-edit、削除ボタンにはjs-removeというクラスを付与します。またメディアの選択結果をプレビューしたい場合はimg要素に js-previewというクラスを付与します。アップロードボタンも選択ボタンと同じく、js-insertクラスを付与しますが、data-mode属性をuploadにする必要があります。さらに、アップロードしたい画像のタイプを制限したい場合は、data-type属性を利用します。data-type="image"にすると画像のみアップロード可能に、また、data-type="file"とするとファイルのみアップロード可能になります。

カスタムフィールドメーカーの利用

Ver.2.10よりカスタムフィールドメーカーからメディア用のカスタムフィールドもHTML出力できるようになっています。記述量が多いのでこちらで設定する方が間違いが少ないのでオススメです。

こちらのカスタムフィールドメーカーはdeveloperサイトからもご利用いただけます。