5系 テーマ内のイメージを変更&削除したい

【環境情報】
・baserCMSのバージョン:5.1.4
・レンタルサーバー名:core-mini サーバー
・使用テーマ:BcAcademia
・PHPスキル(自己評価): D〜 E くらいかと思います
・MacBookAirで作業しています。

お世話になります。

先日、何とかbaserCMS5.1.4をインストールできたので、テーマを選択し、イメージや内容(テキスト)の変更を行いつつあります。

使用するテーマは、BcAcademiaですが、勿論、バレエ教室ではないため、画像もテキスト類も変更したいのですが、、。

テーマの設置場所は、

Mysite.net > plugins > BcAcademia

となっているので、

BcAcademia > webfoot > img

このイメージフォルダにある画像を順番にアレンジして、直接、(FTP)アップロードしているのですが、キャッシュを何度クリアしても、何故か、アレンジした画像になりません。

管理画面、ダッシュボードのテーマ管理 > テーマ設定
では、
アップロードできる画像が限られているのと、

それぞれの画像の削除ができません。(できるだけシンプルにしたいので、下の方で動く画像を削除したい。)

変更および削除したい画像は、

Mysite.net > plugins > BcAcademia > webfoot > img

このフォルダ内にある画像です。

(スクショをUPしました。)

*スクショの内、イエロータグとグリーンタグが変更したい画像、ブルータグは削除したい画像。

以上の対処の仕方について、おわかりの方が居られましたら、ご教授いただけると大変ありがたいです。

よろしくお願いいたします<m(__)m>

レイアウトファイルの181行目付近に記述されている

<picture>
<source srcset="<?= $themeUrl ?>/img/sp_main_img.webp" media="(max-width: 767px)" type="image/webp">
<source srcset="<?= $themeUrl ?>/img/sp_main_img.jpg" media="(max-width: 767px)" type="image/jpeg">
<source srcset="<?= $themeUrl ?>/img/main_img.webp" sizes="(min-width: 768px) 1000px, 100vw" type="image/webp">
<source srcset="<?= $themeUrl ?>/img/main_img.jpg" sizes="(min-width: 768px) 1000px, 100vw" type="image/jpeg">
<img src="<?= $themeUrl ?>/img/main_img.jpg" alt="A description of the image">
</picture>

上記のコードに倣って、メディアクエリでトップ画像が表示されているようです。
ご覧のとおり、上からの優先順位で画像が表示されていますので、それぞれの画像全てを変更したい画像に置き換えるか、あるいは、以下のようにシンプルにして、jpgファイルのみを入れ替えるか、いずれかかと思います。

<picture>
<source srcset="<?= $themeUrl ?>/img/sp_main_img.jpg" media="(max-width: 767px)" type="image/jpeg">
<source srcset="<?= $themeUrl ?>/img/main_img.jpg" sizes="(min-width: 768px) 1000px, 100vw" type="image/jpeg">
<img src="<?= $themeUrl ?>/img/main_img.jpg" alt="A description of the image">
</picture>

また、

については、
レイアウトファイルの200行目付近に記述されている以下のコードを削除するかコメントアウトすれば、表示されなくなります。

<!-- Slider -->
<section id="Slider">
<?php $this->BcBaser->mainImage(['all' => true, 'num' => 5, 'width' => '780',  'height' => '520', 'class' => 'bs-main-image']) ?>
</section>
<!--/ Slider -->

GUSSANさん、
早速のアドヴァイスをいただき、ありがとうございます。

変更したい画像ファイルについては、画像名とファイルサイズを同じにして、Photoshop上で中身だけ書き換えている状態です。

ひょっとして、画像ファイル自体もリネイムして、ご指摘の箇所 〜〜 のファイル名も同様に変更した方が良いのでしょうか? とりあえず、試してみます!!

削除できない画像について、ご指摘部分のコードを削除かコメントアウト、とのこと、これも試してみます!!

ありがとうございます(:slight_smile:

また、ご報告させていただきます♪

「Photoshop上で中身だけ書き換えている」という意味がよくわかりません。
「同名のファイルをFTPでアップロードし、上書きしている」と同義でしたら、その手順で良いと思います。

問題は、上から順番に処理されているので、 (min-width: 768px) のメディアクエリー画像だけで言えば、元々ものコードでは、先に main_img.webp 画像が読み込まれるため、webpフォーマットの画像を変更(上書き)しないと、結局変わらないということです。
ですので、webpフォーマットの画像を使うつもりがないのであれば、ご提案したjpg フォーマット画像のみのコードに変えてしまえば、変更しないといけないファイルは、jpgファイルのみになってシンプルですよ、ということです。

分かりにくい表現ですみませんでした。

おっしゃるとおりで、ファイル名は同じで、(中の画像が違う)FTPでアップロードし、上書きしている、ということなのですが、
何故か、どうやっても、何度キャッシュをクリアしても、1枚目のスクショのように、トップ画面の画像が表示されず、〈picture〉タグの altに印されている『A description of the image』が表示されます。

画像は、
MySite.net/plugins/BcAcademia/webfoot/img/
に、直接FTPでアップロードしているのですが、ダッシュボードに表示されている、ロゴ(logo.png)をダッシュボード経由でUPするのもできませんでした。

あと、スライダー画像に関しては、教えていただいた箇所をコメントアウトすることで、表示されなくなりました。
ありがとうございます♪

作業は、メンテナンスモードで行っているのですが、
先ほど、『公開モード』でも確認しましたが、同じでした。

FTPへアップした画像が、何故、表示されないのか、今の状況では良く分かりません<m(__)m>

もしも、ヒントなどありましたら、よろしくお願いいたします<m(__)m>


ですので、レイアウトファイル(plugin/BcAcademia/templates/layout/default.php)の181行目付近に記述されている

<picture>
<source srcset="<?= $themeUrl ?>/img/sp_main_img.webp" media="(max-width: 767px)" type="image/webp">
<source srcset="<?= $themeUrl ?>/img/sp_main_img.jpg" media="(max-width: 767px)" type="image/jpeg">
<source srcset="<?= $themeUrl ?>/img/main_img.webp" sizes="(min-width: 768px) 1000px, 100vw" type="image/webp">
<source srcset="<?= $themeUrl ?>/img/main_img.jpg" sizes="(min-width: 768px) 1000px, 100vw" type="image/jpeg">
<img src="<?= $themeUrl ?>/img/main_img.jpg" alt="A description of the image">
</picture>

<picture>
<source srcset="<?= $themeUrl ?>/img/sp_main_img.jpg" media="(max-width: 767px)" type="image/jpeg">
<source srcset="<?= $themeUrl ?>/img/main_img.jpg" sizes="(min-width: 768px) 1000px, 100vw" type="image/jpeg">
<img src="<?= $themeUrl ?>/img/main_img.jpg" alt="A description of the image">
</picture>

のように書き換えてみてください。

というのも、<source>タグのメディアクエリは、上から順に表示させる画像を処理しますので、元々のコードでは、
main_img.jpg より先に main_img.webp が読み込まれます。
にもかかわらず、おそらくimgフォルダ内からすでに main_img.webp ファイルが削除されているか、あるいは正しいフォーマットで当該ファイルが上書きされていないか、その辺りの事情で画像を表示できない状況になっているのだと思います。
ですので、webpフォーマットの画像を今後も使うつもりがないのであれば、ご提案したjpg フォーマット画像のみのコードに変えてしまえば、正しく表示されると思います。

については、「ダッシュボードに表示されている、ロゴ(logo.png)をダッシュボード経由でUPするのもできませんでした。」とありますが、具体的にはエラーメッセージが出て、アップロードできなかったということでしょうか?

ちなみに、テーマ設定の画面からアップロードされた画像は、baserCMSのインストールルートの/webroot/files/theme_configs/内に保存されるようです。

すみません!
先ほど、お伝えしそびれましたが、
再度、ご指摘下さった方法で、
(plugin/BcAcademia/templates/layout/default.php)
.webpが付いているタグを削除して、同様にしてみたのです。

が。。。先ほどのスクショの通りで表示されません。

念のために、今も、画像もdefault.phpも、確かめましたが、変わらず表示されません。(先ほどのスクショの状態です)

変更した画像ファイルは、
MySite.net/plugins/BcAcademia/webfoot/img/
に入っていて、ファイル名は変えていません。

他に何か違っているところがあるのでしょうか?

よろしくお願いいたします<m(__)m>

plugin/BcAcademia/templates/layout/default.phpの拡張子をtxtに変更して、default.txtとして、ここにアップロードしてみてください。
確認します。

plugin/BcAcademia/templates/layout/default.txt でアップロードしてみました。

以下をダウンロードして、拡張子をphpに変更して差し替えてみてください。

default.txt (5.3 KB)

行ってみましたが、
やはり画像は表示されません。

画像は、元の画像に、創った画像をコピペする形で、サイズ、解像度など変わらないように気をつけて作ったつもりなのですが、今、確認してみたら、元の画像サイズよりも、サイズが結構大きくなっているみたいで、同じように小さくしようとやってみましたが、とりあえず、無理でした。

でも、ひょっとして画像サイズが関係しますか?

それから、再度、画像を一から作り直してみます。


以下の画像をダウンロードして、main_img.jpgとリネームして、アップしてみてください。

main_img

画像をダウンロード、リネイムしてFTPでサイトへアップロード。

画像が表示されました!

オリジナルの画像〔51KB〕よりサイズ小さい(20KB)ですね。スライダーの画像ですね。

私のは、Photoshop上では、画像解像度をオリジナルの画像と同じになるように合わせていたのですが、サイズが9.1MBと大きかったです。

今、自分の画像を、25%くらいに小さくリサイズ、リネイムして、FTPでアップロードしてみたのですが、
先ほどのバレエのイメージ(すでに削除したのに。。)から変わりません??

何度もキャッシュクリアもしているのですが。。。

画像サイズの問題ではないと思います。
おそらく作成されている画像が、正しいjpgフォーマットの画像として作成されていないだけだと思います。

Macをお使いですよね?
Photoshopでエディットせず、Mac標準でバンドルされている「プレビュー」アプリで、当該画像を表示させ、メニューからファイル>書き出し を選択し、以下のように保存してみてはどうでしょうか?

ファイルサイズは、ひとまず意識されずに。

色々と、本当にありがとうございます。

ようやく、今、手が空いたので、おっしゃる通り、
プレビューで開けて、『書き出す』で保存して、FTPでアップロード。

でも、以前として、バレエのイメージから変わらず。(勿論、キャッシュもクリアして。。。)

その後も、
『情報を見る』(⌘+I)で、開けるアプリ、プレビュー(アプリ)確認して、『プレビュー』に変えたり、、。すると、そのファイル?は、『開発元が未確認のため開けません。』になったり:sweat_drops:

それで、
何故か、色々と何度やっても、元の『main_img.jpg』を削除して、キャッシュも、何度もクリアしているのに、このバレエの画像がでます。

元々の画像は、.psdで保存してあったので、また、sここからjpgで書き出し、それをプレビューで読み込んで、書き出したファイルをFTPでアップロードもしました。
サイズは、小さくできたみたいですが、何故か、表示されません:sweat_drops:

キャッシュをいくらクリアしても、他にクリアしないといけない場所があるのでしょうか?

ブラウザのウィンドウをミニマムサイズにしたときには、2回目に作った自分の画像(sp_main_img.jpg)には変わります。

何故、トップ画面の画像が表示されないのか、さっぱりわかりません:sweat_drops:

折角、5.1.4のインストールはクリアできたのに、テーマで足止めになってしまうとは。。。

一番シンプルそうなテーマにしたつもりだったのですが。。。
逆に、5系で使えるシンプルなテーマは他にないですよね〜


おそらく、画像ファイルをエディットしている環境依存の出来事だと思いますので、その点を確認するという趣旨ならば、ネット上で転がっているjpgファイルや同imgフォルダ内にある他のjpgファイルを便宜的にリネームしてみるなどして、既存のjpgファイルで(エディットするのではなく)テストしてみてはどうでしょうか?

最後に、キャッシュの話は、別の事情としてもしかするとホスティングサーバー側のサービスとして、いらぬお世話のキャッシュ処理サービスが裏で動いているようなことがあるのかもしれませんので、調べてみてはいかがでしょう?

ブラウザのウインドウをミニマムに動かすと、自分が変更した画像には変わるけれど、トップの(PC用)大きな画像だけが何故か、(サーバーから削除しても)バレエの画像のまま、なので、同解釈すれば良いのか、ちょっと整理を付けられない状態なので、また明日以降、整理して自力で頑張ってみます。

2系、3系、4系、と画像処理で、ほとんど困ったことは無かったのですが、折角インストールできた初めての5系ですし、とりあえず、色々と試してみます。

色々と親身にサポート下さいまして、本当に感謝申し上げます<m(__)m>

もう1点、FTPソフトを変えてみてはどうでしょうか?
例えば、FileZillaなどに。

長らく使っていた、『Fetch』(以前は日本語版をずっと使っていました。)と、
最近、ダウンロードしてみた『Cyberduck』を、適当に使っています。

『Cyberduck』は、不可視ファイルが見えないままだったので、そういうときは『Fetch』で作業しました。

あれ以来、ちょっと作業できていないので、また、作業できる時間ができたときに(でも早くしないと:sweat_drops::sweat_drops:)確認してみます。

ありがとうございます<m(__)m>