投稿日:2020/08/19
更新日:2021/08/04
商品画像の表示向きを変えたい場合の対処法です。
ex.jsにコードを追記して対応します。
2020/8/19時点でのソースは下記のとおりです。
これをex.js最下部に追加してください。
これはiPhoneで撮影したときにのみ起こることです。
枚数が少ないのであれば画像の再登録で解決できます。(「Exif情報を削除する」にチェックして画像追加)
ROOKの画像を確認すると自動的に3種類のサムネイルが作られます。このサムネイルにするとその傾きの情報がなくなるのでサムネイルを表示するように修正しています。
サムネイルはサイズが決まっているので画像を大きく表示したいときに個別で調整はしにくくなります。
ex.jsにコードを追記して対応します。
追記コード
日々更新されているので出来れば最近の新規案件のデフォルトのex.jsと見比べてコピペしたほうが正確です。2020/8/19時点でのソースは下記のとおりです。
これをex.js最下部に追加してください。
$(function () {
$('.photoContents .photo, .itemList:not(.daily,.monthly,.weekly) .photo').each(function () {
var $a = $('a', this)
var href = $a.attr('href')
href = href.replace(/(.+material\/)(.+?)$/, '$1item_XXL/$2')
$a.attr('href', href)
var $img = $('img', this)
var src = $img.attr('src')
src = src.replace(/(.+material\/)(.+?)$/, '$1item_XXL/$2')
$img.attr('src', src)
})
})
補足
画像の表示向きがおかしくなるのは、EXIFのOrientation情報が原因です。これはiPhoneで撮影したときにのみ起こることです。
枚数が少ないのであれば画像の再登録で解決できます。(「Exif情報を削除する」にチェックして画像追加)
ROOKの画像を確認すると自動的に3種類のサムネイルが作られます。このサムネイルにするとその傾きの情報がなくなるのでサムネイルを表示するように修正しています。
サムネイルはサイズが決まっているので画像を大きく表示したいときに個別で調整はしにくくなります。