Image additions

[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.com/content/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

[Adam Kiss]

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 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

[Marty Walker]

Here's an interesting idea: http://www.defusion.org.uk/demos/060519/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.sourceforge.net/demo/demo/phpThumb.demo.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.

[ryan]

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

https://github.com/ryancramerdesign/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

[apeisa]

Martin, I have had no internet access since yesterday (only this mobile 3g), but if our operator gets things working soon I might get the job done. I'll send you an email.

[ryan]

When editing an image to set a link to the larger image, it would be nice to have a box with width and height in a bit like the TinyMCE editor has by default - it's very hard to drag the image to specific size such as 160px wide whereas typing it in would be easier

@Pete–this has been added in the latest commit.

[Pete]

Hi Ryan

I've tried this but it doesn't do anything...?

I'm using Firefox 5. I type a width in the box and nothing happens. In my mind, it should be changing the width automatically (and vice-versa if you type something into the height box) to keep the proportions in-tact, and also resizing the image in the insert window, but nothing's happening. Also, if I put dimensions into those boxes and insert the image it ignores them.

I've definitely tested things more than normal this time - removed any custom admin themes so there's only the one in the latest commit so nothing's overriding it

[ryan]

Caches and modal popups can be a challenge sometimes. You may need to right click in the window and (in FF) choose: frame > reload.

[Pete]

That sorted it - thanks! I'd thought to do a CTRL F5 on the main page edit screen, but if the main screen doesn't include that particular JS file then that wouldn't get refreshed - at least I'm guessing that's what it was.

Thanks again - this is another thing you've managed to roll out just before I needed it as I'm going to be moving on to porting articles across (not that many, else I'd use an importer) and this will save a lot of time

[Pete]

Spotted an issue - if you insert a new image (as in one that's not already in the body field) and type in the first dimension it doesn't scale proportionally - just squashes the image.

If you resize it first using the resize handle and then type in the dimension it works and resizes proportionally (all without inserting the image until the end).

It seems like it's not able to work out the scale to change the other dimension accordingly until you grab and resize using the handle.

It's not a problem if the image is already in the content and you edit it later, so it only seems to be an issue with newly inserted images.

This is in FF5.

[ryan]

Pete I think we fixed this, but just wanted to make sure you aren't still experiencing this?

[Pete]

Yep - it has since been fixed and works as expected, thanks!

[apeisa]

I started working on simple cropping tool for pw (will be open sourced and sponsored by stillmovingdesign). I decided to implement new fieldtype (FieldtypeCropImage), but of course if this is solid stuff maybe we may integrate this to core image field.

New fieldtype is because I needed to add new column to db table to save cropping data. I was thinking about two other routes also: direct editing of files (which would require two fields and duplicating images) and totally independent module which would have own table where cropping data is saved.

Also this has companion module (ProcessImageEditor) which will allow cropping (and later maybe other editing also).

I had very good start but now I have few questions (surprise ).

I have now page like this: /processwire/image-editor/?filename=myimage.jpg&pages_id=1001

With those get vars I get my image url easily and allows me to handle cropping on the front end. But how about saving that cropping data back to database (I have new column "cropping" there, where I would like to save these values as JSON object): x1, y1, x2, y2, w, h.

I am having little difficulties to save just one image (and only those cropping values). What I am trying to do is something like this (in pseudo):

$img = $field_images->get('filename=myimage.jpg');
$img->cropping = $json_values;
$img->save() // or $field_images->save();

Hopely I make at least some sense here

I am using jCrop here and it looks like this will be cool tool! Thanks Martin for making this possible (and Ryan )

[ryan]

For your new Fieldtype, I'm assuming you are extending FieldtypeImage or FieldtypeFile. There are a few methods you'll want to override to provide your new cropping fields. I'm using CSV rather than JSON here just because it seems like it would take up less space in this case, and be almost as simple. Though you could also take the approach of just making each of the cropping fields individual parts of the DB schema, but I'll go with CSV for this example. 

<?php
public function getDatabaseSchema(Field $field) {

    // use the existing parent schema
    $schema = parent::getDatabaseSchema($field);

    // and add new field with CSV cropping info (x1, y1, x2, y2, w, h)
    $schema['crop'] = 'varchar(60) NOT NULL DEFAULT ''';

    return $schema;
}

// function called to convert  values from DB to Pagefile/Pageimage
public function ___wakeupValue(Page $page, Field $field, $value) {

    if($value instanceof Pagefiles) return $value;
    $pagefiles = $this->getBlankValue($page, $field);
    if(empty($value)) return $pagefiles;

    if(!is_array($value) || array_key_exists('data', $value)) $value = array($value);
    foreach($value as $v) {
        if(empty($v['data'])) continue;
        $pagefile = $this->getBlankPagefile($pagefiles, $v['data']);
        $pagefile->description = $v['description'];
        if(!empty($v['crop'])) {
            list($crop['x1'], $crop['y1'], $crop['x2'], $crop['y2'], $crop['w'], $crop['h']) = explode(',', $v['crop']);
        } else {
            $crop = array('x1' => 0, 'y1' => 0, 'x2' => 0, 'y2' => 0, 'w' => 0, 'h' => 0);
        }
        $pagefile->crop = $crop; 
        $pagefile->setTrackChanges(true);
        $pagefiles->add($pagefile);
    }

    $pagefiles->resetTrackChanges(true);
    return $pagefiles;
}

// function called to convert the pagefiles to array ready for DB storage
public function ___sleepValue(Page $page, Field $field, $value) {
    $sleepValue = array();
    if(!$value instanceof Pagefiles) return $sleepValue;
    foreach($value as $pagefile) {
        $sleepValue[] = array(
             'data' => $pagefile->basename,
             'description' => $pagefile->description,
             'crop' => implode(',', $pagefile->crop), 
        );
    }
    return $sleepValue;
}