I'm working in a project of building a responsive website. The painful thing we're having is to deal with the content of the image in different display modes. Please be noted: the image content.
The thing is: in almost pages at PC view, the images are displayed in landscape, with great ratio between width and height. Now when bringing them to mobile view, we have to display it in a different frame. And as you might imagine, now the content of the image was scaled and cropped and then exported to some very weird images on mobile view. Like a wide picture with people are almost in left side, but after being cropped there are only non-sense objects in the picture left.
IMHO, via technical solutions we are only processing the technical attributes of the image (resizing, scaling), we are unable to deal with the image content, that's really a human matter, right?
I'm thinking about 4 solutions:
1 - Despite the customer feelings, we just scale the picture (keep
all content, just resizing it). The output sometimes will be very
ridiculous I guess because of resizing a landscape picture to a
portrait or square one. But that's mostly the easiest way to come up.
2 - Considering to image frame size on mobile view, and auto crop the
picture by picking the center area of the picture. As I said above,
it produced the non-sense picture after all.
3 - Informing customer, whenever they upload a picture, they have to upload 2 copies of it, 1 for desktop view and 1 for mobile view, and they're definitely responsible for the content displaying at front side. Tons of effort need to be spent by customers, but easier for development.
4 - Advanced feature: user can upload only 1 picture, we provide the
different view-ports and a cropper for them to decide how the image
displays on those after being cropped.
I don't have much experience in dealing with these stuff, and not sure how the world out there handling this case. As I see for now Wordpress is only requiring users to upload only 1 picture and it will automatically scale it (my 1st option). Does anyone have experience on this? Can you please share me your solutions and also your thoughts about my above solutions? Thank you.
you can build a simple web application for them to upload the picture and provide your client with a preview of how the pictures with look like for both desktop and mobile. in php, there is the GD library and it is quite easy to use for cropping and resizing.
Apply the 4th and the 1st option so you don't have to deal with it,
Crop and scale with the options you have AND let the customer decide if they want to change it and choose how the image is been displayed.
in case they ask you can say they have the option to fix it, in case they don't want to you already handle the best technological option.
Related
I know this is probably not the best SO question ever because I don't have the relevant code (I don't know where it is and I can't find it). If anybody has seen this problem before or knows what is causing this I can't tell you how much I would appreciate it.
I have a storefront and the images in the storefront are showing up rotated 90 degrees to the left for no apparent reason.
The actual source files of the images are normal, if you look at the actual .jpg used in on the site they are upright.
How or why would they be showing up rotated? Is this some setting or a bug in WooCommerce?
Note
Yes, I've disabled every addon and used only WordPress and WooCommerce and the result is the same. Different themes yield the same result as well.
I discovered the problem in case anybody stumbles across this later down the road. The issue is with Apple's exif data and rotation information they store within each image. It is apparently not compatible with most computers and when you upload a picture from a mobile device from Apple (ipad, iphone etc.) you are likely to experience this phenomenon.
There is little than can be done about it, shy of uploading the images to a computer and manually fixing the orientation of all rotated images before using them.
I have a huge image that is going to be uploaded to my server. The width and height are for example: 2000x2000. I have multiple places in my code where I need the image to be 1000x1000, 250 x 110 or like 100 x 50. When they upload the image, should I make ASP automatically re size to these dimensions and save them on my webserver like image-250x110, image-1000x1000, image-original, and image-100x50 or is it fine to just to get the original image and re size on the fly through the code then show it to the users. I'm asking this because I'm worried that if too many people go on your website, re sizing the original huge image all the time would take alot of processing power and slow down the app. Or would something like this would be fine: http://www.hanselman.com/blog/NuGetPackageOfWeek11ImageResizerEnablesCleanClearImageResizingInASPNET.aspx
Your certainly want to resize the image when its uploaded since resizing a huge image of 2000 by 2000 pixels can easily take 2 seconds, even on a fast server. That's a delay your users are unlikely to appreciate.
What you posted, ImageResizer, is going to be your best solution, for many reasons, including:
There are a lot of potential problems when writing your own resizer, as detailed in 20 Image Resizing Pitfalls, including performance and stability issues.
If you redesign your site and want to change those image dimensions... it will be painful.
With ImageResizer, you only have one image - the nice big original image. All subsequent versions are served up (and cached) via the URL call. Note that the cacheable-version of ImageResizer requires a license.
ImageResizer will likely do a better job resizing images than yours will, both in quality and in file size, and also comes with filters, watermarking, and other features.
Resizing on the fly is a really bad option as it will eat up CPU.
If you can't pay for the cacheable version, you CAN use ImageResizer to resize the images on upload and save off the 3 versions or so of the images that you want.
I've used both methods -- written my own and used ImageResizer... ImageResizer is the way to go in my opinion.
I have a Drupal 7 / Views question...
I have a site with some data reports displaying in various graphs/ gauges etc. I also have a "Data" page that shows all of the data used so the user can look through it and/or even download it. My problem stems from the views table overflows past the screen on the right with data. This in itself is not a big issue, but I was wondering if there was a way to contain the view inside a fixed size box/container that is scrollable. Much like a text box.
Again, not that it would help the functionality but sure would make it look nice and clean.
Thank you in advance.
As my posterous/twitter photo blog is reportedly going the way of the PC at the end of the month, I'm going to create my own. I don't want the page to take aeons to load, so I want to use small (in file size) images for the thumbnails but then, when a visitor clicks on it to view it full-size, show the "real" image (full-size, both from a screen dimension perspective and as to its file size), in a sort of reverse bait-and-switch.
So I reckon I'll need subfolders like:
Project
Images
Thumbnails
Fullsize
I imagine something like this is done a lot. Is there an accepted/"received" way to "minify" the images to use as thumbnails (some webby type tool), or will I have to save each photo at a smaller size, one by one?
My answer would seem to be the Lightbox jQuery plugin:
http://leandrovieira.com/projects/jquery/lightbox/
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
Also, for automating the creation of thumbnails, see Irfanview's Thumbnail Viewer. See http://www.irfanview.com/ and http://dev.fyicenter.com/Interview-Questions/HTML/How_do_I_make_a_thumbnail_for_my_image_s_.html
I've been dabbling with JCrop and I can get it working so far as uploading an image, selecting a region and then saving what I've selected to a cropped version of the original image. I can also get the thumbnail preview working, so that whatever I've selected (however big or small fits into a 150px*150px region)..so far all good.
The only problem I'm having now is saving what is in the thumbnail preview which is 150*150 and as mentioned contains whatever I have selected...
I've had a good look around on google and can't see anything to save the thumbmail preview..
Anyone come across this before?
Ok bascially what I'm doing is saving the cropped image and then saving it again but resizing it to whatever dimensions are in the preview pane....I'm not sure it gives me the an exact replica of what's in the preview pane in terms of quality but it's not so bad I guess.