I'm wondering if anyone knows a good strategy for solving this problem:
I'm creating a social networking site using Laravel 4. Users can upload pictures to their own gallery. These pictures can be any shape and size but the gallery on their profile will only display a cropped and resized thumbnail of the image (200px x 200px), which you can click on to view the full image.
Im using the Laravel plugin Intervention right now, which saves the original image, then resizes and crops that image and saves it again ( so now I have 2 copies). I then display the cropped/resized image as the thumbnail that links to the full size original image. However, I find that making copies of every image will be a tedious waste of space on my server since there could be thousands of images uploaded to the site.
Is there a way to grab the original image, resize and crop it on the fly and display it only when the user loads the page without having to save the thumbnail to the server? or am I stuck with having to make a cropped copy for every image?
A great example that shows what I'm looking to achieve is the way Facebook crops pictures into squares in a users picture gallery or how they are cropped and resized on the newsfeed when a user uploads multiple images to a status.
Any advice is greatly appreciated!
Have you seen League/Glide yet? It's basically a wrapper for Intervention/Image and Intervention/ImageCache. Glide's Laravel setup video gets you set up in two minutes (pay attention to the second example).
Yes Intervention let's you manipulate and display on the fly too.
Here's a simple example (obviously you would actually do it with a controller etc)
Route::get('img/profile/picture.jpg', function(){
$img = Image::make('path/to/profile/picture.jpg');
// resize, crop, whatever
return $img->response();
});
And then you just set the right URI to this route as src of your image.
Intervention Docs
Keep in mind that this will use more server resources and make the image response take longer
Related
is there any Way to modify Preview Images of Website with a userscript or something?
If there is a Gallery Website with an Overview with 5x10 Small images as Preview Images loaded per Page.
When i click the Small Image i get to the Subpage of the Content where is a bigger Version of the Image or an Mosaic Preview Image for an Video.
I want the small Preview Image in the Overview to be replaced by the bigger or Mosaic one from the Subpage.
All Variants of the Images have the same Url except the Ending.
Like
...2022/11/xxxxXxxx_s.jpg small ...2022/11/xxxxXxxx_b.jpg big ...2022/11/xxxxXxxx_m.jpg mosaic
Hope you understand what i mean.
Appreciate any Help
greets
When uploading an image in Prestashop, my image is resized accordingly to settings. Can I remove the resize treatment and use native uploaded images in my website?
Images are resized in different size needed for different uses in Prestashop, so disabled fully this feature is not an good idea.
but to get the original image, you need to change path image in your file.tpl
https://example.com/img/p/{$id_product}/{$name_product}.jpg
I've noticed that many website change all their user-uploaded images to .jpg or .png format.
I am wondering what are the pros and cons of converting images to the same format.
Possible points of consideration are:
Security (I heard it is possible to put malicious code in images of certain filetypes)
Storage
Image quality
Scalability
Typically, after a user uploads a photo to a web application, some processing will be done to the image. For example, if a user uploads an avatar image, it will be cropped so that it is square, and resized so that all avatar images are the same size. Sometimes, we may want multiple resolutions of the same image for different display purposes (avatar icon vs. profile page). ImageMagick is often the tool of choice for performing image processing on the server.
I haven't dive in to trying the library out because I am trying to find out if this is possible.
I want to have the client side create a thumbnail as well as optimize the orignal file for web use. So upload maybe a 30x30 or 50x50 thumbnail and then a full size image like 600x600 or 800x800 With the same post request. Then I will be able to provide the serve the photos directly from what was uploaded.
If this is possible, what would the thumbnail be, post file[1] and full image, size file[0]
Is it possible to set it up to allow multiple post request for multiple images where each request has both a thumbnail and a full size image?
Is not a built in feature in dropzone but it is possible, but I think the easiest approach using dropzone would be to send the full image as a file, and the thumbnail as a text input field with the thumbnail base 64 encoded.
And yes you can configure dropzone to send an independent request for every image with one of this pairs per request.
I have created website where users can upload image with any size.
I have served images with get_serving_url function.
I have added to end of image modifiers to resize image to 200px size.
http://127.0.0.1:8080/_ah/img/dtrh0i6I_V5JGulg2_LKZw===s200
I have uploaded image 1000x800 - and all right - I have image with size 200x160
If I have uploaded image 100x50 - in result I have resized image with size 200x100. But this is not a good. I need to show original small image, if image size lower that 200px.
How to do this on Google App Engine + Python with get_serving_url?
What you need can't be done automatically using get_serving_url.
I think the easiest way to implement that would be saving the image along with a needs_resize property and calling get_serving_url without size parameter if that is not the case (which serves the original image).