jhnvz/retina_rails

Makes your life easier optimizing an application for retina displays.

Retina Rails

Makes your life easier optimizing an application for retina displays.

Still using version 1.0.x?

---

Check upgrading to upgrade or the version 1.0.x readme.

---

How it works

Retina Rails makes your application use high-resolution images by default. It automatically optimizes uploaded images (CarrierWave or Paperclip) for retina displays by making them twice the size and reducing the quality.

Good source on setting up image quality: http://www.netvlies.nl/blog/design-interactie/retina-revolution

Resources

• Installation
• Migrations
• Carrierwave
• Paperclip
• Displaying a retina image
• Upgrading

Installation

1. Add gem 'retina_rails', '~> 2.0.0' to your Gemfile.
2. Run bundle install.

Migrations

Add a text column named retina_dimensions. This column is used to store original dimensions of the images.

class AddRetinaDimensionsToUsers < ActiveRecord::Migration
  def self.change
    add_column :users, :retina_dimensions, :text
  end
end

CarrierWave

Simply add retina! to your uploader.

class ExampleUploader < CarrierWave::Uploader::Base

  retina!

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

  version :large, :retina => false do
    process :resize_to_fill => [1000, 1000]
  end

end

By default it sets the retina image quality to 60 which can be overriden with process :retina_quality => 80. To disable the creation of a retina version simply call version :small, :retina => false.

Custom resize processors

You can also use your custom resize processors like so:

class ExampleUploader < CarrierWave::Uploader::Base

  retina!

  version :small, :retina => false do
    process :resize_to_fill_with_gravity => [200, 200, 'North', :jpg, 75]
    process :store_retina_dimensions
  end

end

Make sure you double the image size yourself in your processor. In this example the image will be displayed with a size of 100x100.

Paperclip

Simply add retina! to your model.

class ExampleUploader < ActiveRecord::Base

  retina!

  has_attached_file :image,
    :styles => {
       :original => ["800x800", :jpg],
       :small => ["125x125#", :jpg]
     },
     :retina => { :quality => 80 }

end

By default it sets the retina image quality to 60 which can be overriden by adding a quality option. To disable the creation of a retina version set the retina option to false :retina => false.

Displaying a retina image

retina_image_tag(@user, :image, :small, :default => [50, 40])
# or
retina_image_tag(@user, :image, :small, :default => { :width => 50, :height => 40 })

If no image is uploaded (yet) it will display the default image defined with CarrierWave or Paperclip and set the width and height attributes specified in the default option.

Voila! Now you're using Retina Rails.

Supported Ruby Versions

This library is tested against Travis and aims to support the following Ruby and Rails implementations:

• Ruby 2.1
• Ruby 2.2
• Ruby 2.3
• Ruby 2.4
• Rails 4.2
• Rails 5.0
• Rails 5.1

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Copyright

Copyright (c) 2018 Johan van Zonneveld. See LICENSE for details.

retina_rails's Issues

Carrierwave: Using only version (without url) causes error

image_tag current_company.logo.thumb, :retina => true
# undefined method `split' for /assets/logo.png:#<Class:0x007fb9f0938e18>

Adding to_s or url fixes the issue.

Retina only (feature)

add ability to only generate and use retina version (without js, scaled with width and height attribtues)

wrong file name for @2x version

If i have image with name name.with.dots.jpg, then plugin will generate a name [email protected]@[email protected]
I have change
file_name.gsub!('.', '@2x.').gsub!('retina_', '') if version_name.to_s.include?('retina')
to
file_name.sub!(/(.*)\./, '\1@2x.').gsub!('retina_', '') if version_name.to_s.include?('retina')
in file retina_rails-0.1.1/lib/retina_rails/carrierwave.rb and it works for me.

Loads Retina image only first time opening page

I've added the Gem, and Required the Javascript file in application.js and my image_tag('relax.png', :retina => true)

It seems that it loads the retina the first time I land on the page with the retina image, but if I navigate away from that page and then back, either through link or address bar, it doesn't trigger the retina javascript, and the source comes back as follows on the reloaded page.

img alt="Relax" data-at2x="/assets/[email protected]" src="/assets/relax.png"

Edit

In further investigation, I found that it was lost when I logged into my application using devise. If I log back out, it begins displaying the retina images again.

Custom processors?

In order to avoid having to call manipulate! multiple times during processing (which essentialy calls imagemagick), which greatly increases processing time and decreases quality due to multiple jpeg compressor passes, I wrote a custom filter which includes resizing.

How can I make retina_rails work with this?

For example:

# process resize_to_fill_with_gravity: [100, 100, 'North', :jpg, 75]
def resize_to_fill_with_gravity(width, height, gravity, format, quality)
  manipulate! do |img|
    cols, rows = img[:dimensions]
    img.format(format.to_s.downcase) do |i|
      if width != cols || height != rows
        scale      = [width/cols.to_f, height/rows.to_f].max
        cols, rows = (scale * (cols + 0.5)).round, (scale * (rows + 0.5)).round
        i.resize "#{cols}x#{rows}"
      end
      i.gravity gravity
      i.background "rgba(255,255,255,0.0)"
      i.extent "#{width}x#{height}" if cols != width || rows != height
      i.quality quality.to_s
    end
    img = yield(img) if block_given?
    img
  end
  file.content_type = 'image/jpeg' if format.to_s =~ /jpe?g/ # must set explicitly
end

prevent @2x generation

When a new image is uploaded (Paperclip in my case).
How can I prevent a @2x version to be generated when the image is too small, and having the @2x version would only abuse the bandwidth without any increase in quality?

[Rails 5] Deprecation warning

Using this gem with Rails 5 throw a deprecation warning:

DEPRECATION WARNING: alias_method_chain is deprecated. Please, use Module#prepend instead. 
From module, you can access the original method using super

Is there a way to reprocess images?

Currently, images that are uploaded after the addition of retina_rails are working, but everything else is not.

Is there a way to refresh all the existing images? I tried using the rake paperclip:refresh CLASS=User task, but no dice.

Thanks for the great gem. Was a breeze to get set up, otherwise.

retina_rails ignores convert options

I'm having an issue where retina rails is ignoring the convert_options that I set.

:convert_options => { :twitter => "-background white -compose Copy -gravity center -extent 640x640" }

It converts fine when I turn retina rails off.

I also noticed that retina rails does not respect percentages in the style options, it seems to be converting them to pixels.

I will try to investigate further in the code to see if I can come up with a solution.

License missing from gemspec

RubyGems.org doesn't report a license for your gem. This is because it is not specified in the gemspec of your last release.

via e.g.

  spec.license = 'MIT'
  # or
  spec.licenses = ['MIT', 'GPL-2']

Including a license in your gemspec is an easy way for rubygems.org and other tools to check how your gem is licensed. As you can imagine, scanning your repository for a LICENSE file or parsing the README, and then attempting to identify the license or licenses is much more difficult and more error prone. So, even for projects that already specify a license, including a license in your gemspec is a good practice. See, for example, how rubygems.org uses the gemspec to display the rails gem license.

There is even a License Finder gem to help companies/individuals ensure all gems they use meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough issue that even Bundler now generates gems with a default 'MIT' license.

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue with a nice message. In either case, I'll follow up. Thanks for your time!

Appendix:

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file), GitHub has created a license picker tool. Code without a license specified defaults to 'All rights reserved'-- denying others all rights to use of the code.
Here's a list of the license names I've found and their frequencies

p.s. In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :). See the previous link or my blog post about this project for more information.

dots get removed from urls

Hi,
I'm hosting my images and attachments in another domain and the retina_rails image tag helper removes the dots from the URL.
So when I expect this https://s3-sa-east-1.amazonaws.com/ y get this https://s3-sa-east-1amazonawscom/
This happens whit the src and the @2x attributes.
Im using paperclip.

gem 'paperclip'
gem 'aws-sdk'

include RetinaRails::CarrierWave doesn't keep processes that aren't resize

When RetinaRails::CarrierWave creates the retina version the only processors it attaches to the new version are resize_to_fill, resize_to_limit, resize_to_fit, resize_and_pad

For example:

class MyUploader < CarrierWave::Uploader::Base

  version :thumb do
    process resize_to_limit: [218,500]
    process :desaturate
  end

  include RetinaUploader


  def desaturate
    manipulate! do |img|
      img = img.quantize 256, Magick::GRAYColorspace
    end
  end

end

The standard version will be desaturated but the retina version will not.

does this work with mongoid? because it uses mongoid-paperclip?

Mongoid support

In the strategies.rb file, my app won't run this gem because of the ActiveRecord line for Paperclip. Can you please alter this so that it recognizes Mongoid::Document as well?

Error generating "retina_dimensions" if filename is not URL friendly

I've come across what seems to be a bug.

My user profile pictures are uploaded by users, therefore susceptible to some funky file names... If a user uploads a file with an apostrophe in the filename in my particular case isn't.jpg, the generation of the retina_dimensions field all gets set to 0 for all styles.

I thought I could get around this by simply doing a transliterate on the filename before upload in a before_post_process method to get rid of any unwanted characters and clean the filename to be url friendly. However, while I can successfully clean the filename, the retina_rails plugin seems to be calling for the retina_demensions before I change the filename, so before the before_post_process call; resulting in my retina_dimensions to be saved as 0.

Have you seen anything like this before?

Let me know if you need anymore details.

I will look through the source of the plugin when I get a chance tomorrow and see if I can find where this is happening.

Best,

Waylon

Incorrectly parsed partial style sizes

Let's say I have a Paperclip image style like :project => "x800"

In this case it means that the height of the resulting image should be 800px and the width should automatically follow the ratio (since the syntax is widthxheight). Thus, when generating retina images, they should be 800*2=1600px in height. However the actual resulting retina images are 1600px in width, with height following the width, not the other way around as it should be.

I suspect that retina_rails doesn't properly parse the style's size when it's missing a width, and sets the height as the width instead.

Retina for hidden images

Hello,

I use your gem and I use a tab (with bootstrap) to display images. When an image is in an hidden tab, it will transform my image tag to :

As you see, width, height = 0.

Thank you

Does version 2 support retina versions of assets/images?

I am trying to figure out how to get retina versions of image.jpg and [email protected] type files that I have sitting in my assets -> images folder. Does this gem support those or do they need to be entered into the database with paperclip? As an example, how do I convert this over:

<%= link_to image_tag("logo.png", :alt =>"logo", :role => 'banner', size: "257x35", :id => 'home'), main_app.root_path %>

(I am particularly worried about attributes like :alt, :role, :id which are not specified as valid settings in the retina_image_tag variant. Do I just append them with a different function?)

Thanks for the great gem!

Configuring retina quality

Retina photos can have much lower jpg quality than regular photos
We need a way to configure it