Как использовать изображения продукта сетчатки?

Question

Как вы внедряете изображения продуктов сетчатки в Magento? Я видел несколько коммерческих тем в Интернете, но я не уверен, как.

Используя что -то вроде Retina.js не работал ни для изображений продукта, так и для статических блок -изображений.

Answer 1

Разве изображения сетчатки не просто изображения с более высокой плотностью пикселей? Вы можете обнаружить и переключить его, обнаружив эту плотность

var retina = window.devicePixelRatio > 1;
if (retina) {
 // the user has a retina display 
} 
else {
 // the user has a non-retina display 
}

Чтобы сделать его чистым, вы можете сделать обычное изображение имени и изображение -ретина, например, вы можете получить изображение SRC, добавить -retina и вернуть SRC обратно.

Опубликовал это как ответ, как предложил Тим.

Answer 2

Вы можете сделать это с помощью следующего 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 вы создаете две версии одного и того же файла, одну в два раза больше в обоих измерениях и используете _2x Конвенция о именовании, сохраняя их в том же каталоге, т.е.;

myimage.png
myimage_2x.png

Скорее всего, вы столкнетесь с проблемами с встроенными изображениями, если страница просмотра вашего продукта также использует JS, такой как Cloudzoom, но эта техника будет обрабатывать изображения Retina для большей части изображений на сайте (чтобы увидеть, как обрабатывать представление о продукте, вы должны купить тема с сетчаткой и посмотрите, как они справились с ней).

Answer 3

Пожалуйста, посмотрите на общий iphone Magento Theme. Это уже готово сетчаткой.

Answer 4

Мне не нравятся решения JavaScript, которые заменяют источник каждого изображения, потому что пользователю Normaly необходимо загружать оба изображения, и особенно на мобильных устройствах, которые вы не должны сохранять каждый байт данных.

Но я нашел это бесплатное расширение: http://www.magentocommerce.com/magento-connect/retina-product-images.htmlОн обеспечивает изображения сетчатки только для устройств с высоким разрешением через PHP без замены.

Answer 5

Вы можете использовать SRCSET потому что быть запасной.

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

Смотрите документацию в этой ссылке:

https://webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

Совместимость:

http://caniuse.com/#feat=srcset