Release: Thumbnails

[Pete]

There's an issue on the latest dev where if you switch the built-in Images field to user CropImage, it says it's not configured correctly until you set the new minimum image size parameters. As a workaround I set them to zero, but the interface suggests you can leave them blank.

Not sure if this is an issue with this module or the dev branch?

[renobird]

Hi Horst,

I'm not using PIM, is there a way to have it installed, but not show any of the options when cropping?

[adrian]

There's an issue on the latest dev where if you switch the built-in Images field to user CropImage, it says it's not configured correctly until you set the new minimum image size parameters. As a workaround I set them to zero, but the interface suggests you can leave them blank.

Not sure if this is an issue with this module or the dev branch?

Pete - do you think this is maybe related to:

https://github.com/ryancramerdesign/ProcessWire/commit/c1dd1b37e529eff4e5219d1b790275fe71771936

https://github.com/ryancramerdesign/ProcessWire/issues/582

https://github.com/ryancramerdesign/ProcessWire/issues/517

[Pete]

Ha, yep, definitely - didn't spot those!

In the case of image fields it's not until you enter the minimum dimensions that the error goes away.

[horst]

I'm not using PIM, is there a way to have it installed, but not show any of the options when cropping?

Hi Tom, unfortunately not yet without hacking. The plan is, in a new fork of the Thumbnail module, to add the (optional) permanent storage directly into Thumbnails.

If you want hide the options you can hack/edit the site/modules/Thumbnails/ProcessCropImage/ProcessCropImage2pim.css and set them as display none (#hd form label, #hd form select, #hd form button) ??

[renobird]

Hi Horst,

I may have misunderstood, but should adding that allow me to use the module on the profile template?

I installed PIM and added the config settings, but I'm still getting the error.

[horst]

Hi Horst,

I may have misunderstood, but should adding that allow me to use the module on the profile template?

I installed PIM and added the config settings, but I'm still getting the error.

Sorry Tom, I have misunderstood or haven't answered clearly. My tip was regarding this comment

I've been running an early version of this module for a while, and just haven't kept up with development — but WOW!

Nice work all, this is really great!

I don't know nothing about that error with the usage on profile pages. My tip was only to let you know that if you like the stored crop rectangle coords per session, you can use it also permanent with installing PiM and the setting in config.php.

[SadlyMistaken]

I've images of the first processwire installation in "home" page... you know what images are...

And i installed FILE MANAGER module... and i was able to see those images in the file manager...

I just installed thumbnails module, create a field cropimage called "photos_experience"... and incorporate it (the field) to a template "travel_experience".

And I uploaded an image in a page with that field.... and this template.

1) I can't see the pics with the tutorial line you give:

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

 

using:

 

echo "<img src=\"";

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

echo "\">";

2) I can't see anything in FILE MANAGER module, even the first installation pictures of home...

 I tried uninstalling thumbnail module, and then I can see the pictures again in File Manager...

Could you help me, please? I am hopeless at php yet.
 

[Peter Knight]

Small typo on the Modules page.

You can change the settings for each field in the Setup->Files->CropImageField Input tab:

Should be

You can change the settings for each field in the Setup->Fields->CropImageField Input tab:

[bernhard]

thank you apeisa for this great module!

i get the following error when clicking on the thumbnail link in an image field inside a repeater before saving the parent page!

 TemplateFile: Invalid field<pre>#0 [internal function]: ProcessCropImage->___execute() #1 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(359): call_user_func_array(Array, Array) #2 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(317): Wire->runHooks('execute', Array) #3 /var/www/vhosts/XYZ/httpdocs/wire/core/ProcessController.php(204): Wire->__call('execute', Array) #4 /var/www/vhosts/XYZ/httpdocs/wire/core/ProcessController.php(204): ProcessCropImage->execute() #5 [internal function]: ProcessController->___execute() #6 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(359): call_user_func_array(Array, Array) #7 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(317): Wire->runHooks('execute', Array) #8 /var/www/vhosts/XYZ/httpdocs/wire/core/admin.php(85): Wire->__call('execute', Array) #9 /var/www/vhosts/XYZ/httpdocs/wire/core/admin.php(85): ProcessController->execute() #10 /var/www/vhosts/XYZ/httpdocs/wire/modules/AdminTheme/AdminThemeDefault/controller.php(13): require('/var/www/vhosts...') #11 /var/www/vhosts/XYZ/httpdocs/site/templates/admin.php(15): require('/var/www/vhosts...') #12 /var/www/vhosts/XYZ/httpdocs/wire/core/TemplateFile.php(140): require('/var/www/vhosts...') #13 [internal function]: TemplateFile->___render() #14 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(359): call_user_func_array(Array, Array) #15 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(317): Wire->runHooks('render', Array) #16 /var/www/vhosts/XYZ/httpdocs/wire/modules/PageRender.module(337): Wire->__call('render', Array) #17 /var/www/vhosts/XYZ/httpdocs/wire/modules/PageRender.module(337): TemplateFile->render() #18 [internal function]: PageRender->___renderPage(Object(HookEvent)) #19 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(359): call_user_func_array(Array, Array) #20 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(317): Wire->runHooks('renderPage', Array) #21 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(381): Wire->__call('renderPage', Array) #22 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(381): PageRender->renderPage(Object(HookEvent)) #23 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(317): Wire->runHooks('render', Array) #24 /var/www/vhosts/XYZ/httpdocs/wire/modules/Process/ProcessPageView.module(171): Wire->__call('render', Array) #25 /var/www/vhosts/XYZ/httpdocs/wire/modules/Process/ProcessPageView.module(171): Page->render() #26 [internal function]: ProcessPageView->___execute(true) #27 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(359): call_user_func_array(Array, Array) #28 /var/www/vhosts/XYZ/httpdocs/wire/core/Wire.php(317): Wire->runHooks('execute', Array) #29 /var/www/vhosts/XYZ/httpdocs/index.php(208): Wire->__call('execute', Array) #30 /var/www/vhosts/XYZ/httpdocs/index.php(208): ProcessPageView->execute(true) #31 {main}</pre>

after saving everything works fine.

i can imagine cropping images in repeaters that have not been saved can be tricky, but at least it would be great if there was a helpful error message instead of the one that i get.

thanks in advance

[Torsten Baldes]

hi there!

I couldn't find any information about this in the 18 pages of this thread, so I'll ask you guys:

Is it possible to resize a cropped image with the pw-size-functions?

I have a header image (4:3, 1200*900) which is cropped with the thumbnails module to 16:9 (1200*675). for smaller screen-resolutions i just need some resized versions of the cropped image. right now i have to crop every version by hand.

i would love to use something like this

$page->header->getThumb('crop')->width(600);

Is this somehow possible?

Thanks!

[videokid]

Hi,

I think it is...

1/. go your field 'settings', in this case I'll call it 'images' --> Details

the dropdown field 'inputfield Type', change to CropImage.

2/. Tab 'input', down the page 'Thumbnail settings:

add line eg.

thumbnail_small_image,280,280

3/ 

$page->images->getThumb('thumbnail_small_image');

I think this should do the trick.

That way you can crop your images for small sreens... sometimes they need adjustment.

Grtz

[Torsten Baldes]

@videokid

thanks for your reply!

the way you suggest is the way i do it right now. these are my sizes:

small, 480,270

medium, 960,540

full, 1200,675

 

what i want is, that i just crop the largest version and then resize this cropped version proportional to smaller sizes, leaving me with only one size (full, 1200,675) to crop instead of three.

 

 

[videokid]

Aha, I see, then I suggest you read this:

http://processwire.com/api/fieldtypes/images/
Especially the topic "Resizing images", that's actually resizing on the fly.

I hope this is what you were looking for.

 - V.

[Torsten Baldes]

@videokid

thanks. i know how to resize an image in processwire.

i want to resize the cropped (via thumbnails module) version of an image.

since the thumbnails module just returns the image url, i can't use any of the native pw image api methods.

[horst]

Is it possible to resize a cropped image with the pw-size-functions?

I have a header image (4:3, 1200*900) which is cropped with the thumbnails module to 16:9 (1200*675). for smaller screen-resolutions i just need some resized versions of the cropped image. right now i have to crop every version by hand.

i would love to use something like this

$page->header->getThumb('crop')->width(600);

Is this somehow possible?

->getThumb() actually returns an url, not a pageimage object.

You may try to use the PiM for that? (with PiM you can manipulate imagefiles, not only pageimages)

But because of the lack of native PW methods, you need to use some plain PHP code:

// define some vars
$cropname = 'crop';
$width = 600;

// build the fullpath from the thumbnail url
$sourceFilename = $_SERVER['DOCUMENT_ROOT'] . $page->header->getThumb($cropname);

// build the targetfilename
$targetFilename = dirname($sourceFilename) . '/' . $cropname . '_' . $page->header->name . ".{$width}x0." . pathinfo($sourceFilename, PATHINFO_EXTENSION);

// get instance of PiM for manually usage, do the resize and save to a new file and return the targetfilename on success
$result = $wire->modules->get('PageImageManipulator')->imLoad($sourceFilename)->setTargetFilename($targetFilename)->resize($width)->pimSave();

if($result==$targetFilename) {
    // resizing and saving was successful, now we need to get the url from the diskfilename
    $url = str_replace($_SERVER['DOCUMENT_ROOT'], '', $targetFilename);
    // and can output an image to the page
    echo "<img src='{$url}' />";
}

This is written in the browser, but I think you get the clue, also it looks a bit clumpsy. But if it works, ...

Edited September 3, 2014 by horst
added link to PiM

[videokid]

Mmmm, right!

Seems I can't read anymore... I'm sorry for the confusion.

I guess you'll have to use php in this case, get the image size of the cropped image URL and resize.

Edit, or indeed use Hort's solution.

Edited September 2, 2014 by videokid

[horst]

  I guess you'll have to use php in this case, get the image size of the cropped image URL and resize.

what?

[videokid]

Well, as you wrote, getThumb() results in an url, then use php to resize...?

No?

[horst]

Well, as you wrote, getThumb() results in an url, then use php to resize...?

No?

No.

I meant: What's about "get the image size of the cropped image URL" ?   What size from what url?    But above all: why?

[videokid]

Ah... see, can't read...

The size of the cropped image URL.

You're right, since the crop image width is already known. I guess it's something which still hangs in my head

If the image size is bigger then eg 300px, then resize to a 300px thumbnail. That's what I did in a pre-processwire era...

[Torsten Baldes]

@horst

thanks! i'll try that!

[nghi]

I have a weird issue.

If i use the cropimage field within a repeater. It works fine when logged in as a superuser.

but when log into another user without superuser role. I get the following error when trying to crop an image:

Strict Standards: Only variables should be passed by reference in /app/www/sites/sandbox/site/modules/ApeisaThumbnails/ProcessCropImage/ProcessCropImage.module on line 92

•  TemplateFile: Not Editable

Do I need to register my custom role for this module to work? I'm not sure whats going on.

[renobird]

Is it possible (assuming I'm using PIM and 'thumbnailCoordsPermanent' => true) to read the the x,y of a crop?

I want to grab the top/left x,y of the first crop (in this case called 'thumb') and pass that x,y to the native PW imagesizer

Pseudo code

$x = $page->image->getThumb('thumb')->coords('x');
$y = $page->image->getThumb('thumb')->coords('y');

$large = $image->size(1840,1036,array("quality" => 25, "cropping" => "{$x},{$y}" ));

[horst]

EDIT: Attention, changed the code because have overlooked the $params variable!

Tom, you can get the information from PiM with this code:

// create 4 variables that need to be passed by reference and set them initially to 0;
$x = $y = $w = $h = 0;
// create an empty array variable named params, it is needed to pass by reference to the method
$params = array();

// now call the public static methode fileThumbnailModuleCoordsRead, what additionally to the above variables needs the pageimage and the name of your thumb, (prefix)
if (ImageManipulator::fileThumbnailModuleCoordsRead( $pageimage, $x, $y, $w, $h, $params, 'thumb') {
    // it returns true if could get permanent settings, and now you can do what you want with it
    ...
    // does this work:??
    $large = $pageimage->size($w, $h, array("quality" => 25, "cropping" => "{$x},{$y}" ));
} else {
    // to bad, no permanent settings available
    ... do you have a fallback?
}

-----

If you want to use this with PW 2.5.+, you can use a new option together with ImageSizer. It is called cropExtra and takes an array with the 4 dimensions for a crop.

You can use it like this:

$x = $y = $w = $h = 0;
$params = array();
if (ImageManipulator::fileThumbnailModuleCoordsRead( $image, $x, $y, $w, $h, $params, 'thumb') {
    $large = $image->size($w, $h, array('quality' => 25, 'cropExtra' => array($x, $y, $w +1, $h)));   // *
}

* we need the 'w +1' actually, because there is an issue with this new functionallity in ImageSizer

Edited October 14, 2014 by horst
only written in the browser! Maybe there are typos! Yeah, there was one, added $params to the code