как использовать изображения продуктов retina?
Как вы реализуете изображения продуктов Retina в Magento? Я видел несколько коммерческих тем в Интернете, которые делают это, но я не уверен, как.
Использование чего-то вроде Retina.js не сработало ни для изображений продуктов, ни для изображений статических блоков.
5 answers
Разве изображения сетчатки не являются просто изображениями с более высокой плотностью пикселей? Вы можете обнаружить и переключить его, определив эту плотность
var retina = window.devicePixelRatio > 1;
if (retina) {
// the user has a retina display
}
else {
// the user has a non-retina display
}
Чтобы сделать его чистым, вы могли бы создать обычное изображение имени и сетчатку изображения, например, вы могли бы получить src изображения, добавить сетчатку и вернуть 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 вы создаете две версии одного и того же файла, одна в два раза больше в обоих измерениях, и используете соглашение об именовании _2x, сохраняя их в одном каталоге, т.е.
myimage.png
myimage_2x.png
Скорее всего, вы столкнетесь с проблемами со встроенным изображения, если на вашей странице просмотра продукта также используется JS, например CloudZoom, - но этот метод будет обрабатывать изображения сетчатки для большинства изображений на сайте (чтобы узнать, как обрабатывать просмотр продукта, вы должны купить готовую тему retina и посмотреть, как они ее обработали).
Пожалуйста, взгляните на общую тему iphone Magento. Он уже готов к работе с сетчаткой.
Мне не нравятся решения Javascript, которые заменяют источник каждого изображения, потому что пользователю обычно нужно загружать оба изображения, и особенно на мобильных устройствах, которые вы не хотите сохранять каждый байт данных.
Но я нашел это бесплатное расширение: http://www.magentocommerce.com/magento-connect/retina-product-images.html Он предоставляет изображения сетчатки только для устройств с высоким разрешением через php без замены.
Вы можете использовать srcset в качестве запасного варианта.
<img src="normal-image.jpg" srcset="better-image.jpg 2x">
Смотрите документацию по этой ссылке:
Совместимость: