I'll start by explaining what I would like to do.
I have an image gallery grid layout page with thumbnails. Each thumbnail image is to be the same size, say 120px x 80px. I would like to display all the images on page load and more as a user scrolls down on the page. There will be hover and click states for individual images in the grid where the full size image pops up to display in a lightbox.
What solutions (gems, techniques, etc.) are there for loading images that are larger (1024 x 768) into my database (Photo) model such that I can generate a small thumbnail image of predefined smaller size?
Is the best way to load a whole page of small images if my goal is to allow more to load as the user scrolls down on the page? Or should I load only what the user sees, then use AJAX to load more as they scroll down?
Is Paperclip a common solution in this case? I'm looking into this and CarrierWave on RailsCasts.
If using something like Paperclip, can it handle cropping an image that isn't the same aspect ratio as others? ie, scale and crop a square image the same as a rectangle image to a defined size.
I'm new to handling a large number of images in a rails application and appreciate any advice, books, tutorials, techniques people are familiar with out there.
Thanks!
1) I prefer paperclip, though this may be due to less experience with other gems.
2) Generally, the best way to handle lots of images on a page is with sprite sheets. If the images on the page are always going to be the same, this might be a good option. If you are doing something with infinite scrolling, ajax is the way to go (railscast on infinite scrolling)
3) I'm not sure if paperclip is a common solution, but it certainly is one that you should consider.
4) Yes, cropping works in paperclip.
Related
** In image processing, while cropping images, aspect ratio is maintained on any site or app.
Even uploading images as profile photo on whatsApp and Facebook, we cant edit both height and width separately
Why we cant edit the way we want **
Almost all image editing programs have an option to control whether aspect ratio is constrained or not while cropping. Sometimes one wants to guarantee the same aspect ratio and sometimes one wants to crop to a different one for a specific purpose. In fine art printing, crops are usually unconstrained to either match a specific paper size or to make sure the edges hit exactly where the photographer wants them to. (Resizing without preserving aspect ratio is almost never useful on photographs.)
For creating a profile photo, the desired aspect ratio constraint would be the one the site prefers or imposes, not the original one for the image. This immediately creates user confusion if the target ratio is not the one of the uploaded photo because most users do not understand the constraint and would wonder why they can't just use their entire photo.
It might be useful to have the UI that guides people to crop to the aspect ratio the site prefers, but most sites are somewhat imprecise about the entire concept anyway. (E.g. Facebook's profile photo layout has changed a number of times over the years. When I worked on the Photos team there, effort was being put into trying to automatically generate crops of photos so they could be display in a variety of places with different aspect ratios due to design choices. That this would enrage any serious photographer was not a significant concern to those working on the feature.)
It also takes a moderate amount of design and programming to do the UI for this and thus it doesn't get done that often. But most likely the reason is because it confuses users. Instagram would be an exception as it heavily pushes toward square aspect ratio and its large user base has very much embraced this. The UI very much steers one to crop to a square.
in our website we are retrieving data from an API, which does not pull images bigger than 100 × 75 pixels, then we show them listed. example We need to double up this size to match with our design.
Is there any Gem that does this, without loosing quality and not impacting performance?
There is no way to upscale an image without losing quality - you're basically asking an algorithm to fill in image data that simply does not exist in the file in the first place.
However, depending on the rate of the scaling and the images themselves, you could have acceptable results.
Since you want to do this effectively and there is no benefit of doing the resizing on the server anyway, I'd advise simply using CSS to achieve this on the client side - just set the desired width/height attributes for the specific img elements.
If you really want to do this on the server (e.g. if you need to save the resulting images), one option would be to use the Paperclip gem's image processing capabilities.
I have a site where images will needed to be presented in multiple sizes. I'd like to allow users to upload an image and not have to wait for the process (or background job) to resize it into the various sizes it needs to be stored in.
Ideally, I would like to set size attributes in the view, and the first time a user renders that view, for carrier wave to generate a new resized image and serve it up at render time.
Is this possible, and if so, is there any documentation on how to go about it?
Thanks.
I want to make sure that all the images that users upload to my website are the same size.
The size that I want to achieve is 620px x 405px
Because I don't want any white space in my images, and I want to keep the aspect ratio, I'm guessing I'll need to crop first, before I resize?
So far I've got the following code:
photo.Resize(width: 620, height:405, preserveAspectRatio: false, preventEnlarge: true);
But obviously this isn't giving me the desired affect.
I have seen other articles online where they do some formula, but I can't get any to work for me.
Suppose someone uploads an image which is 1020 wide by 405? Which bit do you want to keep? The left hand end? Right hand end? The middle bit? Then the next image is 3000 x 3000. Now which bit do you want to crop? Perhaps this one needs resizing before cropping otherwise you might only get a window.
My recommendation is to allow the user to specify the crop area, and then you resize the resulting cropped image. There are a number of jQuery plugins that enable client side cropping. I've written about jCrop (http://www.mikesdotnetting.com/Article/161/WebMatrix-Testing-the-WebImage-Helper-With-JCrop) but I have also received some feedback that it is not reliable in some versions of IE (although I haven't tested that myself).
I'm using attachment_fu and RMagick to upload/resize images on a rails app. Currently I use the local file system as the storage but I have a plan to use AWS S3 for the job. Anyway I am quite interested to know what other peoples' experiences on using S3 and also I have a one big question for you. In my app when a user uploads an image I resize this image to 5 different sizes and store them along with the original images. (altogether 6 images) based on thumbnail sizes provied in the model:
:thumbnails => {
"thumb" => "120x80",
"extra_small"=>"480x320",
"small"=>"640x480",
"medium" => "800x533",
"large"=>"2738x1825",
"extra_large" => "3464x2309"
Finally I get:
image_foo.jpg (Original Image)
image_foo_thumb.jpg
image_foo_extra_small.jpg
image_foo_small.jpg
image_foo_medium.jpg
image_foo_large.jpg
image_foo_extra_large.jpg
The reason why I re-size these images is I need the actual sizes of each image to be stored in the database. But actually even I specified the sizes for thumbnails I don't get the exact sizes. Anyway its OK, as the size is calculated based on the aspect ratio.
But I really don't like to waste the space on the server if I can calculate the thumbnails sizes without saving them to the file system. In other words, I only need to store the original file not the thumbnails, but still I need to get the sizes of the thumbnails. Is it possible to get the actual thumbnail sizes without creating them in RMagick?
Space on S3 is relatively cheap. So I wouldn't worry too much.
However, you could consider converting the images to fewer sizes. You could leave small and extra-small out and use the width and height attributes of the HTML img tag. However, that will make your side load slower and cause more traffic.
I guess what you are really looking for is a solution that converts the files on the fly when they are requested right? I am not sure if there is a solution for that off the shelf. However, this would be a major performance suck.
So my recommendation is to just stick with all the different sizes and pay a few cent more to amazon. This will yield best performance and will be easiest to maintain. You don't have to worry about scaling and the fact that storage is getting cheaper and cheaper works for this solution.