2

I'm able to upload multiple images, but I'm not sure how to customize the size of the image.

This is how I view the images:

<%= attachment_image_tag(image, :file, :fill, 300, 300) %>

:fill : crops the images

300, 300 : is the height and width

Before refile, I had hardcoded the source of the images, and then I used this CSS to fix the size of the image.

img {
  display:block;
  max-height: 430px;
  max-width: 100%;
  width:auto;
  height:auto;
}

I wanted to have a height consistent throughout, but the width can be any size and won't be distorted or cropped.

At the time of this post, I was thinking that I can get away with increasing the width and height in the refile attachment_image_tag option to like 800, 800, but it still crops the images... Also, I tried to get rid of :fill, but my images won't show, and the code just breaks.

hellomello
  • 8,219
  • 39
  • 151
  • 297

1 Answers1

4

If you take a look at Refile wiki you will find that there are other methods to crop the image : see here

As I can see in your css you were looking for a max-height of 430px but if the image height is lower than 430px you would not expand it to be exactly 430px so I think it's not logical to use fill, instead I would use limit

<%= attachment_image_tag(image, :file, :limit, 300, 300) %>

as the documentation says :

limit(img, width, height) :

Resize the image to fit within the specified dimensions while retaining the original aspect ratio. Will only resize the image if it is larger than the specified dimensions. The resulting image may be shorter or narrower than specified in either dimension but will not be larger than the specified values.

In your case you are looking just to fix the height and you would like the width to be any size right ? so after looking at the code of limit it looks like this : 

def limit(img, width, height)
  img.resize "#{width}x#{height}>"
end

Refile use Imagemagick to crop the image and If I am not wrong you can achieve that doing something like this :

x430          # width = any size, height = 430

So I think you can just set the width param of limit to nil like that :

<%= attachment_image_tag(image, :file, :limit, nil, 430) %>

Hope this help.

medBouzid
  • 7,484
  • 10
  • 56
  • 86
  • This did help me. I didn't know where to look for the other methods. I used `:fit` instead of `:limit`, however, you would need to add a width. I'm just not sure how you can do 100%? I will accept this answer, but it guided me to the right place, but if I can do 100% in the width, how would I do so? – hellomello Jul 21 '15 at 03:16
  • does this not working for you : attachment_image_tag(image, :file, :limit, , 430) – medBouzid Jul 21 '15 at 03:18
  • `syntax error, unexpected ',', expecting ')' ...image_tag(image, :file, :fit, , 430) );` – hellomello Jul 21 '15 at 03:20
  • what about trying this : attachment_image_tag(image, :file, :limit, nil , 430) – medBouzid Jul 21 '15 at 03:21
  • @hellomello it worked with nil ? let me know so I can edit my answer – medBouzid Jul 21 '15 at 03:24
  • Wait! i'm so sorry, I'm an idiot... I don't think it worked. I accidentally had 800, nil, 430. So I added an extra variable between the width and height, but somehow it generated images still. However, when I deleted a few things within my view, and just made it bare and minimal just to see the code, it doesn't work – hellomello Jul 21 '15 at 03:33
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/83817/discussion-between-medbo-and-hellomello). – medBouzid Jul 21 '15 at 03:37