Release: Thumbnails

[horst]

PS: It maintains the settings and also coordinates, but coordinates aren't active when re-cropping. It shows preview of different part of image, but when proceeding still (rightly) crops the old part. Probably the cropping tool JS needs some refresh...?

Hi Antti,

sorry, I have forgotten to put the JS file into the pull request. (You know, I first have to learn to get rid of that GitHub stuff  )

I have opened a new Pull request with the JS file.

[apeisa]

Horst, no worries. Just merged the new pull request and now it remembers the cropping. Superb! Thanks fellas!

[maba]

With latest updates in inputfield css overflow doesn't allow to see the thumbs..

This module or PW problem?

[horst]

@maba: I use last update too and everything is fine.

The div containing the thumb links and images is:

<div class="ui-widget-content crops">

it has overflow set to hidden.

The thumbnail images have a css z-index: 999, - maybe some other settings have overwritten something?

You run any admin theme? Any other admin modules installed?

Edited September 9, 2013 by horst

[maba]

Yes, you're right.

Run default admin theme but the problem can be

overflow-y: auto; 
overflow-x: hidden; 

in wire/templates-admin/styles/inputfields.css due to new Inputfield Dependencies.

[Soma]

overflow: hidden, will hide any content overlapping container, z-index: 999 doesn't solve this.

I had various discussion about this particular issue with no float clearing happening on container in PW since a long time. Recently we had more discussion going due to others mentioning this. 

Looks like Ryan now implemented the wrong solution, although I mentioned it in a conversation. But I still have a hard time explaining Ryan the issue as he doesn't seem to know or recognize it.

This again is a clear case where adding overflow hidden is bad.

[diogo]

Overflow hidden doesn't seem to be necessary at all here. Is it?

[apeisa]

nope, clearfix would be better.

[diogo]

Or overflow:auto

[Soma]

And have lots of scrollbars? No pleas not!

[diogo]

Hm, I guess the horizontal scrollbar appears because of the borders from the input fields. There is one way of correcting the box-model that I actually enjoy using, especially for working with percentages http://www.paulirish.com/2012/box-sizing-border-box-ftw/

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

That small snippet in the top of main.css would fix the problem, and allow to use overflow:auto

[Jeroen Diderik]

Is anyone exeriencing (or has experienced) PNG's with transparency getting a black background when manually creating a crop?

When nothing is done, the thumbnails that get created are fine, but when I need to adjust the crop of a cropImage, the background goes black (where it should be transparent).

Using the latest code (1.0.3)

[Jeroen Diderik]

Actually found the part of code that misses the imagealphablending and imagesavealpha.

Submitted a pull request

[horst]

How do you adjust the crop? Can you provide code example?

EDIT:

Have not seen your second post when (sloooowly) writing this on mobile,

Great you already have solved it!

Edited September 25, 2013 by horst

[Jeroen Diderik]

When clicking on the thumbnail name (link) underneath the cropImage field when editing a page.

I'm actually not referring to cropping in code, but through the interface as an end-user.

[Raymond Geerts]

How can i disable sharpening completely? When using this module on PNG images with 24 bit transparency i get strange noise, in the form of black lines or dots) around the edges.

Is it possible to pass somekind of $options array as with the normal image field?

ps. I already applied "jdiderik" his fix for alpha transparency, to get rid of the black background.

[Martijn Geerts]

Something like this ? 

$saved = $config->imageSizerOptions;
$config->imageSizerOptions = array(
	'sharpening' => 'none', // sharpening: none | soft | medium | strong
	);

$thumb = $page->image->width('100');

$config->imageSizerOptions = $saved;

[Raymond Geerts]

@Martijn: That would probably work if the thumbnail was made at the template level.

But i just noticed that the thumbnail image is made in the backend. So passing any config settings in the template where the image is shown has no effect what so ever.

I have now disabled sharpening by setting it to none in the config.php file. (which means if i want to use it on any image i have to pass it in a $options array.

[Martijn Geerts]

Is it possible to hook before ImageSizer::resize

And then call setSharpening('none') ?

ImageSizer.php is located at /wire/core/

[horst]

How can i disable sharpening completely? When using this module on PNG images with 24 bit transparency i get strange noise, in the form of black lines or dots) around the edges.

 Is it possible to pass somekind of $options array as with the normal image field?

ps. I already applied "jdiderik" his fix for alpha transparency, to get rid of the black background.

@Raymond: 1) As a first workaround you may install PiM too, and set $config->imageManipulatorOptions sharpening to none. That way you can leave $config->imageSizerOptions as is, while all CropImages should be handled by PiM (the automaticly created) and with the manual created you need to select none in the dropdown-list.

2) can you send me or upload an example of this black lines/dots noises?

There is a BUG in GD-Lib with Alpha-Transparency in PNG. It isn't recognized by some functions.

[Raymond Geerts]

Horst, thanks for that tip. I have installed PiM and see i can configure it for the FieldtypeCropImage and by that turn off sharpening specificly for the field, instead of globaly in the config.php file.

I have attached an image which contains 5 thumbnails created with soft sharpening from several 24bit transparent PNG files.

There you can see they all have somekind of black lines or dots on the left side of the image that occured while generating the thumbnails.

[Martijn Geerts]

@Raymond: Edit your post (the one above mine), click full editor (or something) then a under the textarea there's an upload function.

[Raymond Geerts]

@Horst I have updated my previous post and added an image containing 5 thumbnails with the PNG transparency issue.

[horst]

@Horst I have updated my previous post and added an image containing 5 thumbnails with the PNG transparency issue.

Uah, - ugly! The thumbs are a bit small, but as I can see everyone has:

• one black pix at the top left
• a black line at the left
• and (not totally sure) some black dots around the people

Could it be that there wasn't a 100% transparency at this images parts?

[ceberlin]

Hi the 103 version has a glitch with the version code?

I use ModuleManager to update it from 102 but the update alert never goes away.