Jump to content


Photo

Image additions


  • Please log in to reply
74 replies to this topic

#61 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6572

  • LocationAtlanta, GA

Posted 12 November 2011 - 08:02 AM

Nice work Antti! Just tried it out and all seemed to work well, and I love having this capability! It did take me a couple minutes to understand how it works from the cropping side. For instance, I wasn't sure why the pixels weren't locked when selecting a crop area. But then realized it'll let me crop and scale at the same time (cool!). I had a couple questions/comments:

1. After submitting a crop, the screen that follows just says "Cropped Image: 1" rather than a look at the crop. I'm assuming that's because it's a work in progress, but just wanted to mention it in case I was getting a debug message or something. Though it does appear that the crop did work.

2. Is there any way to get back to the crop? If I click the "thumbnail" link again, I'm starting a new crop rather than seeing the existing one.

3. When making a crop, the crop appears on the left and the large image on the right. I was making a crop of 400px wide, but could only see part of it on the left. I was wondering if maybe the crop should appear below the large (rather than next to it), as I'm thinking I just ran out of screen width?

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


You can add a new function to any other core class or module, just by adding a hook for a function that isn't already there. I would suggest removing the function from Pageimage.php and instead adding it to your FieldtypeCropImage class. I just tested this exact code below and it works exactly the same as if getThumb() was in Pageimage:

<?php
class FieldtypeCropImage extends FieldtypeImage {

        public static function getModuleInfo() {
                return array(
                        'title' => 'Crop Images',
                        'version' => 100,
                        'summary' => 'Field that stores one or more GIF, JPG, or PNG images',
                        );
        }

        public function init() {
                $this->addHook('Pageimage::getThumb', $this, 'getThumb');  
        }

        public function getThumb(HookEvent $event) {
                $thumb = $event->arguments[0]; 
                $prefix = $this->sanitizer->name($thumb);
                $img = $event->object;
                $imgPath = $img->pagefiles->path . $prefix . "_" . $img->basename;
                $imgUrl = $img->pagefiles->url . $prefix . "_" . $img->basename;
                if(is_file($imgPath)) {
                        $event->return = $imgUrl;
                } else {
                        $event->return = false;
                }
        }
}

So the above adds a getThumb() function to the Pageimage class without you having to hack the core to add it. :) The behavior of it from the API side is identical, so you don't have to change anything else.

Great work with this new fieldtype! I look forward to using it.



#62 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 12 November 2011 - 09:11 AM

1. After submitting a crop, the screen that follows just says "Cropped Image: 1" rather than a look at the crop. I'm assuming that's because it's a work in progress, but just wanted to mention it in case I was getting a debug message or something. Though it does appear that the crop did work.


Yep - that is wip-stuff. I am thinking of showing cropped result + two actions: re-crop or close modal.

2. Is there any way to get back to the crop? If I click the "thumbnail" link again, I'm starting a new crop rather than seeing the existing one.


Currently no. But if you crop again, it will rewrite your existing crop image. I don't save any details about cropping on db, it's only a file. Though I could save those values to image name also and read from there - but I think there is not much value to get back to old crop instead of re-cropping? Or how do you guys think?

3. When making a crop, the crop appears on the left and the large image on the right. I was making a crop of 400px wide, but could only see part of it on the left. I was wondering if maybe the crop should appear below the large (rather than next to it), as I'm thinking I just ran out of screen width?


Yep, that was very quickly done UI there. I have probably hard coded the width of the left panel. It is kind a problematic in all situations, if you have
very large images. I'll probably show the preview under the image.

You can add a new function to any other core class or module, just by adding a hook for a function that isn't already there. I would suggest removing the function from Pageimage.php and instead adding it to your FieldtypeCropImage class. I just tested this exact code below and it works exactly the same as if getThumb() was in Pageimage:


Thanks for this, again great example how easily extendable PW is! I will update my module soon to have this and other tiny fixes.

Thanks for testing Ryan. Others, here is quick screencast about this module: http://screencast.com/t/me9CSapXF

#63 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6572

  • LocationAtlanta, GA

Posted 12 November 2011 - 10:07 AM

Currently no. But if you crop again, it will rewrite your existing crop image. I don't save any details about cropping on db, it's only a file. Though I could save those values to image name also and read from there - but I think there is not much value to get back to old crop instead of re-cropping? Or how do you guys think?


While it would be nice to have it remember the crop, I agree it's something that isn't technically necessary and probably not a real time saver. But maybe just a nice feature to add in version 2.0 or something. And then in version 3.0, you could add little overlays to the main image to show where the crops are... I'm kidding, but this is just fun stuff to think about. :)

Instead, I think the most value would be in just being able to see the existing crop from the admin without having to go view the page. For example:

  • Display it in the image list below the large image with the existing "thumbnail" label/link above or below it.
  • Or just a simple link to see it, like: "thumbnail: view / change".
  • Or show the crop in the crop editor with the label "your current crop".

It is kind a problematic in all situations, if you have very large images. I'll probably show the preview under the image.


Could the large images be scaled to the width of the window, or would that break jCrop's ability to track the pixels of the image? I'm guessing it would break jCrop, but just curious.

Thanks for posting the screencast too!


#64 Soma

Soma

    Hero Member

  • Moderators
  • 5,055 posts
  • 3821

  • LocationSH, Switzerland

Posted 12 November 2011 - 11:40 AM

Great work on this module so far.

I implemented the function like ryan suggested and it works great. I used this jQ plugin also in some project and it's a nice one.

I agree with the feedback Ryan gave already. But since it's a WIP it's hard to give suggestions to current version since I don't know what's planned. Also since there's already many posts and I don't have the time to read and valuate all, aswell there's so many things and ways, options that it could need/have. I think it's a nice image extension for galleries, as I think using it for regular content (wysiwyg) images it's not suited.

Just thinking loud, it need more love in the UI and having previews of the croped versions would be nice. But I think you already know that. :)

Remembering the thumbs would be nice as if you edit/change an already edited it would be nice to start with the area already selected.

Also autocrop was something that poped up in my mind imediately after trying. Would be nice feature like default croped image.

Issues:
Not sure if you are aware that when I upload (drag) it doesn't get shown, it stops for me by 100%.
When I upload with dialog it works, but it doesn't invoke fancybox preview and crop fancybox function... so only after reloading page they work again.

Some notice shown when debug on:

Notice: Undefined offset: 1 in /Applications/XAMPP/xamppfiles/htdocs/pw2.ch/site/modules/pwCrop/InputfieldCropImage/InputfieldCropImage.module on line 79

Notice: Undefined offset: 2 in /Applications/XAMPP/xamppfiles/htdocs/pw2.ch/site/modules/pwCrop/InputfieldCropImage/InputfieldCropImage.module on line 79

Notice: Undefined offset: 1 in /Applications/XAMPP/xamppfiles/htdocs/pw2.ch/site/modules/pwCrop/InputfieldCropImage/InputfieldCropImage.module on line 79

Notice: Undefined offset: 2 in /Applications/XAMPP/xamppfiles/htdocs/pw2.ch/site/modules/pwCrop/InputfieldCropImage/InputfieldCropImage.module on line 79



@somartist | modules created | support me, flattr my work flattr.com


#65 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 12 November 2011 - 03:57 PM

Thanks guys for the great feedback. When I posted this I was little bit hesitant since I think it is little bit too rough from the edges to be posted, but I have got very valuable feedback. Since this is something where I don't have urgent need myself - I also don't have very strong opinions how it should function.

I will make this more polished and version 1.0 soon, which will include these features:

  • When you click thumbnail -link, it will open modal which shows that thumbnail. There is link to re-crop or possibility to close modal.
  • It will autogenerate thumbnails, using default PW-method: center and no zooming
  • Cleaner UI for cropping and after cropping it goes back to first view (shows cropped image and possibility to re-crop)
  • I clean code and add some error handling. Also might hook to ImageSizer class to add Crop-method there

Soma: yes, this is only for template usage. You cannot even use this on wysiwyg-editors. I couldn't reproduce the drag & drop problem, so it must be something else on your install that is causing that. Those notices indicate that you have something strange on your crop setups - but I will add better error handling there.

#66 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 12 November 2011 - 06:42 PM

I get these error messages when I use that hook:

Notice: Trying to get property of non-object in C:\apache\htdocs\discussions\site\modules\FieldtypeCropImage.module on line 20

Notice: Trying to get property of non-object in C:\apache\htdocs\discussions\site\modules\FieldtypeCropImage.module on line 21

Does it require uninstall/install to make it work? I have changed few aspects of my code, but not the template side of it. Also - using core hack it does work.

#67 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6572

  • LocationAtlanta, GA

Posted 12 November 2011 - 10:51 PM

Does it require uninstall/install to make it work? I have changed few aspects of my code, but not the template side of it. Also - using core hack it does work.


Can you post what's on lines 20 and 21? Or just post the entire code of the function you are using. I'd tested it out here and all worked well. The error message you posted sounds like $img->pagefiles isn't recognized (that's my best guess). Access to that property was added in a Nov 1st commit (less than 2 weeks ago), so you might want to double check the the system you are testing on has a relatively recent version, just in case.

#68 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 13 November 2011 - 01:52 PM

Yep, that was it (I was running the one where you added ::ready for modules). Thanks Ryan!

#69 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 14 November 2011 - 03:35 PM

Small problem (again):

How do I get my inputfield setting value? I have this code in my fiedtype:

$this->modules->get('InputfieldCropImage')->get('crops');

But it returns always the default value I have set in my InputfieldCropImage class Init:

	public function init() {
		parent::init();
		$this->set('crops', 'thumbnail,200,200'); 
	}

Saving and editing that value works in admin and also when I read $this->crops in my inputfield, it get's modified values. But outside inputfield (on my fieldtype, to be exact) it just returns the default.

This got me thinking that if I have those crop setup settings in wrong place all together - should they be in fieldtype instead of inputfield?

#70 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6572

  • LocationAtlanta, GA

Posted 15 November 2011 - 10:26 AM

How do I get my inputfield setting value? I have this code in my fiedtype:


Whe you call $modules->get('InputfieldCropImage') it is returning an Inputfield to you without any state or connection to a field in the system. So the only config values it would have would be those that are defined with the module itself (on Modules > Inputfield  > InputfieldCropImage).

Also note that it's better to set defaults in a __construct() rather than an init() because PW populates that module configuration after __construct() and before init(). So you could be overwriting the config values PW set if you were doing it in init().

I don't have the module's code in front of me here, but if I recall, that 'crop' value was set when editing the field under Setup > Fields? If so, you could just get it from the field. So if the field was called 'images', you could get it like this:

$crops = wire('fields')->get('images')->crops;

The reason your Inputfield may have had that crops value before is because it likely had the context of a field, like 'images'. But if you don't have that context, then you can just as easily grab it from the field directly.

This got me thinking that if I have those crop setup settings in wrong place all together - should they be in fieldtype instead of inputfield?


PW stores both the Fieldtype and Inputfield context with the PW field itself, so it doesn't necessarily matter much. But in general, it's better to define any values you would need in the API with the Fieldtype rather than the Inputfield. The reason is that the Inputfield is only applicable when editing in the admin. Whereas the Fieldtype is always applicable in the API. So in your case, I think it probably is better to store them with the Fieldtype, but I wouldn't bother to switch it unless it's easy to do.

#71 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 15 November 2011 - 11:12 AM

Ah, I understand. I actually can have different thumb setups for different fields (didn't realize that first) :)

Btw, if I have this on my template file:

echo $page->fieldname->getThumb('thumbnail');

Can my getThumb-method know about fieldname? Or should I just add it as variable?

#72 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6572

  • LocationAtlanta, GA

Posted 15 November 2011 - 11:32 AM

Your getThumb method could figure out the field, but not a very direct way. It would have to go back to the owning $page and see what fields it had, and match that up to the type you are looking for. I'm thinking something like this:

<?php
foreach($img->page->fields as $field) {
    if($field->type instanceof FieldtypeCropImage) {
         // $field may be the one you want
         // unless multiple FieldtypeCropImage fields on this page 
    }    
}

If you defined your crop settings with the module itself, then it might be simpler as it would already have the crop settings available to it.

#73 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 15 November 2011 - 11:55 AM

Thanks for your time and help Ryan. I'll go now with two variables, and finish other aspects. I will clean and re-factor parts of the code.

One downside defining crops directly in fieldtype settings (or plus, depends on usage) is that you cannot define crops per field basis. I think that would make it easier on huge sites, but on most scenarios it will be unnecessary.

#74 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 15 November 2011 - 04:38 PM

Ok fellows, I cleaned code quite a bit and it's not that bad anymore. I pushed it also into github: https://github.com/apeisa/CropImage

I need to write better readme for this, but basic usage in templates is like before:

<?php
echo $page->cropimagefield->eq(0)->getThumb('thumbnail');

And that returns url to your image. This does all the magic I wanted it to do:

  • If there isn't cropped image, it crops one for you (using default center cropping)
  • If you change your crop width and/or height, it recrops images - so your image is always on right size
  • There is little preview when you hover over crop link

I got few items on todo list, and one for those is to provide nicer UI (at least for links and preview).

Happy testing and all feedback is most welcome!

#75 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 15 November 2011 - 04:48 PM

I think this topic is done. Feel free to open new topic if you have need or idea how to make images better in PW. Topic for CropImage-module can be found from here: http://processwire.c...05.msg5343.html




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users