Resize images in rich text editor

[apeisa]

Hi

Just installed ProcessWire on localhost and it seems to be very clean and polished! I remember that in demo video you showed easy resizing of images, but I cannot repeat that?

I would be great if we could give maximum width for images (dunno which would be right place: image field or textarea field? Probably latter, since you could use same images in bodycontent and sidebar...), and ProcessWire would automatically process (hehe) images to right size. I tried to see if there is that kind of functionality already in place, but I didn't find anything.

But so far I have been very impressed and I will probably try using this on some personal project as soon as possible.

[apeisa]

Ok, I got the resizing working: I can resize right after choosing an image, but not after I have inserted image to the editor. I would still love to have "max width" for textarea

[ryan]

Thanks for the feedback! In Mozilla-based browsers (and in IE8) you can resize directly in the editor. In webkit based browsers, you can't resize in the editor because Webkit apparently doesn't  support selectable divs (or whatever method is used by TinyMCE). However, you can still resize easily just by clicking the image, clicking the image icon, and then the popup should still let you resize. Then click "insert image" and it'll put in the image resized and resampled at your dimension. Regardless of what method you use, the result will be the same, and the code it runs through on the back end is the same.

Regarding image size, I always recommend uploading images in the largest possible size you might ever need, so that all of your resizes are starting from a really high quality source. Typically you don't actually use them at that size in your output.  Instead, you specify the dimension, ProcessWire will create the resized version and cache it for future use. For example, this is how you might print out a gallery of thumbnails that links to larger sizes, like you might use with lightbox script:

<?php
foreach($page->images as $image) {
   $large = $image->width(500); 
   $thumb = $image->size(100, 100); 
   echo "<a href='{$large->url}'><img src='{$thumb->url}' /></a>";
}

You can create as many size variations of an image as you want. I believe this is preferable to having it resized to some target dimension in the admin because all of your size variations can start from the source.

[ryan]

Ok, I got the resizing working: I can resize right after choosing an image, but not after I have inserted image to the editor. I would still love to have "max width" for textarea

Sounds like we were typing at the same time. Your reply was waiting right after I posted. It sounds like you are talking about just the image sizes used in the rich text editor. In that case, ProcessWire is not resizing the source image (it's creating copies), so you are good there. But my understanding is that you think it should limit the size of the image that shows up in the textarea, so that you aren't trying to scale an image back that's 5x bigger than your screen. I think that makes sense, good idea. 

[apeisa]

Thank for your replies. I am using Chrome (webkit), so this explains the differences.

And yes, I think I should have ability to say thing like:

"Bodytext field on my Basic Page template shouldn't allow images larger than 500 pixels"

It's not nice to scale huge images smaller and huge images also tend to break layouts. Usually I never want to allow larger images than the width I have on my css.

[ryan]

I totally agree, I think that's a good suggestion. I'm adding it to my list.

[apeisa]

Great to hear, thank you Ryan. I bet you have few other ideas under you list already

[ragnarkarlsson]

Ryan, with regards to the method of creating a thumbnail of a set size, e.g.

 $thumb = $image->size(100, 100); 

If the source file is say 400 x 200, does this resize then trim to 100x100 or scale the image to 100 x 50?

I realise I could just test this and implement, but I'm in the office for my 9-5 and being lazy 

[ryan]

If you ask for an image of 100x100, then it's always going to return an image exactly that size. For a 400x200 source, the result would be scaled to 200x100 then cropped to 100x100 (though I think it does it in one step).

It always crops to the center. I will make it able to crop to corners if anyone ever needs it (I personally haven't needed it yet).

You asked about a 100x50 image too. If you wanted it to return a thumb of your 400x200 image at 100x50, then you'd want to do this:

$thumb = $image->size(100, 50);

Or if you just wanted it sized to 100 pixels wide, and a proportional height:

$thumb = $image->width(100); 

Or if you just wanted it sized to 50 pixels tall, and a proportional width:

$thumb = $image->height(50); 

The above 3 snippets would produce the same result (100x50) for a 400x200 image.

[ragnarkarlsson]

It always crops to the center. I will make it able to crop to corners if anyone ever needs it (I personally haven't needed it yet).

I should have been clearer, thats pretty much what I was wondering it would do if the large image was different ratio from the thumbnail.

The primary purpose I have in mind is that a customer of mine wants to have a gallery of photos, and I imagine they won't all be uniform ratio at full size but the gallery will be presented as a set of uniform thumbnails.

Ideally I'd like to be able to position the crop but I imagine that is a bit of a leap.

[ryan]

ProcessWire won't ever stretch or squeeze an image, so no matter what dimensions you give it, you can count on it to maintain the proportion of the actual photo subject while still maintaining the dimensions you've given it. If you need to deal with a gallery of photos, all with different dimensions, then your best bet will be to feed $image->size($w, $h) your target dimensions, and most likely the result will be a good one. If you need a fixed width AND height for your automated thumbnails, I've found that cropping/sizing to the center is the only way to deal with unknown dimensions ahead of time. And that's why ProcessWire does this. The only exception I could think of is if you are dealing with photos that always have the subject weighted to some corner, though I've not had to deal with that situation before. Of course, if you only need to maintain one dimension (whether just width, or just height) then all of this is a non issue. But give it a try, I think there is a strong possibility that you'll like the result.

[Arkster]

New here...

I know this is a somewhat old thread, but just wanted to say that being able to define a size like that and not have any stretched images is great! With the little I'm wrapping my mind around I'm really loving what you did with ProcessWire.

[ryan]

Arkster,

Welcome to the forums and thank you for your feedback!

Ryan