Comment obtenir d'Apple @2x convention de nommage des images de la rétine de travailler pour une application avec des rails backend?

Je suis en train de travailler sur les rails backend d'une application native.

Dans une application native, de la rétine (haute résolution), les images sont automatiquement chargés à l'aide de la @2x convention de nommage.

Par exemple, vous pouvez avoir deux images appelées image.png et [email protected] (la plus haute résolution version de la même image). Si l'application est en cours d'exécution sur un iPhone 3gs, image.png est automatiquement chargé. Si l'application est utilisée sur un iPhone 4, [email protected] sera automatiquement chargé.

Ce @2x convention ne fonctionne pas pour les non-natif des applications web en fonction de ce que j'ai lu et vu dans l'action.

Il semble que Apple @2x convention ne fonctionne pas pour les images fournies par un Rails de backend. Je sais que les requêtes de média peut vous aider avec ceci, mais je me demandais si il y avait une sorte de travail pour avoir un iPhone 4 automatiquement la charge @2x des images à partir d'une application web au lieu de la non-highres homologue.

Vous allez avoir besoin d'expliquer cela beaucoup mieux si vous voulez quelqu'un pour y répondre. Et surtout de ce que vous entendez par " @2x convention
Le "@2x " naming convention sera immédiatement familier à tout développeur iOS. C'est simplement une façon de nommer une autre version de la résolution d'une image, de sorte qu'il sera reconnu et utilisé par des dispositifs haute résolution.

OriginalL'auteur user1212187 | 2012-02-15

4

Je suggère ce qui suit:

Dans votre application rails, de créer différentes versions des images lors du téléchargement.

Puis dans l'application iOS, vous pourriez avoir un coup d'oeil à la scale propriété de UIScreen et de déterminer l'image à charger:
```
if ([[UIScreen mainScreen] scale] == 2.0f){
  //load retina image
} else {
  //load non-retina image
}
```
J'ai vu votre réponse beaucoup, mais je suis en train de faire quelque chose de légèrement différent. Disons que dans un Rails de vue-je afficher <%= image_tag "de l'image.png" %>. Même si [email protected] il existe dans le même répertoire que l'image.png, l'iPhone4 l'exécution de l'application Rails charges de l'image.png. Je sais que je peux déterminer le ratio de pixel appareil (pour déterminer si c'est de la rétine périphérique) à l'aide de Javascript et de le stocker à l'aide d'un cookie, puis conditionnellement servir des images en fonction de la valeur du cookie, mais je me demandais si il y a un autre travail autour c'est plus automatique sur le côté client et ne nécessite pas le backend d'utiliser un cookie.
Vous dites dans votre question, que c'est une application native, mais encore dans votre commentaire que vous mentionnez à l'aide de points de vue. Bien qui est-il? Jakob solution est fondée sur l'utilisation d'une application native, communiquant avec le serveur Rails via une API. Cela ne fonctionne évidemment pas si votre application iPhone est simplement en ouvrant une UIWebView et le chargement d'une vue à partir de Rails, et une session côté serveur var peut être votre seul pari dans ce cas.

OriginalL'auteur Jakob W
2

La HiSRC gem fonctionne très bien:
https://github.com/haihappen/hisrc-rails

Il utilise la même convention de nommage comme Apple (@2x pour les images de la rétine) et sert automatiquement la bonne.

Je l'utilise en conjonction avec CarrierWave, la création de deux versions miniatures sur l'upload:
```
version :retina_thumb do
  process :resize_to_fill => [200, 200]
  def full_filename (for_file = model.photo.file)
    "[email protected]"
  end
end

version :thumb, :from_version => :retina_thumb do
  process :resize_to_fill => [100, 100]
  def full_filename (for_file = model.photo.file)
    "thumb.jpg"
  end
end
```
Et de votre point de vue:
```
<%= responsive_image_tag user.photo_url(:thumb).to_s %>
```
Un autre joyau j'ai essayé était Les Yeux Clairs, mais je ne pouvais pas le faire fonctionner...

OriginalL'auteur Brian
0

J'ai écrit un gem rails cette devrait résoudre le problème

OriginalL'auteur user310200
0

J'ai emballé une des solutions comme un joyau https://github.com/jhnvz/retina_rails

Al que vous avez à faire est:
1. Ajouter gem 'retina_rails' à votre Gemfile.
2. Exécuter bundle install.
3. Ajouter //= require retina à l'option Javascript de votre fichier manifeste (qui se trouve généralement à app/assets/javascripts/application.js).
Carrierwave
1. Ajouter include RetinaRails::CarrierWave vers le bas de votre uploader
```
class ExampleUploader < CarrierWave::Uploader::Base

  version :small do
    process :resize_to_fill => [30, 30]
  end

  include RetinaRails::CarrierWave

end
```
Trombone
1. Ajouter include RetinaRails::Paperclip vers le bas de votre uploader
```
class ExampleUploader < ActiveRecord::Base

  has_attached_file :image,
    :styles => {
       :original => ["800x800", :jpg],
       :big => ["125x125#", :jpg]
     }

  include RetinaRails::Paperclip

end
```
La gemme génère automatiquement rétine versions (ajoute @2x pour le nom de fichier) en fonction de votre défini versions dans un uploader. La js vérifie si l'utilisateur a un écran retina et si oui ajoute @2x pour le nom de fichier d'image.

Également posté la réponse à cette question: Comment pouvez-vous générer retina (iPad) amical (progressif ou entrelacé) des images jpeg avec CarrierWave?

OriginalL'auteur Johan van Zonneveld

Que pensez-vous de cette approche:

Le téléchargement d'un fichier raw avec une haute résolution et puis tout simplement de générer le 3 tailles différentes. Ici pour une Icône de modèle que je veux mettre en œuvre:

  has_attached_file :attachment,
  storage: :s3,
  s3_credentials: Rails.configuration.aws,
  s3_protocol: :https,
  s3_host_name: 's3.amazonaws.com',
  url: ':s3_domain_url',
  path: ':class/:attachment/:id_partition/:style_:basename.:extension',
  styles: {
    '@3x_thumb': '192x192>',
    '@2x_thumb': '128x128>',
    'thumb': '64x64>'
  },
  convert_options: { 
    all: '-strip', 
    '@3x_thumb': '-quality 100 -interlace Plane', 
    '@2x_thumb': '-quality 100 -interlace Plane', 
    'thumb': '-quality 100 -interlace Plane'
    },
  :s3_headers => { 'Cache-Control' => 'max-age=3600' }

Je ne suis pas sûr de ce que l'option convertir sont corrects mais le nom et le dimensionnement problème est résolu.

OriginalL'auteur Simon Franzen

Vous devez vous connecter pour publier un commentaire.