Release: Thumbnails

[apeisa]

https://github.com/apeisa/Thumbnails

Template usage:

echo $page->cropImages->eq(0)->getThumb('thumbnail');

Better docs coming soon.

Development sponsored by: http://stillmovingdesign.com.au/

[Soma]

Wohoooh! What have you done?

Another eastern egg?

Can't wait to try out later if I'm not fallen as sleep...

[martinluff]

Yay, nice work... Yet another practical and very useful addition. Thanks for the work on this.

[apeisa]

Just tested this on another site setup, and I have few minor bugs. It's usable, but previews won't show due js-error. I'll do quick fix for that at evening or tomorrow.

[ryan]

Nice work Antti! This is really coming together nicely.

[Soma]

I quickly tried last night, and there's still some things.

- when I have the crop image field in a tab, and upload an image the layout is messed (tabs overlap title). I can't provide more infos ATM (will make screenshot later, but I'm busy)

- I don't like the thumb links... should be better (more clear) . And is it possible to put them inside the "fieldset"?

I would like if it's something like :

thumbnail - edit"

big - edit

- when there is big images, it's impossible or very akward to use it.

- when I upload (html5) an image, I can't use preview fancybox before it's saved.

[apeisa]

Ok guys, sorry about last version - there was bug in previews that assumed your fieldname was "cropImages"...

This version is actually pretty nice. I commented the modal view out, since it was really annoying with bigger images. You really want all the possible space there. Also added timestamps for image urls in admin to prevent browser cache. It seems to help.

I have few things for the future:

• Remove thumbnails after actual image is removed
  
• Allow resizing thumbnails in your templates.
  

[ryan]

That preview looks awesome. I can't seem to get it to work here though (FF7). I'm getting a JS error "event is not defined" on this line in InputfieldCropImage.js:

if( event.type === 'mouseover' ) {

[apeisa]

Heh, I did test this on Chrome and IE9... And now that I test it on Firefox the preview fails here too. Is FF new IE?

Should be quick fix though. Thanks for finding that one Ryan!

[apeisa]

And fixed on latest commit. It was this one (again, didn't realize I wasn't using jQuery event object parameter, but native window.event): http://stackoverflow.com/questions/2974601/event-is-not-defined-in-firefox-but-ok-in-chrome-and-ie

[apeisa]

- when I have the crop image field in a tab, and upload an image the layout is messed (tabs overlap title). I can't provide more infos ATM (will make screenshot later, but I'm busy)

I didn't understand this. If this still occurs in latest version, I would really appreciate screenshot or more description about how to produce this one.

- when I upload (html5) an image, I can't use preview fancybox before it's saved.

This is fixed in latest commit, thanks for finding & reporting Soma.

[apeisa]

I found one bug. I give aspect ratio in wrong format to Jcrop, so it fails when having more complicated aspect ratios. Quick fix that I will push at the evening.

EDIT: Fixed.

[Soma]

Thanks for the update! I just trying it out and its awesome! Also the strange messing up is gone now.

Also like how you solved it with the thumb links and the preview is awesome!

I think it's an ok solution to make a popup, and it's well done I think, just the order and preview I still don't like it with big images. What if there would be no preview just the big image and the "crop" button on top left or so? After cropping we already have a preview, and it already can be edited again. I think it's hard to see there's a button on bottom hidden, just thinking.

---

Somehow the crop button is at a strange place for me, is that only my theme? (see screen)

[apeisa]

Thanks for your feedback Soma. Glad it is working! That is default position fur button. It is clumsy, specially if image and thumbnail are large (like in your example).

I have good idea for cropping UI. Description text, cropping button and thumbnail preview toggle on fixed top bar. Optional preview image on top right corner, on top of the original image (depends of course how large original image and preview thumbnail are).

I will implement this during weekend.

[Soma]

Thank you Apeisa for the infos.

I have another thing we might should look at. There seems to be problems with floats not cleared in the PW admin (default), like I do normally use clearfix class. I've experienced this while creating themes. For example also you redirects module, the buttons overlap the container (form) on bottom. I think there should be some solution to make this working better and consistent. I had to implement a clearfix over script to some containers so I can add inline/floated stuff. I sense that there we will have problem when there's modules and custom theme's that do thing differently. What is everones experience about this?

[ryan]

We can probably just use the :after trick? http://www.positioniseverything.net/easyclearing.html

[Soma]

We can probably just use the :after trick? http://www.positioniseverything.net/easyclearing.html

That's what I'm using since years. clearfix class that does all this.

A latest variation of ti is in html5 boilerplate too.

[apeisa]

I changed the name of the module from CropImage to Thumbnails. If you have used git you need to update your origin repo (or simply just clone it again from new address).

[apeisa]

I have another thing we might should look at. There seems to be problems with floats not cleared in the PW admin (default), like I do normally use clearfix class. I've experienced this while creating themes. For example also you redirects module, the buttons overlap the container (form) on bottom. I think there should be some solution to make this working better and consistent. I had to implement a clearfix over script to some containers so I can add inline/floated stuff. I sense that there we will have problem when there's modules and custom theme's that do thing differently. What is everones experience about this?

I usually go with just overflow: hidden or auto;

[apeisa]

Just pushed new UI for cropping.

[Nico Knoll]

Looks much better!

But it changes the background of the normal "edit page" page to #444...

[apeisa]

Thanks. Just made it fixed. Now it works pretty nicely even with huge images.

[apeisa]

Damn you browser cache, just realized that this will mess your edit page layout if you do hard refresh Will fix this soon. (edit: Same bug that Nico reported on his edit, didn't notice that at the time).

EDIT: Ok, should be good now. I also started working on feature which allows you to crop original image. I got it working, but I need to think it a little bit more. It should remove all thumbnails created for that image (from this module but also from templates) etc... I committed the code still, just commented out the setting for that.

[Marty Walker]

Great updates Antti. This is looking better than I ever expected.

I did notice one thing when I was playing with it today. If I change the size on a preset it 'forgets' the previously generated thumbs and just reverts to an autocrop. Is that the intended behavior?

Regards

Marty

[apeisa]

Yes. It always does default re-crop if width or height doesn't match. That makes sure that images are always desired size. I could use cropped image as base if new size is smaller, but that could result poor crops also. I don't save cropping propotions anywhere so it is not possible use those propotions and crop again from original.