投稿日:2021/08/31
画像の表示向きがおかしくなるのは、EXIFのOrientation情報が原因です。
パーツにより対応が異なります。
縦画像など比率により画像内に白い余白が追加されるので、登録した画像と若干見た目が変わるということに注意してください。
405行目をコメントアウトします。
具体的には下記の1文を追記しています。
ex.js下部に追記
パーツにより対応が異なります。
注意点
どの方法もROOKが生成するサムネイルを読み込むようにパスを変更する方法です。縦画像など比率により画像内に白い余白が追加されるので、登録した画像と若干見た目が変わるということに注意してください。
商品画像
商品画像の表示向きがおかしい商品レコメンドソース
siteRecommend\js\recommend.js405行目をコメントアウトします。
src = src.replace(/\/item_L/, '');
そのほか
「関連商品」など、「商品画像」のソースに追記しても直らない場合は、api.jsのソースをex.jsにコピーしたうえで調整が必要になります。具体的には下記の1文を追記しています。
item.image = item.image.replace(/(.+material\/)(.+?)$/, '$1item_XXL/$2');
ex.js下部に追記
function getItemCarousel(items, param) {
var html = '';
var column = getColumn(param.column);
html += '<ul class="carousel_' + param.deal + '">';
items.forEach(function (item, i) {
var stock = (item.stock === false) ? ' noStock' : '';
if (item.price === undefined)
return true;
var iconlist = '';
if ($.isArray(item.icon) && item.icon.length) {
iconlist += '<span class="ex_item_icon">';
item.icon.forEach(function (icon, i) {
iconlist += '<img src="' + icon.path + '" alt="' + icon.replace_caption + '">';
});
iconlist += '</span>';
}
var index = (i + 1);
var code = item.url.replace(/.+\/([^\/]+?)\/$/, '$1');
var copy = (+param.catchcopy) ? '<span class="ex_item_copy">' + item.copy + '</span>' : '';
var price = (item.price.discount_price) ? item.price.discount_price : item.price.sales_price;
var figcaption = '<figcaption>\
<span class="ex_item_name">' + item.name + '</span>\
<span class="ex_item_price">¥' + price + '<span>(税込)</span></span>' + copy + '\
</figcaption>';
item.image = item.image.replace(/(.+material\/)(.+?)$/, '$1item_XXL/$2');
var image = '<span class="ex_item_image"><img src="' + item.image + '" alt="' + item.name + '"></span>';
var figureInnter = (+param.position === 1) ? figcaption + image : image + figcaption;
html += '<li class="item_' + index + stock + '">\
<a href="' + item.url + '">\
<figure>\
' + iconlist + figureInnter + '\
</figure>\
</a>\
</li>';
});
html += '</ul>\
<div class="slick_pager"></div>';
return html;
}
function getItemList(items, param) {
var html = '';
var column = getColumn(param.column);
param.column_sp = (param.column_sp) ? param.column_sp : 3;
var spCol = getSpCol(param.column_sp);
html += '<ul class="row row_inline' + spCol + '">';
items.forEach(function (item, i) {
var stock = (item.stock === false) ? ' noStock' : '';
if (item.price === undefined)
return true;
var iconlist = '';
if ($.isArray(item.icon) && item.icon.length) {
iconlist += '<span class="ex_item_icon">';
item.icon.forEach(function (icon, i) {
iconlist += '<img src="' + icon.path + '" alt="' + icon.replace_caption + '">';
});
iconlist += '</span>';
}
var index = (i + 1);
var code = item.url.replace(/.+\/([^\/]+?)\/$/, '$1');
var copy = (+param.catchcopy) ? '<span class="ex_item_copy">' + item.copy + '</span>' : '';
var price = (item.price.discount_price) ? item.price.discount_price : item.price.sales_price;
var figcaption = '<figcaption>\
<span class="ex_item_name">' + item.name + '</span>\
<span class="ex_item_price">¥' + price + '<span>(税込)</span></span>' + copy + '\
</figcaption>';
item.image = item.image.replace(/(.+material\/)(.+?)$/, '$1item_XXL/$2');
var image = '<span class="ex_item_image"><img src="' + item.image + '" alt="' + item.name + '"></span>';
var figureInnter = (+param.position === 1) ? figcaption + image : image + figcaption;
html += '<li class="item_' + index + ' col ' + column + stock + '">\
<a href="' + item.url + '">\
<figure>\
' + iconlist + figureInnter + '\
</figure>\
</a>\
</li>';
});
html += '</ul>';
return html;
}