abc
1
テーマ設定で、メインイメージを５枚まで設定できるようになっていますが、１枚のみに固定、もしくは枚数を限定する方法がわかりません。
/theme/bc_sample/Layouts/default.phpの中にある、
<?php $this->BcBaser->mainImage(['all' => true, 'num' => 5, 'width' => '100%', 'class' => 'bs-main-image']) ?>
の部分を変更する必要があると考えて、
‘all’ => true を false
にしたり、
‘num’ => 5 を １にしたりと試してみましたが、
全く表示されなかったり、変化が見られなかったりで実現できません。
js/jquery.bxslider-4.12.min.js
を使っているのではと思いますが、
実際の設定をしているファイルが他にあるのでしょうか？
ご教示いただければ幸いです。
よろしくお願いいたします。
【環境情報】
・baserCMSのバージョン：4.4.4
・レンタルサーバー名：ロリポップ
・使用テーマ：bc_sample
・PHPスキル（自己評価）： C
GUSSAN
2
BcBaser->mainImage関数のオプションに関する説明は、以下のURLに記載されています。
https://wiki.basercms.net/ver4/関数リファレンス/BcBaser_mainImage
bxSliderスクリプト自体は、本来、イメージをスライド（フェードなどその他にもいくつかのエフェクトを選択可能）させるためのものなので、「１枚だけを固定」というリクエスト自体が発想として異例かと。。。つまり、スライドのON/OFF機能という発想がおそらく無く、そのためオプションとして用意されていないと思います。（あったらすいません^^;）
ただ、スライドOFFと同じ効果を出すために、スライドを自動的に始めないようにするオプションを使うという方法はあります。
bxSliderを動作させるためのスクリプトは、startup.jsというファイルに記載されています。
所在は、以下です。
bc_sample/js/startup.js
ちなみに1枚だけを固定で出力する場合は、以下。
default.phpの55行目
<?php $this->BcBaser->mainImage(['all' => true, 'num' => 1, 'width' => '100%', 'class' => 'bs-main-image']) ?>
startup.jsの19行目
$("#MainImage").show().bxSlider({mode:"fade", auto:false});
3枚を出力したい場合は、以下。
default.phpの55行目
<?php $this->BcBaser->mainImage(['all' => true, 'num' => 3, 'width' => '100%', 'class' => 'bs-main-image']) ?>
startup.jsの19行目
$("#MainImage").show().bxSlider({mode:"fade", auto:true});
スライドを開始するイメージを指定することはできるようですが、bxSliderの開始直後の挙動やら、いろいろと制御が面倒な気がするので、手っ取り早く使う画像だけをbaserCMSのテーマ設定画面で、上から順にレイアウトし直すので良いかと。
bxSliderのその他のオプションの使い方は、Qiitaとかをググれば、結構出てくるのでご自身でいろいろやってみてください。
「いいね！」 1
abc
3
GUSSANさま
丁寧な解説を頂きありがとうございます。
default.phpとstartup.js
を組み合わせることで、イメージ通りの変更ができそうです。
baserCMSのテーマ設定画面で、上から順にレイアウトし直す
なるほど、目からうろこです。
単純に考えれば発想が広がりますね！
色々やっていようと思います。
ありがとうございました。
「いいね！」 1
GUSSAN
4
しかし、実際、今後もスライダーを使う予定がないのであれば、使ってもいないjsを読み込ませるのは本末転倒なので、できれば、jquery.bxslider-4.12.min.jsの読み込みもやめて、mainImage1だけを読み込ませるべきですかねぇ。。。
jquery自体は、使わないということはないと思うので、であれば、default.phpやstartup.jsをあまり大きな変更をせずに「1枚だけ固定」に対応するとしたら、
default.phpの55行目
<?php $this->BcBaser->mainImage(['all' => true, 'num' => 1, 'width' => '100%', 'class' => 'bs-main-image']) ?>
startup.jsの19行目
$("#MainImage").show();
というのでどうでしょうか？
abc
5
GUSSANさま
具体的なご教示を頂き、ありがとうございます。
おっしゃる通り、ファイルに手を加えすぎると、後々リスクになりかねませんよね。
現時点で、画像のコンテンツが不足しており、１枚で大丈夫なのですが、
今後、複数枚になる可能性もありますので、ご提案いただいた通り、
「1枚だけ固定」に対応
の方法で対応しました。
そして複数枚になった際には、昨日の方法に切り替えたいと考えています。
GUSSANさまには、メインイメージそのものの修正だけでなく、
カスタマイズの基本姿勢の部分まで、ヒントを頂戴しました。
このトピックが、フォーラムをご覧になる多くの方のお役に立つのではと思います。
本当にありがとうございました。
「いいね！」 1
