PowerCMS™

PowerCMS ブログ

ホーム > PowerCMS ブログ > PowerCMSのバナー管理機能で画像を表示する方法とサイズ設定について

2018年03月27日

PowerCMSのバナー管理機能で画像を表示する方法とサイズ設定について

今回は PowerCMSのバナー管理機能のTipsをご紹介します。

1.基本的なバナーの出力方法

バナーの出力は <MTCampaigns> タグを使用します。
以下のようにテンプレートに記述した場合は、ウェブサイトもしくはブログでステータスが公開になっているバナーすべてを対象としてループ出力します。

<MTCampaigns>
    <img src="<$MTCampaignBannerURL escape="html"$>" alt="<$MTCampaignTitle escape="html"$>" />
</MTCampaigns>

<MTCampaigns> タグに対して「group」モディファイアを指定することで、 事前に作成したバナーグループに登録されたバナーをループ出力することができます。

<MTCampaigns group="【バナーグループの名前】">
    <img src="<$MTCampaignBannerURL escape="html"$>" alt="<$MTCampaignTitle escape="html"$>" />
</MTCampaigns>

その他のモディファイアについては以下をご参考ください。
テンプレートタグリファレンス MTCampaigns

また、特定のバナーだけを出力したい場合は <MTCampaign> タグを使用して以下のようにテンプレートに記述します。

<MTCampaign title="【バナーのタイトル】">
    <img src="<$MTCampaignBannerURL escape="html"$>" alt="<$MTCampaignTitle escape="html"$>" />
</MTCampaign>

その他「id」※「basename」モディファイアを指定することでも特定のバナーだけを出力することができます。
※「id」を指定する場合、CMSに登録されたバナーのIDを決め打ちすることになるため他の環境へテンプレートをコピーしたりする際は注意が必要となります。
テンプレートタグリファレンス MTCampaign

2. バナーのサイズ指定について

<$MTCampaignBannerURL$> タグで出力される画像URLはバナー編集画面の「表示サイズ」で指定した幅・高さにリサイズされた画像のURLになるようになっています。

「表示サイズ」で指定可能な幅・高さの最小、最大サイズはプラグイン設定で変更することが可能です。
ウェブサイト・ブログごとに指定が可能です。(ウェブサイト・ブログ管理画面の左メニュー → プラグイン → Campaign → 設定)

180326_1.png

この最大、最小サイズは既定値が指定がされています。必要に応じて変更してください。
不必要に大きな画像が登録されページに表示される事を防止したりすることができます。

バナー編集画面において、プラグイン設定で指定した最大サイズを超える画像を選択し「表示サイズ」で「auto」を指定した場合 <$MTCampaignBannerURL$>タグは自動的に画像を最大サイズに縮小して出力します。

登録されたバナーをリサイズせずにそのまま表示する場合は下記のようにテンプレートを記述します。

<MTCampaigns>
    <MTCampaignAsset>
        <img src="<$MTAssetURL escape="html"$>" alt="<$MTCampaignTitle escape="html"$>" />
    </MTCampaignAsset>
</MTCampaigns>

登録されたバナーをテンプレート側で強制的にリサイズして出力する場合は下記のようにテンプレートを記述します。(幅100pxに固定する場合)

<MTCampaigns>
    <MTCampaignAsset>
        <img src="<$MTAssetThumbnailURL width="100" escape="html"$>" alt="<$MTCampaignTitle escape="html"$>" />
    </MTCampaignAsset>
</MTCampaigns>

テンプレートタグリファレンス MTCampaignAsset

よく使われているバナー機能の方法など、以前にも記事がありますのでご参照ください。


カテゴリー
サイト制作全般
テンプレート作成Tips
技術情報
投稿者
nakanishi