comment utiliser des images de la rétine produit?

Question

Comment utilisez-vous des images de produits Retina Magento? Je l'ai vu quelques thèmes commerciaux sur le web faire, mais je ne sais pas comment.

En utilisant quelque chose comme Retina.js n'a pas fonctionné non plus pour les images des produits et des images de blocs statiques.

Answer 1

ne sont pas des images de la rétine seulement des images avec une densité de pixels? Vous pouvez détecter et commuter en détectant cette densité

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

Pour le rendre propre, vous pouvez faire une image régulière nom et l'image-rétine, comme vous pouvez obtenir le src image, ajouter -retina et mettre le dos src.

Publié cela comme une réponse que Tim a suggéré.

Answer 2

Vous pouvez le faire en utilisant suivant JS;

https://github.com/leonsmith/retina-replace-js

Chaque fois qu'un fichier modèle a une image en ligne, vous devez ajouter l'data-retina="true" d'attribut de données au balisage, à savoir;

    <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>

Pour les images d'arrière-plan CSS vous créez deux versions du même fichier, un double de la taille dans les deux dimensions et d'utiliser la convention de nommage _2x, les garder dans le même répertoire, par exemple;

myimage.png
myimage_2x.png

Vous allez probablement rencontrer des problèmes avec les images en ligne si votre page d'affichage du produit utilise également JS comme CloudZoom - mais cette technique traitera des images de la rétine pour la plupart des images sur le site (pour voir comment gérer la vue du produit vous devriez acheter une rétine thème prêt et de voir comment ils ont manié).

Answer 3

S'il vous plaît jeter un oeil à iphone générique thème Magento. Il est déjà prêt Retina.

Answer 4

Je ne aime pas les solutions Javascript qui remplacent la source de chaque image, parce que l'utilisateur a besoin alors normaly pour télécharger les images et en particulier sur les appareils mobiles que vous wan't pour sauver chaque octet de données.

Mais je trouve cette extension libre: http: //www.magentocommerce .com / magento-connect / rétine-produit-images.html Il fournit des images de la rétine que pour les appareils à haute résolution via php sans remplacer.

Answer 5

Vous pouvez utiliser srcset pour être une solution de repli.

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

Consultez la documentation de ce lien:

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

Compatibilité:

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