When i write a code to display image in blade file that time a image thumbnails made and i can give the every time height,width that time i need image that kind of image thumbnails generates so i can generate multiple thumb of same image in single site.
{{$page->image,100,100)}}
Or
<td><?php if ($page->image) { ?><img src="{{ url('/upload/pages/'.$page->image,100,200) }}"/><?php } ?></td>
Please Give the suggestion how to make this kind of Thumbnails Thanks In advance.
A rational way to do this would be:
Create a controller and a method (or a method on existing controller) that accepts image name, width & height parameters. This method could use Intervention package that was mentioned in the comments. Logic should be - first check if image of specified dimensions exists, if it doesn't - create it (using Intervention, very simple). Then - output the image contents (don't forget to add correct header).
Add this controller/method to routes.php, eg:
Route::get('thumbnails/{image}', 'Controller#getThumbnail');
In your Blade templates you would simply refer to images like '/path/image.jpg?width=200&height=100'. No need to care whether the file with these dimensions already exists or not.
PS. Facebook serves images this way. It's basically like a little proxy server (your method works as a proxy) between user and original image.
you need to require Intervention, then put something like this in your upload controller :
...
$file = $request->file('files');
$extension = $file->getClientOriginalExtension();
Storage::disk('local')->put('/'.$file->getFilename().$extension, File::get($file));
$thumb1 = ImageManagerStatic::make($file->getRealPath())->resize(200, 200, function ($constraint) {
$constraint->aspectRatio(); //maintain image ratio
})->save('thumb1'.$extension);
$thumb2 = ImageManagerStatic::make($file->getRealPath())->resize(400, 400, function ($constraint) {
$constraint->aspectRatio(); //maintain image ratio
})->save('thumb2'.$extension);
...
You may resize that image on the fly with a microservice and cache the thumbnails in a CDN. Please have a look here
<img src="{{ imgProxy('https://your-microservice.com/your-image.jpg', 100, 200) }}"/>
Just for the record, if you are using Laravel, a good option is to use intervention/image and intervention/imagecache packages.
What you need is described on the "URL based image manipulation" section of Intervention Image Docs.
Related
I'm using Laravel. I want to resize images and create thumbnail based on query string.
For example, if someone requests example.com/1.jpg?width=120 or example.com/anything/1.jpg?width=120, the original image must change to the new resized image.
In fact, all I want is the routing system for image files like .jpg and .png where has a query string.
is there any way in PHP or Laravel to get all request for images files with query string and manipulate it?
Update:
I tested #iftikhar-uddin answer.
it work for single request. like when i request this url directly example.com/anything/1.jpg?width=120 in browser.
but i want to get all images and manipulate them when page is loading.
example :
i have multiple html tag like this <img src="/anything/1.jpg?width=120">
and when page is loading, i want to get all images and manipulate them by the size of query string.
what i did before ?
currently i wrote a class for this. but the problem is i can't find original directory of images in some case.
in my class :
1- i get image source and size in image tag like this <img src="{{class::cache($model->image, 'small')}}">
2- then i resize image based on size in my class (with image.intervention.io).
3- but in some case (like when i'm using lfm package) the route of image and the real directory are different. so i get error when i want resize image based on source.(the directory is '/public/share/image.jpg' but route is 'laravel-filemanager/share/image.jpg')
for that reason, i'm searching for a way to get images by url when page is loading, not by source we insert in image tag. i think this way must be much easier.
Tips 1:
http://image.intervention.io/
Intervention Image is an open source PHP image handling and
manipulation library. It provides an easier and expressive way to
create, edit, and compose images and supports currently the two most
common image processing libraries GD Library and Imagick.
public Intervention\Image\Image resize (integer $width, integer $height, [Closure $callback])
Resizes current image based on given width and/or height.
To constrain the resize command, pass an optional Closure callback as the third parameter.
// create instance
$img = Image::make('public/foo.jpg')
// resize image to fixed size
$img->resize(300, 200);
// resize only the width of the image
$img->resize(300, null);
// resize only the height of the image
$img->resize(null, 200);
// resize the image to a width of 300 and constrain aspect ratio (auto height)
$img->resize(300, null, function ($constraint) {
$constraint->aspectRatio();
});
// resize the image to a height of 200 and constrain aspect ratio (auto width)
$img->resize(null, 200, function ($constraint) {
$constraint->aspectRatio();
});
// prevent possible upsizing
$img->resize(null, 400, function ($constraint) {
$constraint->aspectRatio();
$constraint->upsize();
});
Tips2:
http://php.net/manual/en/function.imagecopyresized.php Using PHP functions
Install Image intervention first
Then in your controller do something like this:
if($request->hasFile('image')) {
$image = $request->file('image');
$filename = $image->getClientOriginalName();
$width = $request->input('width');
$height = $request->input('height');
$image_resize = Image::make($image->getRealPath());
$image_resize->resize($width, $height );
$image_resize->save(public_path('YourImagesPath' .$filename));
}
I want to resize an image twice using Intervention.
I have this currently:
$img = Image::make($image_url);
$img_path = public_path() . '/images/';
$img->fit(500, 250);
$img->save($img_path . '/img_250.jpg');
$img = Image::make($image_url);
$img->fit(100, 100);
$img->save($img_path . '/img_100.jpg');
As you can see, I first want to resize the original image to 500x250, and then I want to again resize the original image (not the 500x250 image) to 100x100.
Is there a way to do this without calling Image::make() twice?
Here's the answer:
http://image.intervention.io/api/reset
// create an image
$img = Image::make('public/foo.jpg');
// backup status
$img->backup();
// perform some modifications
$img->resize(320, 240);
$img->invert();
$img->save('public/small.jpg');
// reset image (return to backup state)
$img->reset();
// perform other modifications
$img->resize(640, 480);
$img->invert();
$img->save('public/large.jpg');
I'm posting this to help others who might come across a similar issue. While we can implement #user6421733's answer... There's a better way of handling different sizes of images.
Consider using Intervention's imagecache optional package. You could implement it simply too. http://image.intervention.io/use/url
It can allow you to use urls such as this http://yourhost.com/{route-name}/original/{file-name} and with little or less effort:
I want to crop/resize an image in Laravel (4.2). But it doen't seem to work very well...
So I Want to be able to upload an image, but resize it to a maximum width and height.
How should I do this?
The code I have now is:
//save the image
$destinationPath = 'public/pictures/news';
if (Input::hasFile('img'))
{
$file = Input::file('img');
$file->move('public/pictures/news', $file->getClientOriginalName());
}
So, I want a code in the if() statement, that crops the image. to a specified max-width and max-height.
If someone could help me out, I would be very happy!
Kindes regards,
Robin
use image intervention package it is providing an easier and expressive way to create, edit, and compose images.
https://packagist.org/packages/intervention/image
I've built a gallery using ci where the image that is uploaded is kept its same size as long as its within 3000x5000 px range. Upon displaying them and since i haven't cropped thumbnails , how can I re size them when needed so say i want to re-size a list of them as 150x150 how would i go about this?
i followed the guide
http://ellislab.com/codeigniter/user-guide/libraries/image_lib.html
Problem is when loading the library it wants me to specify each images complete config information.
So say I loaded the variable into a controller to be displayed in a view, and when loading it would look like this:
foreach($gallery as $img)
{
echo "<div>";
echo "<img src='" . $this->img_lib->resize($img->imagepath, 150, 150) . "'>";
echo "</div>";
}
ps: does the image gets saved when its resized? because i dont want that.
better solution: http://www.matmoo.com/digital-dribble/codeigniter/image_moo/
I know how to do it outside of ci. Essentially the img "src" needs to equal a php script OR be intercepted by htaccess which then redirects it to a php script.
You could try something like this:
foreach($gallery as $img)
{
echo "<div>";
echo "<img src='/imageResize.php?path=" . $img->imagepath . "'>";
echo "</div>";
}
File: imageResize.php
$path = $_REQUEST['path'];
$this->img_lib->resize($path, 150, 150);
Depending on the folder structure of your site it would be better to just pass the filename rather than the full path. Even better is to use .htaccess (which I do in our CMS) to intercept the image and resize/crop on the fly. e.g. <img src="/path/to/image.jpg?w=150&h=150" />
Does that help provide some direction?
On your other question, a physical file isn't saved on the server unless you specify it to do so.
The answer from #SaRiD is on the right track. However, it doesn't necessarily have to be outside of CI. You can point the image source to a controller method that takes care of the resizing and serve the image.
You also need to use the correct headers to identify the image resource to the browser, within this method.
You state that you do not want to save the thumbnail. This obviously depend on the need of the application. You can set it in a way that it serves the previously cropped and saved thumbnails to the browser if that exists (from a previous request), rather than creating and serving thumbnails each time - it will save you some CPU cycles.
Iam working on a project , which involves fetching images from various websites and displaying a Thumnail or resized version of orignal image.
As i will be fetching many images at time , this takes more time , As Orignal image files will be loaded.
What i need is given an image url , i need resized version of that image file? So that i need not download the Large orignal image file...
for example : orignal image : 500X800 some 500kb
what i need is : 100X150 some 100kb image file..
Is it possible using Jquery? OR PHP?
Are their any functions like imagecopyresampled(PHP) in Jquery or any plugins?
Well, the big file needs to be downloaded at one point to create the thumbnail.
What you can do, through JQuery, is ask your server for the thumbnail, the server downloads the file, creates the thumbnail and sends back to the client the URL of the thumbnail when the resizing is done. This way, the client will gradually receive thumbnails as they are ready.
Edit After experimenting a bit, I found out that as soon as an img requests a picture, even if you dynamically remove its src attribute, the download continue.
So I decided to write a sample code (there's not much validation and it only works for jpeg, adding the other types would be really easy though). The solution is divided in 3 parts:
HTML
First, I used an empty div with some specific attributes to let jQuery what to load. I need to apologize to Nuria Oliver, she had the first "big picture" I could find on the net. So, here's a sample div:
<div class="thumbnail" data-source="http://www.nuriaoliver.com/pics/nuria1.jpg" data-thumbnail-width="100" data-thumbnail-height= "200"/></div>
I use thumbnail as class to be able to find easily the divs I want. The other data parameters allow me to configure the thumbnail with the source, width and height.
JavaScript / jQuery
Now, we need to locate all these divs requesting thumbnails... using jQuery it is pretty easy. We extract all the data settings and push them in an array. We then feed a PHP page with the query and wait for the response. While doing so, I'm filling the div with some HTML showing the "progress"
<script type="text/javascript">
$(".thumbnail").each(function() {
var img = $(this);
var thumbnailWidth = img.data("thumbnail-width");
var thumbnailHeight = img.data("thumbnail-height");
var thumbnailSource = img.data("source");
var innerDiv = "<div style='width:" + thumbnailWidth + "px; height:" + thumbnailHeight + "px'>Loading Thumbnail<br><img src='loading.gif'></div>";
img.html(innerDiv); // replace with placeholder
var thumbnailParams = {};
thumbnailParams['src'] = thumbnailSource;
thumbnailParams['width'] = thumbnailWidth;
thumbnailParams['height'] = thumbnailHeight;
$.ajax({
url: "imageloader.php",
data: thumbnailParams,
success: function(data) {
img.html("<img src='" + data + "'>");
},
});
})
</script>
PHP
On the PHP side of things, I do a quick test to see if the picture has already been cached (I'm only using the file name, this should be more complicated but it was just to give you an example) otherwise I download the picture, resize it, store it in a thumbnail folder and return the path to jQuery:
<?php
$url = $_GET["src"];
$width = $_GET["width"];
$height = $_GET["height"];
$filename = "thumbnail/" . basename($url);
if(is_file($filename)) // File is already cached
{
echo $filename;
exit;
}
// for now only assume JPG, but checking the extention should be easy to support other types
file_put_contents($filename, file_get_contents($url)); // download large picture
list($originalWidth, $originalHeight) = getimagesize($filename);
$original = imagecreatefromjpeg($filename); // load original file
$thumbnail = imagecreatetruecolor($width, $height); // create thumbnail
imagecopyresized($thumbnail, $original, 0, 0, 0, 0, $width, $height, $originalWidth, $originalHeight); // copy the thumbnail
imagedestroy($original);
imagejpeg($thumbnail, $filename); // overwrite existing file
imagedestroy($thumbnail);
echo $filename;
Browser
So, what does it do exactly? In the Browser, when I open the page I first see:
And as soon as the server is done processing the image, it gets updated automatically to:
Which is a thumbnail version, 100x200 of our original picture.
I hope this covers everything you needed!
PHP Thumb is a good plugin it worked for me and easy to operate.
And the best part is there are many options to select about the output file like its quality, max width for potrait images , max width for landscape images etc..
And we can set permissions like block off server requests, block off domain thumbnails.. etc
Note: this was actually posted by someone , as an answer to this question..But it was deleted.So iam reposting it, as it was useful.
for this to work you need to do some actual image processing which you cant do with js, so some server side language is needed.PHP is an option
If you are not interesting in obfuscating the image source, you may very well rely on an external tool like http://images.weserv.nl/ which takes an original image and allows you to request it in a different size.
If you end up not relying on a global CDN, at least sort out proper caching. Last thing you want to do is resize the same image over and over again for subsequent identical requests - any benefit of image's lower size will probably be negated by processing time.