イメージビューアー(prettyPhoto)

現在では、a-blog cms ではSmartPhotoをデフォルトのイメージビューアーとして採用していることから非推奨になりました

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー(prettyPhoto)の設定が標準で実装されています。

デモ

1. 設定の編集

管理ページ > カスタマイズ管理:コンフィグ > モジュール:Entry_Bodyイメージビューワーの部分を「 rel="prettyPhoto[{unit_eid}]"」にします。

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

    //----------------------------------
    // イメージビューア ( prettyPhoto )
    ppMark  : 'a[rel^="prettyPhoto"]',
    ppConfig    :
    {
        animation_speed: 'fast',
        slideshow: false,
        autoplay_slideshow: false,
        opacity: 0.80,
        show_title: false,
        allow_resize: true,
        default_width: 500,
        default_height: 344,
        counter_separator_label: '/',
        theme: 'light_square',
        hideflash: false,
        wmode: 'opaque',
        autoplay: true,
        modal: false,
        overlay_gallery: true,
        keyboard_shortcuts: true,
        changepicturecallback: function(){},
        callback: function(){},
        markup: (省略),
        gallery_markup: (省略),
        image_markup: (省略),
        flash_markup: (省略),
        quicktime_markup: (省略),
        iframe_markup: (省略),
        inline_markup: (省略),
        custom_markup: ''
    },
    ppCaption2Title : true,

ppMark prettyPhotoを使用する場合のrel属性値
ppConfig prettyPhotoの設定値参考:prettyPhoto documentation
ppCaption2Title ユニット画像のキャプションをタイトルとして使用するかの設定

2. 補足

a-blog cmsのバージョンアップ(Ver. 1.6.2.1以前)をしたサイトで、下記のエラーが表示されることがあります。

index.js : loadClosure is not function

対応としては、Ver. 1.7.0以上へのバージョンアップか、もしくはhighslideをprettyPhotoに変更をしてください。

生成AIポッドキャスト時代なので a-blog cms の mp3対応を考えてみる

NotebookLM で生成AIポッドキャストの生成が話題になっています。標準的に a-blog cms で MP3 をそのまま扱うことが残念ながらできません。しかし管理画面の設定と、テンプレートのカスタマイズで簡単に実装できる内容ですのでご紹介します。

高さを揃える(レスポンシブ対応)

ブロック要素の高さを揃える機能が標準で実装されています。「ブロック要素の高さを揃える(autoheight)」とは違い、行ごとのに内包している要素の高さを揃えます。ウィンドウ幅が可変したときも動作し、レスポンシブ対応版になります。(Ver. 2.5.0より)

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-------------
// autoHeightR
autoHeightRMark : '.js-autoheight-r',
autoHeightRConf : {
  style   : 'min-height',
  element : '',
  offset  : 0,
  parent  : 'parent',
  list    : ''
},
autoHeightRArray: [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
],

autoHeightRMark 基準となる高さをもつ要素のクラス名を設定
style style:CSSで設定される高さ(height,min-height,max-height)
element 高さのスタイルを適応するクラスを設定(空の場合はautoHeightRMarkの要素に適応)autoHeightRMark以下の要素を指定してください。
offset 設定した高さにオフセットを設定
parent 実際に並んでいる要素の親要素のクラスを設定(parentを設定した場合、autoHeightRMarkの親要素)
list 実際に並んでいる要素のクラスを指定(指定してない場合、autoHeightRMarkの要素)

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.autoHeightRMark = '.js-autoheight-r';
  ACMS.Config.autoHeightRConf = {
    style   : 'min-height',
    element : '',
    offset  : 0,
    parent  : 'parent',
    list    : ''
  }
});

autoHeightRArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
configにはautoHeightRConfの設定を指定できます。

class属性を.ah-markにし、parent、listなどの項目を追加する場合には以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.autoHeightRArray = [
  {
      mark: '.ah-mark',
      config: {
        style: 'height',
        element: '',
        offset: 0,
        parent: '.ah-container',
        list: '.ah-list'
      }
    }
  ];
});

並んでいる要素間で高さを揃えたい場合

HTML

<div class="acms-grid">
  <div class="js-autoheight-r acms-col-md-4" style="background:#ee8;">
    <p style="height: 50px;">1つめの要素</p>
  </div>
  <div class="js-autoheight-r acms-col-md-4" style="background:#e8e;">
    <p style="height: 25px;">2つめの要素</p>
  </div>
  <div class="js-autoheight-r acms-col-md-4" style="background:#8ee;">
    <p style="height: 75px;">3つめの要素</p>
  </div>
  <div class="js-autoheight-r acms-col-md-4" style="background:#eee;">
    <p style="height: 40px;">4つめの要素</p>
  </div>
</div>

デモ

1つめの要素

2つめの要素

3つめの要素

4つめの要素

並んでいる要素の子要素の高さを基準に揃えたい場合

※設定を追加したい場合は、,で配列を繋いでもいいですが、pushを使って設定を追加することもできます。別のJavaScriptファイルから設定を追加したいときに便利です。

HTML

<script>
  ACMS.Ready(function(){
    ACMS.Config.autoHeightRArray.push({
      mark: '.ah-mark',
      config: {
        style: 'height',
        element: '',
        offset: 0,
        parent: '.ah-container',
        list: '.ah-list'
      }
    });
  });
</script>

<div class="ah-container acms-grid">
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#ee8;">
      <p style="height: 50px;">1つめの要素</p>
    </div>
  </div><!-- /.ah-list -->
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#e8e;">
      <p style="height: 25px;">2つめの要素</p>
    </div>
  </div>
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#8ee;">
      <p style="height: 75px;">3つめの要素</p>
    </div>
  </div>
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#eee;">
      <p style="height: 40px;">4つめの要素</p>
    </div>
  </div>
</div>

デモ

1つめの要素

2つめの要素

3つめの要素

4つめの要素