NC3のインストール・移行・カスタマイズの記録
移行時の画像について
今回、透過GIF・bmpを多用されているサイトの移行作業で移行したにも関わらず画像が正しく表示されないといった事象が気になり調査してみました。
その結果、移行時の「サイズの異なる画像作成」「掲載する画像サイズの指定」に問題があることが判明しました。
透過GIFの場合、別サイズのGIFを作成する際、色の透過度を指定し作成する必要があるのですが、そのようなことを行っていないため背景色が黒色になってしまっていました。
ちなみにこれは上記「エディ・ケイのロゴ」でアップロード時自動で作成された「medium」サイズの画像です。
また、bmpは「サイズの異なる画像作成」が行われず、使用・掲載画像の指定が「big」サイズの画像を指定されているため表示されないことが分りました。
っということで、移行後、透過GIFの背景が黒色・bmpが表示されないといった場合、そのような画像を含むコンテンツを編集画面で開き、ソース表示にし、画像を指定している部分(imgタグのsrc=)の「/big」部分を削除すれば元画像を指定することになり透過GIF・bmpが表示されます。
また、数が多い場合は、透過GIFのGIF作成部分
「app/Plugin/Upload/Model\Behavior/UploadBehavior.php」
を、bmpは移行時のサイズ指定部分
「/app/Plugin/Nc2ToNc3/Model/Behavior/Nc2ToNc3WysiwygBehavior.php」
をカスタマイズすれば、移行にて正しく表示されるようになります。
ちなみに移行時での問題でもなく、wysiwygでの問題で透過GIFで原寸以外のサイズを掲載した場合にも背景色が黒色になることが分かりました。またwysiwygでbmpは使用できないことも分かりました。
wysiwygでbmpを使用するためには
「/app/Plugin/Wysiwyg/Controller/WysiwygImageController.php」
をカスタマイズする必要がありました。(移行はできるのですが・・・)
以上、今回の作業でわかったことを掲載します。同様のことでお困りの方が少しでも解消できるのであれば幸いです。
何かNCのこと、移行のことでお困りのことがあればご連絡ください。お待ちしていま~す。
NC3.3.3にバージョンアップしました
本日やっとNC3.3.3にアップしました。
いろいろとカスタマイズをしているのでバージョンアップを躊躇していましたが、ローカルで実施・確認し問題ないことが確認できましたのでサーバにそのままもってきました。
次は、ドロップダウンメニューを新バージョンを作成したので、メニューを交換しようと計画中です。
新バージョンは「東京成徳大学深谷高校」のサイトにも使用しているドロップダウンメニュー、スマホバージョンはいいできかなあとちょっと気に入っているのです。興味ある方は一度ご覧ください。
WEB制作実績を更新しました
キャッチボール21さまからのご依頼で、昨年末よりNC2からの移行・リニュアル作業として作業させていただいていた「東京成徳大学深谷高校」のサイトが2月に公開されました。今回エディ・ケイのWEB制作実績に追加させていただきました。
是非一度ご覧ください。
今更なのですがページ表示速度の向上
みなさんご存じでしょうか。本当に今更なのですが、画像を多く含むページは表示速度が遅くなります。それは、画像のダウンロードに時間が取られ遅くなっているのです。「そんなん言われんでも」って声が聞こえてくるのがわかります。
っで、先日「表示速度の改善」といったことを調べていて今更なのですが分かったことがありました。
ひょっとして知ってられる方も多いかもしれませんが、私は知らなかったのでお教えします。
「lazyload」といったものがあり、ページ表示する際、初めに見える画像だけを読込み、それ以外の画像読込を遅延させるといったものがあるのです。それを使うとページの表示が早くなったと感じられます。
ちなみにこのサイトの「Web制作実績」に使用してみました。私的には本当に早くなったと感じられました。
一度「Web制作実績」御覧願います。
使用方法は、<img>タグに「loading="lazy"」を追加するだけです。
いかがでしょうか。
しかし、wysiwygの編集では「loading="lazy"」を記述しても削除されました。とほほほほ!
「Web制作実績」は汎用DBのカスタマイズで表示しているので、<img>タグを吐く部分で追加したので大丈夫なのですが・・・
2021年3月某日追記
先日移行作業をさせていただいた「東京成徳深谷高校」のサイトでは、wysiwygでの編集にて画像を使用した場合、自動的に「loading="lazy"」が付与するようにカスタマイズしています。また、移行時の編集にも追加付与するようにし日誌などの投稿でも画像があれば「loading="lazy"」を付与しました。
学校などの日誌にて画像を多用されているサイトにはよいのではと思います。
新着情報にサムネイルを表示
日誌を多用しているお客さまのサイトで新着情報にサムネイルを表示してほしいといった要望にお応えするため、「新着情報」プラグインをカスタマイズしました。
そのカスタマイズをこちらのサイトにも適用
トップページの新着情報(お知らせ)に「ブログ」プラグインで追加した記事に画像がひとつでも存在した場合、最初の画像をサムネイルとして表示するようにしています。
「ブログ」プラグインのかわりに「汎用DB」を使用すれば「新着情報」風に「汎用DB」の画像をサムネイルにし一覧を作成することは可能でしたが、既に「ブログ」で作成されている場合は、「新着情報」プラグインのカスタマイズを行うことでサムネイル表示が可能です。
また、標準の「新着情報」の表示は「トップページ旧」で御覧いただけます。テーマを使用することにより特定のページの「新着情報」のみカスタマイズが適用できます。テーマって本当に便利ですね。
いかがでしょうか。ご興味ある方は是非ご相談ください。