Retina製品画像の使用方法は?
-
16-10-2019 - |
質問
MagentoでRetina製品画像をどのように実装していますか?ウェブ上のいくつかの商業的なテーマがそれを行っているのを見てきましたが、方法はわかりません。
のようなものを使用します Retina.js
製品画像と静的ブロック画像の両方で機能していません。
解決
網膜画像は、ピクセル密度が高い画像だけではありませんか?この密度を検出することで、検出して切り替えることができます
var retina = window.devicePixelRatio > 1;
if (retina) {
// the user has a retina display
}
else {
// the user has a non-retina display
}
それをきれいにするために、通常の名前の画像と画像Retinaを作成することができます。それは、画像SRCを取得し、-retinaを追加してSRCを戻すことができるようにすることができます。
これをティムが示唆したように答えとして投稿しました。
他のヒント
次のJSを使用してそれを行うことができます。
https://github.com/leonsmith/retina-replace-js
テンプレートファイルにインライン画像があるときはいつでも、データ属性を追加します data-retina="true"
マークアップに、つまり;
<h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img data-retina="true" src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
CSSバックグラウンド画像の場合、同じファイルの2つのバージョンを作成します。 _2x
条約を命名し、それらを同じディレクトリに保持します。
myimage.png
myimage_2x.png
製品ビューページがCloudZoomのようなJSを使用している場合、インライン画像の問題に遭遇する可能性がありますが、この手法はサイト内のほとんどの画像の網膜画像を処理します(購入する製品ビューを処理する方法を確認するにはRetina Readyテーマと、それらがどのように処理したかを確認します)。
ジェネリックを見てください iphone
マゼントのテーマ。すでに網膜に対応しています。
ユーザーが両方の画像をダウンロードする必要があるため、特にデータのすべてのバイトを保存するためにwanしないモバイルデバイスでは、各画像のソースを置き換えるJavaScriptソリューションは好きではありません。
しかし、私はこの無料の拡張機能を見つけました: http://www.magentocommerce.com/magento-connect/retina-product-images.html交換せずにPHPを介して高解像度デバイスにのみ網膜画像を提供します。
使用できます srcset フォールバックになります。
<img src="normal-image.jpg" srcset="better-image.jpg 2x">
このリンクのドキュメントを参照してください。
互換性: