74 replies to this topic

[apeisa]

Sounds good. Overall pw image manipulation is in good shape. This is something that is sometimes a real timesaver, but never a showstopper. English only admin is a showstopper for many.

[Soma]

How about the possibility to create a config for defining various image sizes?

{
"news_small" => "50,0,70", ([w,h,compr])
"news-big" => "700,0,70",
"portfolio-small" => "50,50",
"portfolio-medium" => "100,100",
"portfolio-big" => "800,0,100"
}

So $image->original would be the uploaded raw picture, while you could use $image->thumb("portfolio-medium") ...
which would be produced on demand. Don't know if it would fit in your concept, but just wanted to throw in my thoughts.

[apeisa]

Soma: good idea, but that is pretty much supported already. You can do those resizes on the fly in your templates. What we are trying to achieve now is to have visual cropping tool without messing with UI and api too much.

[Pete]

But surely the problem with doing the on the fly is that they're done every page load and affects the user's experience when browsing the site if a thumbnail is to be created on the fly as well? Or am I not understanding this correctly (far more likely ).

I think the idea of a config setting where you can set options when creating the field could be the way to go.

[apeisa]

But surely the problem with doing the on the fly is that they're done every page load and affects the user's experience when browsing the site if a thumbnail is to be created on the fly as well? Or am I not understanding this correctly (far more likely ).

Image resizing is done only on first page load, so it affects very little for overall user experience. PW always first checks if there is already required image on right size and resizes only if image is missing. You can actually do very nice resizing already: http://villarental.c...esidio-del-mar/ (new site developed by Ryan).

I have nothing against defining various image sizes. It is pretty much same than one of the ideas that Ryan mentioned in his long reply. Presetting different images, like thumbnail, medium etc...  That would require much more work in UI  (cropping for each variation? preview?) and also require more coding on field setting (although using JSON would be possible shortcut here). That would be very powerful solution, no doubt. Although I believe that over 90% of sites doesn't require more than one cropping variation of each image (sizes and center cropping are well supported already). If multiple sizes are possible with clear and well working solution, I am all for it.

[Pete]

Oh right, I didn't realise the system was already as smart as that

[ryan]

You can define config settings for your own use. What I do on a lot of sites is define some of the common image dimensions in my /site/config.php file and just call upon these when I need them:

$config->myThumbWidth = 150;
$config->myThumbHeight = 100;

Then when you need to create a thumbnail, just refer to those:

$thumb = $page->image->size($config->myThumbWidth, $config->myThumbHeight);

This may be a preferable way to do it if you have multiple templates that need to use the same dimensions. That way you aren't specifying the same dimensions in multiple places... though I'm not always that disciplined.

[Marty Walker]

Hi,

Here's a video I made showing how I use textpattern (+ plugin) to create thumbnails. I wasn't sure I got my point across well enough in my post. I hope it makes sense.



Looks like the jCrop site is back up too: http://deepliquid.co...tent/Jcrop.html

Regards
Marty

[ryan]

Marty, thanks for making that video and posting. It was helpful to watch that, and I think it seems like a great jCrop implementation there. How did the thumbnails go from what you showed in the video into that grid of illustrations? Were they  tagged to appear there, or are they somehow placed with a richtext editor?

Thanks,
Ryan

[adamkiss]

I'm sorry I still don't get how this applies to PW and its in-template-its-php-file thumbnail generation. Not to be sceptic, but I can't imagine right now how tool like jCrop can be beneficial in picture->thumbnail generation.

I can see this as a tool in the administration, to edit pictures in pages... but as a tool to generate thumbnails?

[ryan]

It's true that an interactive resize isn't all that valuable when working with just an image(s) field, because the site (via your template) is going to create it's own thumbnail automatically. While the resize may not be so useful there, the cropping still is, because the site will create it's thumbnail consistent with your defined crop. This is how you ensure that the auto-generated thumbnails aren't cutting off people's heads (as an example).

But things change when you bring in TinyMCE. In that context, cropping is just as useful as the existing resize functionality already built into it. As a matter of simplicity, we'll probably set it up so that resize+crop are accessible in any context, but a copy of the original image will always be kept behind-the-scenes.

[Marty Walker]

Hi Ryan,

All that plugin does is replace the system's internally generated thumbnail with it's own. In textpattern there's an association between the full image and the thumbnail - if it exists. There's what's called an "article image" field that has an image picker (another plugin) which lets him select a thumbnail to go there. The code below (using another plugin) links the thumbnail to the original image.

So my lightbox code looked like this:

<li><a href="<txp:upm_img_full_url />" title="<txp:title />" rel="lightbox"><img src="<txp:upm_img_thumb_url />" alt="<txp:title />"></a></li>

Otherwise the ordinary textpattern tag to display a thumbail would be:

<txp:article_image thumbnail="1" />

.

@adamkiss: It's really all about having more control over what part of the image I want to show as a thumbnail. I am looking at this with artists in mind so my opinion might be skewed somewhat. Perhaps this kind of cropping option should be an optional module rather than a core feature.

Regards
Martin

Marty, thanks for making that video and posting. It was helpful to w-tch that, and I think it seems like a great jCrop implementation there. How did the thumbnails go from what you showed in the video into that grid of illustrations? Were they  tagged to appear there, or are they somehow placed with a richtext editor?

Thanks,
Ryan

[Marty Walker]

Here's an interesting idea: http://www.defusion....519/cropper.php

Perhaps as an alternative to having manual cropping built in there could be some way to hold the coordinates of the selection. Those coordinates could then be used with phpThumb: http://phpthumb.sour...mo.demo.php#x24

I have no idea if this is even possible. Smarter minds than me could figure this out though.

Regards
Marty

[apeisa]

Hmm.. This got me thinking. What we would need for API usage is not cropping, but just to set the point where to center the cropping. So if you have image of person's head, you could click between person's eyes so there wouldn't be any cropped heads.

For RTE-use I think just any working cropping tool would do, but I am not that interested about that

[Marty Walker]

Hmm.. This got me thinking. What we would need for API usage is not cropping, but just to set the point where to center the cropping. So if you have image of person's head, you could click between person's eyes so there wouldn't be any cropped heads.

For RTE-use I think just any working cropping tool would do, but I am not that interested about that

But not all crops are based on squares. How do you allow for designs that require rectangular proportions?

[apeisa]

It doesn't matter if it is square or rectangle. Rectangle has also a center point (sorry, don't know the actual terms here).

<?php
$thumb = $page->image->size(200, 100); //width: 200px, height: 100px

[Pete]

I think that for the jCrop type implementation you are giving the user the ability to set what gets cropped (which has already been said earlier) - by default it just goes of whether it hits the width or height of the original image first whereas what jCrop lets you do is select part of an image (and you can set fixed dimensions too so users are forced to drag a rectangle at 16:9 ratio for example) which then tied in better with thumbnailing on the front-end.

For now it works fine and on the site I'm building I'm very impressed with it, but with some optional jCrop functionality it would be amazing

Looking back at that, I'm just reiterating what others have said here, but fixed aspect ratio is a good thing to be able to set as well I reckon.

[Pete]

Just a quick one as I know 2.1 is nearly here - is there any chance that we can have one of the things mentioned here applied to the functionality when you're adding an uploaded image to an RTE field?

Whilst it's useful to be able to drag an image down to size to create a thumbnail, it's a bit fiddly to get it to a precise size each time. There are a few pages where I want to dot pictures throughout an article but want the thumbnails to be consistently the same width.

The solution in another CMS is having two fields where you can enter width and height, and a checkbox that's checked by default that constrains the proportions (see attached image). Can something like this be added easily enough? I think it would just make it a bit easier to use.

Attached Thumbnails

• 

[ryan]

I think that makes sense, I've added it to the list:

https://github.com/r...n/P21/issues/28

[Marty Walker]

Hi,

I have a reasonably urgent need for something similar to jCrop in ProcessWire. If anyone is capable of working on this (as a paid gig) please get in touch: martin@smd.net.au

Regards
Martin