以前、「レコード一覧に表示させる画像サイズについて」のタイトルで質問させて頂きましたが、画像サイズを大きくするだけではピクセル数が変換されないため、画像が乱れて表示されてしまいます。
なるべく、詳細画面と同様のピクセル数で一覧画面に画像を表示させる方法はないものでしょうか。すみません。。。
teranaka様
お世話になっております。
サイボウズスタートアップスの江田と申します。
「画像が乱れて表示されて」いるというのは画像が引き延ばされて、ぼやけているということでよろしいでしょうか。
https://developer.cybozu.io/hc/ja/community/posts/115009451466
での回答でもあった通り、カスタムビューを生成すれば、画像の元サイズはアップロード時のサイズとなるので、それを超えるサイズで表示しなければ、ぼやけることなく表示できると思います。
カスタムビューを作らず、cssとjavascriptのみで表示させるのであれば、
各サムネイル画像のsrc属性の中のパラメータ「w」、「h」を変更することで、それぞれ画像元サイズの幅、高さを変更できます。
生成されたhtmlに対して、javascriptを用いてパラメータ「w」、「h」を書き換えて、元サイズを引き延ばすことができます。
実装の例としては下記のようなものが考えられます。
/* JavaScript */
/*
**画像の縦横比は保持したまま拡大、縮小が可能
**パラメータ「w」、「h」はそれぞれ画像元サイズの最大値を表す
**アップロード時の画像サイズが1000*2000の画像にこのスクリプトを実行した場合、画像元サイズは250*500となる
*/
(function(){
“use strict”;
kintone.events.on(‘app.record.index.show’, function(event) {
var thumbnail = $(‘.gaia-ui-slideshow-thumbnail’);
var newThumbnailSrc = thumbnail.attr(‘src’).replace(/&w=\d*/, “&w=500”).replace(/&h=\d*/, “&h=500”);
thumbnail.attr(‘src’, newThumbnailSrc);
});
})();
/* CSS */
/* 幅300pxで画像を表示 */
img.gaia-ui-slideshow-thumbnail{
max-width: none;
max-height: none;
width: 300px;
}
ただし、アップデートによって仕様やDOMのクラス名の変更の可能性があり、いずれ正しく動作しなくなることも考えられるため、カスタムビューの作成をお勧めします。
有用なご教示をありがとうございます。
》カスタムビューを作らず、cssとjavascriptのみで表示させる
を試してみました。
(1)CSSだけの場合
サムネイルの大きさは自在に調整できますが、画像がぼやけます。お示しのとおりです。
(2)JavaScriptを追加で適用
すでにリスト表示時に各種の動作を走らせてましたので、
var thumbnail = $(‘.gaia-ui-slideshow-thumbnail’);
var newThumbnailSrc = thumbnail.attr(‘src’).replace(/&w=\d*/, “&w=500”).replace(/&h=\d*/, “&h=500”);
thumbnail.attr(‘src’, newThumbnailSrc);
↑の部分だけを
↓の処理いろいろ部分に追記しました。
kintone.events.on(“app.record.index.show”, function(e) {
//(ここに起動時の処理いろいろ)
});
CSSで指定した大きさでシャープできれいに表示されました。
★しかしながら、一覧に表示される各レコードが持つサムネイルが、すべて先頭表示レコードのものと
一緒になってしまいました。
(3)JavaScriptを追加で適用:CSSファイルを削除
小さいアイコンに戻る。ただし(２)に同じく、すべてのサムネイルが先頭表示レコードと同一になる。
─────
(2)のJavaScriptのはめ込みに、なにか過失あるかもと試行繰り返したですが、どうにもお手上げでした。
おたすけください。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。