1

I am trying to upload images to a blog using carrier wave. on the blog, I want all of the images to fit in the same size box, regardless of the size of the photo. I want all of them to be 450x253. Here is my code:

Uploader file for carrier wave:

   class PhotoUploader < CarrierWave::Uploader::Base


  include CarrierWave::MiniMagick
  include Sprockets::Rails::Helper
  storage :fog

 def store_dir
   "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
 end 

   process :resize_to_fill => [450, 253]

  # Create different versions of  files:
    version :thumbnail do
      process :resize_to_fill => [200, 112]
    end

    version :profile_size do
      process :resize_to_fill => [450, 253]
   end

   version :full_size do
     process :resize_to_fill => [568, 320]
   end

  def extension_white_list
     %w(jpg jpeg gif png)
  end

end

And my index.html.erb file:

           <div class="row">
                    <% @articles.each do |article| %>
                    <div class="col-md-6">
                        <div class="well well-lg">
                                <p><%= image_tag(article.image.url) %>

                                    <div class="body">
                                        <div class="text-center">
                                            <%= article.description %>
                                        </div>
                                          <div class="row">
                                            <div class="col-xs-3">
                                                <button class="btn btn-primary btn-lg" type="submit">Button</button>
                                            </div>
                                            <div class="col-xs-9">
                                                <button class="btn btn-default btn-lg pull-right" type="submit">Button</button>
                                            </div>
                                         </div>
                                      </div>
                                </div>
                             </div>
                        <% end %>
                    <div class="col-md-6 col-sm-6">
                    </div>
                </div>

At this line:

  <%= image_tag(article.image.url) %>

I have also tried:

  <%= image_tag(article.image.profile_size.url) %>

since my uploader file says the profile_size should render 450x253, but that still doesn't work. With my current code, the size of the photo as it displays on the page is just the same size of whatever it is that I upload, it doesn't resize at all, for example:

photo of my screenshot

I want them all to be the same size of the one on the left in the photo, but auto resized to that (the one in the photo is naturally that size), how can I do that? I already tried looking here: http://www.rubydoc.info/github/jnicklas/carrierwave/CarrierWave/MiniMagick

and here: Carrierwave - Resizing images to fixed width

thanks

Community
  • 1
  • 1
jjjjjjjj
  • 4,203
  • 11
  • 53
  • 72

1 Answers1

2

Use resize_to_fit or resize_to_limit instead of resize_to_fill

process :resize_to_limit => [450, 253]

or

process :resize_to_fit => [450, 253]
Laurens
  • 2,420
  • 22
  • 39