Jump to content


Photo

Image additions


  • Please log in to reply
74 replies to this topic

#41 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 19 August 2011 - 01:22 PM

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.

#42 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 23 September 2011 - 03:32 PM

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.

#43 Pete

Pete

    Forum Admin

  • Administrators
  • 2,423 posts
  • 1455

  • LocationChester, England

Posted 24 September 2011 - 04:34 AM

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

#44 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 24 September 2011 - 06:12 AM

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

#45 Pete

Pete

    Forum Admin

  • Administrators
  • 2,423 posts
  • 1455

  • LocationChester, England

Posted 24 September 2011 - 06:36 AM

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

#46 Pete

Pete

    Forum Admin

  • Administrators
  • 2,423 posts
  • 1455

  • LocationChester, England

Posted 24 September 2011 - 08:55 AM

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.

#47 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 03 October 2011 - 08:48 AM

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

#48 Pete

Pete

    Forum Admin

  • Administrators
  • 2,423 posts
  • 1455

  • LocationChester, England

Posted 03 October 2011 - 08:57 AM

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

#49 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 04 November 2011 - 03:38 PM

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

#50 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 04 November 2011 - 04:26 PM

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



#51 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 04 November 2011 - 06:16 PM

Thanks ryan!

I actually got that part pretty well handled (well, my code was obviously messier than yours so took yours as a new starting point). Yes, I have extended FieldtypeFile here. What is causing me problems is dealing and saving individual Pagefile.

This is where I try set $img->crop value and save it.

<?php
$img = wire('pages')->get($pages_id)->{$field}->get("$filename"); // Just realized that individual files are also wirearrays, clever!
$img->crop = $crop; // Values in array, since sleepvalue expects an array
wire('pages')->get($pages_id)->save();

If I try to save the field or pagefile alone it gives me error - now when I try to save the whole page the crop value doesn't get saved.

#52 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 05 November 2011 - 08:36 AM

What error message are you getting?

If you export the structure of the field_$name table using your field, what does the structure look like? (can you paste in)?

Since you are keeping $img->crop as an array, do you have something in your sleepValue that converts it to a string (like the CSV one I mentioned) or something to keep it consistent with the format needed in the DB?

#53 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 05 November 2011 - 10:32 AM

What error message are you getting?


Not errors at all, but nothing gets saved. Actually if I try to save just the description, it fails also. But $img has right image, since I can use $img->url etc.

My field_cropimages is like this:

pages_id	int(10)
data	varchar(255)
sort	int(10)	 	 
description	text
crop	varchar(60)

And images saved through admin will have values like this:

1001   penguins.jpg   1      0,0,0,0,0,0

Now I have tried to save only description, to make sure problem isn't in how I handle the sleepvalue (currently I have your example code). Here is my current code on my processmodule executeSave:

$page = wire('pages')->get($pages_id);
$img = $page->{$field}->get("$filename");
echo $img->url; // This works
$img->description = "Why don't you save me?";  // Nope, description doesn't get saved
$page->title = "New page title"; // This also get saved
$page->save(); // No errors at all, using debug mode


#54 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 05 November 2011 - 03:15 PM

Can you try adding this right before your save? I'm wondering if this makes it save:
$page->trackChange($field); // where $field is the name of the field, 'images' or whatever it is


#55 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 06 November 2011 - 06:28 AM

Yep, that works!

Does it mean here is bug or something strange - or is it required to use that in some scenarios?

#56 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 06 November 2011 - 05:13 PM

Ok, I have made good progress here. And as always, when you start implementing something simple, you want something more.

So instead of single cropping value, I want ahead and implemented the way that you can add multiple dimensions. Now you can set in your image field's input tab all the different cropping settings you want (currently in csv), like this:

Tiny thumb,60,60
Bigger thumb,200,200
Portrait image,150,200

That gives you corresponding links in your edit page view. Clicking that tilte (ie. "Portrait image") gives you this view in modal, so it is very easy to get just the right cropping. This is also what I have implemented so far.

But now that I allow multiple croppings, I am considering the implementation. Instead of saving cropping values in db and do cropping on runtime (if not done before), wouldn't it be easier to just do cropping as is, and save the image with cropped suffix. So if my image file is image.jpg, and then I crop it, it would be saved like this: image.portrait-image.jpg

And in templates usage would be something like this:

<?php
$images = $page->images;
$portrait = $images->eq(0)->getCrop('Portrait image');
echo "<img src='$portrait->url' />";

If there isn't required file (image.portrait-image.jpg in this case), it will create one using pw's default cropping (center).

Just got this idea, but I think that is much simpler solution than the one I was heading to... What do you guys think?

#57 martinluff

martinluff

    Full Member

  • Members
  • PipPipPip
  • 79 posts
  • 2

  • LocationChristchurch NZ

Posted 06 November 2011 - 06:05 PM

Sounds logical to me (+ cool and in spirit of PW's logical simplicity and human-readable coding). You're just a factory for good stuff eh!

#58 Pete

Pete

    Forum Admin

  • Administrators
  • 2,423 posts
  • 1455

  • LocationChester, England

Posted 07 November 2011 - 02:40 AM

Just a thought - but the next step might be image tagging like FB? Not sure that falls under the remit of a separate module but I can think of lots of places where that might be useful, though I appreciate that a lot of the time it won't be.

#59 ryan

ryan

    Reiska

  • Administrators
  • 7,810 posts
  • 6603

  • LocationAtlanta, GA

Posted 07 November 2011 - 10:03 AM

Does it mean here is bug or something strange - or is it required to use that in some scenarios?


It sounds like a bug, but it's actually just something that's not automated in the system (and I'd forgotten that it wasn't). A page checks for changes when something is set or added to the page itself. But a property down two levels of objects is not something a Page knows internally to check (and it wouldn't make sense for it to). So that object has to instead notify the page, or at least its parent object, that something has changed. So it's something that I think I can automate, but it's one of those things I'd want to do a lot of testing with to make sure I'm not screwing up anything else. So in the short term, I would suggest continuing to use the $page->trackChange method to let the page know about the change. In the future when this is built in, it won't be necessary, but also won't hurt anything to keep it there.

The reason this isn't an issue with PageEdit (for example) is that PageEdit doubles up on change tracking by checking the Inputfields themselves for changes. It basically does this: if($inputfield->isChanged()) $page->trackChange($inputfield->name);

Btw, the purpose of change tracking is so that PW can avoid the overhead of saving all fields on the page, and instead just focus resources on the fields that have actually changed.

#60 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,160 posts
  • 1711

  • LocationVihti, Finland

Posted 11 November 2011 - 06:40 PM

I got hour or so with this and got it working. I don't want anyone using this on production site yet, since this was late night coding and I haven't given any testing or cleaning. But if you guys wanna take a look, then go for it. The feedback I am interested to is that if I have nailed the most of the "thumbnail scenarios" that people have had - especially stillmovingdesign's since he was kind enough to sponsor this development.

I think there is one required feature missing and that is autogenerating thumbnails if you haven't set those yet. Also it would be nice to track the thumbnail size also - so if you change thumb setup it would generate new images.

How to install:

-Add FieldtypeCropImage.module, InputfieldCropImage and ProcessImageEditor folders to your site modules folder. Install those modules from PW admin.
-Add this method to /core/Pageimage.php file (I know this is core hack, but only now for testing - need to discuss with Ryan how to implement this).
public function getThumb($thumb) {
		$prefix = $this->sanitizer->name($thumb);
		$imgPath = $this->pagefiles->path . $prefix . "_" . $this->basename;
		$imgUrl = $this->pagefiles->url . $prefix . "_" . $this->basename;
		if (is_file($imgPath)) {
			return $imgUrl; 
		} else {
			return false;
		}
	}

-Create new field or edit current image field and choose it fieldtype as "CropImage"
-Edit field and input tab, there last setting: "crop setups". Add as many crop setups you like, here is example:
thumb,100,100
portrait,100,180

-Add field to your template and edit template file and add this:
foreach ($page->cropImages as $image) { //cropImage is your field name
	if ($image->getThumb('portrait')) { // "portrait" needs to be something from your crop setups
		echo "<img src={$image->getThumb('thumbnail')} />";
	}
}

EDIT: Tried to upload small screencast, but my Jing didn't want to co-operate with me. I'll try later again.

Attached Files






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users