Ver. 2.6.0 から、エントリーごとに任意の「関連エントリー」を設定できるようになりました。今回は校正オプション「resizeImg」機能と合わせて、「お知らせ」カテゴリーの記事に最適サイズの画像が載っている「関連エントリー一覧」を作ります。



作業場所

  • 作業テーマ: simple2016
  • 作業テンプレート:/themes/simple2016/news/entry.html
  • 作業URL: http://ドメイン/entry.html

ハンズオン内容

  • 関連エントリー機能の設定
  • 表示用 Entry_Summaryモジュールの設置
  • 校正オプション「resizeImg」の設定

参考資料

課題

ハンズオン課題1:関連エントリー機能の設定

関連エントリー機能を有効にする

関連エントリー機能を使用可能にするために、[管理画面 > コンフィグ > 編集設定] より「関連エントリー」のチェックボックスにチェックを入れます。



エントリー編集画面で関連エントリーを選択



任意のエントリーを選び、エントリー編集画面を開きます。「関連エントリー設定」タブが表示されるので、入力欄にキーワードを入れて現在編集しているエントリーと関連付けたいエントリーのタイトルを選択してください。



登録した関連エントリーは、下記のピンクの線で囲まれたハンドルをドラッグアンドドロップすることで表示順を変更することができます。また、右の「確認」ボタンをクリックすることで、実際にそのエントリーのページに移動して内容を確認できます。

ハンズオン課題2:表示用モジュールの設置

エントリー編集画面で設定した「関連エントリー」はEntry_Summaryモジュールで表示できます。ここでは、関連エントリーを表示するためのEntry_Summaryを作成します。


関連エントリーに対応したEntry_Summaryモジュール


1. モジュールIDを作成する

管理ページ>モジュールIDに移動し、関連エントリーを表示するためのモジュールIDを作成します。以下の設定が必要です。モジュールIDは「summary_related」と命名します。

条件設定

関連エントリーはサイト全体から選択できるので、階層の設定をしておきましょう


表示設定

モジュールIDの設定の「関連エントリー」にチェックをつける


以上で、関連エントリーの紐付けと表示のためのカスタマイズが完了しました。

2. テンプレートを作成する

1.で作成したモジュールID用のHTMLファイルを作成します。「simple2016」内の /include/entry/summary.html を複製し、「summaryRelated.html」にリネームしてください。

summaryRelated.html をテキストエディタで開き、1行目にモジュールID「summary_related」を記述します。

<!-- BEGIN_MODULE Entry_Summary id="summary_related" -->

3. entry.htmlでEntry_Summaryを表示できるようにする

/themes/simple2016/news/entry.html で本文を表示しているテンプレートは /themes/simple2016/include/entry/body.html です。body.html の 内に2.で作成したテンプレートファイルを読み込みます。

<!-- BEGIN_MODULE Entry_Body -->

(略)

<!-- 関連エントリー -->
<!-- #include file="/include/entry/summaryRelated.html" -->

<!-- END_MODULE Entry_Body -->

エントリー(詳細ページ)に関連エントリーが表示されていれば完了です。

ハンズオン課題3:校正オプション「resizeImg」の設定

従来のa-blog cmsでは、Entry_Summaryなどにメイン画像を表示させる場合、CSSを使ってサイズや縦横の比率を変更していました。Ver. 2.6.0 から実装された校正オプション「resizeImg」を使えば、画像そのもののトリミングやサイズ変更が可能になります。

参考:校正オプション | a-blog cms 制作者向け情報

resizeImgの使い方

校正オプション「resizeImg」はアップロードした画像を指定したサイズに自動でトリミング(切り抜き)・拡大をしてくれます。

例)横400px, 縦300pxにリサイズする

{image@path}[resizeImg(400,300)]

例)横400px でアスペクト比を維持してリサイズする

{image@path}[resizeImg(400)]

例)リサイズ後の余白の背景色を指定してリサイズする(JPEG形式のみ対応)

{image@path}[resizeImg(400, 300, 'ff0000')] 

テーマにresizeImgを適用する

/themes/simple2016/include/entry/summaryRelated.html をテキストエディタで開きます。


(略)

<!-- BEGIN image:veil -->
    <img src="%{ROOT_DIR}{path}[resizeImg(120,120)]" width="120" height="120" alt=""><!-- END image:veil --><!-- BEGIN noimage -->
    <img src="/images/noImage.png" width="120" height="120" alt="" />
<!-- END noimage -->

(略)

[resizeImg(120,120)] の部分が校正オプションです。デフォルトでは120px四方の画像が生成されるようになっています。


初期状態では120px四方の画像が生成されます。


画像サイズを200px四方に変更しましょう。


<!-- BEGIN image:veil -->
	<img src="%{ROOT_DIR}{path}[resizeImg(200,200)]" width="200" height="200" alt=""><!-- END image:veil --><!-- BEGIN noimage -->
	<img src="/images/noImage.png" width="200" height="200" alt="" />
<!-- END noimage -->

ブラウザを再読み込みすれば、画像サイズが変更されます。


カスタマイズができたらシェアしましょう!

CMSを活用して パーソナライズされた Web サイトを作る

多言語対応サイトを作ってみよう

カスタムフィールドを活用して物件情報をカスタマイズしてみよう

静的HTMLサイトからCMSのテーマを作ってみよう

レイアウト機能を使ってみよう

モジュールIDのカスタムフィールドを使ってみよう

グローバル変数、校正オプション、バリデータを作ってみよう

関連エントリーを表示してみよう

setTemplate setRenderedを使いこなそう

CSVファイルをインポートしてエントリを一括登録しよう

Google、Facebook、TwitterのAPIキーを取得してSNSログインを設定してみよう

Google Analyticsランキングモジュールを表示してみよう

CSVファイルをインポートしてエントリを一括更新しよう

静的HTMLサイトからCMSのテーマを作ってみよう 201612

インストールとサーバへの接続について