Release: Thumbnails

[iNoize]

No, not at the moment at least.

Hmm, haven't thought about that. I just glanced the code and it shouldn't be much to get that working. I actually wonder why it doesn't - maybe the added cropping link is messing things or some init() is missing. Does it throw any errors on js console?

I tried the solfe this problem by myself and it works for me. 

Maybe i forgot something but Im sure that this is an nice and useful little update for your module.

so I changed two files 

/site/modules/FieldtypeCropImage/InputfieldCropImage/InputfieldCropImage.js

$(document).ready(function() {

	$("a.crop").live("hover", function(e) {
		if( e.type === 'mouseover' || e.type === 'mouseenter') {
			url = $(this).data('thumburl') + "?timestamp=" + new Date().getTime();
			$(this).append("<img style='position: absolute; z-index: 999;' src="+url+" />");
		}
		else {
			$(this).find("img").remove();
		}
	});

// Grid Configurations 
function setGridMode($parent) {
		$parent.find("i.fa-th").replaceWith($("<i class='fa fa-list'></i>")); 
		$parent.find(".InputfieldFileLink").each(function() {
			var $a = $(this);
			var $img = $a.children("img"); 
			$a.css('background', '#000 url(' + $img.attr('src') + ') center center no-repeat'); 
			if($img.width() > 99 && $img.height() > 99) $a.css('background-size', 'cover'); 
		}); 
		$parent.addClass('InputfieldImageGrid'); 
	}

	function unsetGridMode($parent) {
		$parent.removeClass('InputfieldImageGrid'); 
		$parent.find(".InputfieldFileLink").css('background', 'none'); 
		$parent.find("i.fa-list").replaceWith($("<i class='fa fa-th'></i>")); 
	}

	var $listToggle = $("<a class='InputfieldImageListToggle HideIfSingle HideIfEmpty' href='#'></a>")
		.append("<i class='fa fa-th'></i>"); 
	$(".InputfieldCropImage .InputfieldHeader").append($listToggle); 
	$(document).on('click', '.InputfieldImageListToggle', function() {
		var $parent = $(this).parents(".InputfieldCropImage"); 
		if($parent.hasClass('InputfieldImageGrid')) unsetGridMode($parent);
			else setGridMode($parent);
		return false; 
	}); 

	$(".InputfieldCropImage").find(".InputfieldImageDefaultGrid").each(function() {
		setGridMode($(this).parents(".InputfieldCropImage")); 
	}); 

	
	$(".InputfieldCropImage .InputfieldFileList").live('AjaxUploadDone', function() {
		$("a.InputfieldFileLink", $(this)).fancybox(); 

             // NEW Check for default Settings for Image View
		var $parent = $(this).parents('.InputfieldGridImage'); 
		if($parent.is(".InputfieldImageGrid")) setGridMode($parent);

	}); 
});

and 

/site/modules/FieldtypeCropImage/InputfieldCropImage/InputfieldCropImage.css

.crops {
	border-top: 0;
	overflow: hidden;
	padding: 1em;
	margin-right: 5px;
}

.crops p {
	margin: 0 0 0.5em 0;
}

.crops a {
	display: block;
	float: left;
	margin-right: 10px;
}

.crops a img {
	background: white;
	margin: 0;
	padding: 10px;
	box-shadow: 2px 2px 5px #333;
	max-width: 100%;
}

.InputfieldCropImage .InputfieldFileData {
	margin-bottom: 0;
}

/**
 * Grid mode icon fixes
 *
 */

.InputfieldCropImage .InputfieldHeader .InputfieldImageListToggle {
	float: right;
	padding-right: 1em; 
	position: relative;
}
.InputfieldStateCollapsed .InputfieldHeader .InputfieldImageListToggle {
	display: none; 
}

[maudio]

This is a brilliant plugin, and it even works on iPad when cropping *but* for some reason, you cannot click 'Crop and Go' and therefore you can't accept the crop you define. This is really unfortunate as many of my customers use iPads.

is this a known bug? Where would I report it if it isn't a known bug?

Thanks a lot, great plugin.

[daniel.s]

I'm having a problem with Thumbnails if the field is empty. If it's empty it breaks the entire code after that point:

<img src="<?php echo $page->parent->background_image->getThumb('background'); ?>" alt="<?php echo $page->parent->background_image->description; ?>">
 

Do i need to input an "If" statement for every instance or is it just broken?

[apeisa]

Just like with regular images, you need to check that image exists before outputting any img tags.

[horst]

I tried the solfe this problem by myself and it works for me. 

Maybe i forgot something but Im sure that this is an nice and useful little update for your module.

You may send a PullRequest on Github  ( https://github.com/apeisa/Thumbnails )

[maudio]

Any news on the bug affecting ipad/tablet users for the image crop button to function correctly?

Thanks.

[ilezia]

Is it possible to use this tool to crop the image and then save that image as the only image in that field?

What I would like to create is a few different image types, lets say a landscape, square and portrait.

I then want the user only to be able to upload one image per page and as it's uploaded they will have the chance to crop it to one of the above types.

As I understand it right now if I give the possibility to use any of the three image types on one page I have no way of identifying which type they would like to use?

[adrian]

I submitted a pull request for similar functionality. It copies the cropped images to a separate images field.

I put this together very early in my experience with PW and I know that antti wanted an option to opt in or out of this feature which is why he hasn't accepted it. It would be easy to modify to make it optional, but perhaps you can make use of my code anyways:

https://github.com/adrianbj/Thumbnails/commit/c3539ada4306acd7f98c667864aa5ebe1fd0a244

[Marty Walker]

Adrian,

That'd be very useful if it could be made to be a option in the settings. I've often wanted/needed to use thumbnails elsewhere.

[Shehbaz]

Hi,

First I will like to say my thanks for the module as I am using it in my solution. I needed to crop images based on their width only in some cases, I read the thread and there was a discussion of implementing it, not sure what was the conclusion but looking at code shows me that it is not implemented.

As I understand that ImageSizer's resize function can work without providing a height (or providing 0) and in this case it only considers width. Isn't it logical we remove the height condition from condition as follow,

($this->w < 1) {

throw new WireException(sprintf($this->_("Width not found for thumb: %s"), $thumb));

return;

}

and if height is 0, then $sizer->resize($this->w, $this->h) will just work fine based on width.

 

I have tested and it works fine but before I deploy it on production I need an opinion?

Thanks

[apeisa]

Sounds like safe addition. For syntax, I would suggest always using zero, like:

thumbnail,0,100

or

thumbnail,100,0

Can you make a pull request?

Oh, and welcome to the forums Shehbaz!

[Martijn Geerts]

@Shehbaz, welcome !

[Shehbaz]

Thanks @apeisa and @Martijn
 

I have sent a pull request, 

thumbnail,0,100

or

thumbnail,100,0

should work now.

Thanks

[LostKobrakai]

I have a problem, with the template-limiting function of Thumbnails. I've added the templatename of the repeater, the repeater name without "repeater_" prefix and the template of the page, with holds the repeater, but the second size isn't displayed below my images.

thumbnail,100,100
linkbox, 220, 220, home, repeater_home_linkboxes, home_linkboxes

Are there any known issues regarding this behavior?

[LostKobrakai]

I've a second issue regarding the size-limiting. It seems, that system-templates aren't supported. So the sizes won't be displayed, if you use them for user-profiles.

EDIT: Ok found the error. The template names need to start right after the comma, while the dimensions also work with leading spaces. Maybe a trim could be implemented to remove those spaces, as they're a illigal characters for templates, too.

[PhotoWebMax]

I had some trouble adding this Module to my specific template but with some great assistance from a PW forum member got this working just fine (so far)...

I must say that I just love this Module. Thumbnails is a gallery extra solution that I have been searching for for a long time. I am quite picky with gallery thumbnails: I like a nice tight grid of square shaped thumbs. This avoids the awkward mess that mixing landscape and portrait thumbs brings. In some of my previous CMS driven galleries I would go back in and hand edit the generated thumbs using Photoshop, one at a time, just to present the best, most honest looking thumbnail possible. 

This great Module does this within the CMS and the process is quick and effective. Brilliant coding!

Thanks to apeisa and others who worked on this project...

[peterfoeng]

Hi,

 

First I will like to say my thanks for the module as I am using it in my solution. I needed to crop images based on their width only in some cases, I read the thread and there was a discussion of implementing it, not sure what was the conclusion but looking at code shows me that it is not implemented.

 

As I understand that ImageSizer's resize function can work without providing a height (or providing 0) and in this case it only considers width. Isn't it logical we remove the height condition from condition as follow,

 

($this->w < 1) {

throw new WireException(sprintf($this->_("Width not found for thumb: %s"), $thumb));

return;

}

and if height is 0, then $sizer->resize($this->w, $this->h) will just work fine based on width.

 

I have tested and it works fine but before I deploy it on production I need an opinion?

Thanks

Haven't tested it yet but will a great addition! Thanks much

[peterfoeng]

I am playing around with this module but correct me if I am wrong, it seems that new images are always being generated everytime I see the page?
 
I download the latest module from Github but I think something is not right when it is being used with something like:
 
thumbnail,250,0
medium,550,0
 
the execution takes forever and everytime the page is being loaded, every images is being cropped all over again which I believe it should not.

---------
 

UPDATE: I am submitting a pull-request for the issue I am having Please kindly review this PR here: https://github.com/apeisa/Thumbnails/pull/22/files

Edited June 6, 2014 by peterfoeng

[thomasaull]

First of all, I have to say: this module is great! The best way to give content managers control over the cropping of images I can imagine

I was wondering, if it's possible to prohibit upscaling of images, e.g. if I upload an image with the dimensions of 300x400 and want to "crop" it to 500x500. I couldn't find any setting for that, is something like that in discussion?

[dazzyweb]

Is it possible to display the images in the admin as a grid?

I don't have any option to toggle the view in the admin.

I see that setting the Default view in in the field's input settings to "grid" doesn't work.

Was something like what creativ3minds solution included in the module?

[adrian]

Default View set to grid works here and the toggle at the top right of the field when editing a page also works just fine. There were some updates to this functionality introduced in the dev version fairly recently, but that was to do with when there was only one image. I don't think anyone has ever reported the default view not working before.

[dazzyweb]

Default View set to grid works here and the toggle at the top right of the field when editing a page also works just fine. There were some updates to this functionality introduced in the dev version fairly recently, but that was to do with when there was only one image. I don't think anyone has ever reported the default view not working before.

Adrian. Are you talking about field type image or field type CropImage?

I get the toggle if setting the field type as image but not if the field type is set as CropImage.

I just tried again on a fresh install of Processwire and still the same result.

[adrian]

Sorry - you're right - I was kinda wondering why your question was in this thread - I didn't think it would make a difference if it was an ordinary images field or a CropImage field, but it does

I am sure apeisa will get back to you shortly on this.

[Can]

Howdy people

got 2 things with thumbnails module

1. Sometimes the little hover preview is hidden

the screenshot is from Chrome, sometimes it´s working most time not, gave Firefox a chance and it worked..but tested only twice..

2. The manual cropping is doing strange things

look at the draggable, it´s showing a "copy" of the image instead of being transparent.

Next look at the preview..it´s cut..half of the image is missing..looks like I´m out of image with the overlay

In the end it´s working fine..but it´s irritating and not really nice for the later admins..they´re not really computer cracks ^^

hope I overlooked a solution

[LostKobrakai]

Adrian. Are you talking about field type image or field type CropImage?

I get the toggle if setting the field type as image but not if the field type is set as CropImage.

I just tried again on a fresh install of Processwire and still the same result.

You could only manually insert this solution, then it works.