CroppableImage

[mr-fan]

just read the whole thread - this seems to happen somethimes...check forceNew also.

was off and i've put this in my config.php

/**
 * ImageSizer options
 */
$config->imageSizerOptions = array(
	'forceNew' => true, // force create new thumbs/images
);

But no effect - even it shouts that forceNew is true.

Important hint could be that i use the imagefields with a PageTable field...but on my local Installation all works??

[mr-fan]

while testing and knocking with the head on the wall...i found that this only with single imagefield happens.

with one field with mutliple images it creates thumbs as usual...

[horst]

without looking into the code, - maybe it will work when you select the array of items as formatted return value, under FIELDS -> images -> Details -> Formatted Value. (?)

BTW, this module is in alpha state. ;-)

[mr-fan]

YOU SAVED MY LIFE TONIGHT...

works if i changed from "AUTO" to "SINGLE ELEMENT".....seems to be a issue with 2.6.19.

I know it's alpha state but it works on all my other instances and servers just this problem is caused by the dev version of PW!

Thank you again - now i can go sleep

[joey102030]

When using this module with PW 2.6.19 dev, if I uploaded an image then clicked to zoom before saving, I was getting a blank popup with the following error in the js console:

Uncaught TypeError: Cannot read property 'find' of undefined

I tracked it down to the following lines in InputfieldCroppableImage.js

        magnificOptions = {
            type: 'image',
            closeOnContentClick: true,
            closeBtnInside: true,
            image: {
                titleSrc: function (item) {
                    return item.el.find('img').attr('alt');
                }
            },

I fixed the error by editing it to match the following lines in wire/modules/Inputfield/InputfieldImage/InputfieldImage.js

        var magnificOptions = {
                type: 'image', 
                closeOnContentClick: true, 
                closeBtnInside: true,
                /*
                image: {
                        titleSrc: function(item) {
                                return item.el.find('img').attr('alt'); 
                        }
                },
                */

Horst, can you check this is correct and I haven't been a n00b?

[Pete]

Horst - any chance you could add this to the modules directory and just put (Alpha) in the title or description or something?

It's been a while since I installed it and I couldn't remember the name of it so took me a while to find

[horst]

Really? I thought we don't put alpha state modules into the directory?

Wouldn't it be better to put the URL from the forum thread and GitHub repo into the modules description, if it isn't already there?

The module is only half way ready, but most of the part what needs to be finished cannot be done by me. So, when it is in the directory, it gets more attention and, I believe, more requests for to make it fit into the UI, and let it also have all the fine new stuff that the core image field has, etc, etc. All what I can't do.

[Pete]

All of these have a "Release State" of Alpha: http://modules.processwire.com/search/?q=alpha so there are a few there already.

You're right, it would give it more attention, but isn't it at a stage where it is preferable to use this instead of the older Thumbnails module? Out of a choice of one or the other, if this fixes things that are broken in Thumbnails module I would rather use this one

I'm not sure what bits you are referring to when you say there are parts that need finishing? It seems to fit into the UI just fine from what I can see.

[videokid]

You're right, it would give it more attention, but isn't it at a stage where it is preferable to use this instead of the older Thumbnails module?

Most of the times I do ATM...

So far I'm pretty happy with it...

[horst]

 I'm not sure what bits you are referring to when you say there are parts that need finishing? It seems to fit into the UI just fine from what I can see.

There were other voices here in that thread

If you like, I can do, but I'm not sure that it is really helpful.

[Pete]

I skim-read all 6 pages - seems to be a few old bits, some bits that are maybe still issues but not sure (works for me?). A lot of issues seem to be potentially different servers whilst some are UI perhaps but it's hard to tell.

I'm easy - I've made sure I've bookmarked it now - but maybe having it in the modules directory will bring more people to help as well as more people to ask questions? I can understand your hesitation though - could be a lot of new questions!

[Peejay]

Hello, 

I have a small question: what's the best way to add a timestamp to the name of the cropped image?

[horst]

What do you mean with the timestamp? The timestamp when the variation will be created / recreated? If yes, I think this isn't possible without some extra programming logic.

CroppableImage is an API tool, that means, you have to define some (static) constants in the template files during development time, like a suffix. This is needed to detect if an imagevariation already exists or need to created on execution time. It would need an extra layer, etc.

I don't know what you want to do with the timestamp, but you know you are totally free how to create the markup for an image tag. And the timestamp is already stored in the filemtime() of the file. So, if you need the timestamp in PHP, you already have it with filemtime(), but I guess you need it on client side with javascript? Then you may read it and put it into a data-timestamp attribute of the image tag, for example:

$ts = filemtime($image->filename);
echo "<img src='{$image->url}' data-timestamp='{$ts}' />";

If that isn't helpful for you, please tell us a bit more what you are after with the timestamp.

And welcome to the forums!

[adrian]

I am not sure if this helps you or not, but CustomUploadNames (https://processwire.com/talk/topic/4865-custom-upload-names/) allows you to add a timestamp to the filename of an image using code like this:

[Y-m-d_H-i-s]

in the module's config settings.

[Peejay]

Hi Horst, thank you for your warm welcome  

My question indeed needed a little more details. I'm using processwire as an API for a backbone webapp. (artexis-app, best to view it in chrome ) 

I'm also port it to an Ipad application with Apache Cordova.

It has to work offline, so I download all the assets to the Ipad. I included an update function and it checks the file name, I want to add a timestamp the the cropped image to see if it has changed. Like: image_1447076736.-thumbnail.jpg.

I can't use the modified property of the image, because that's changed when it's downloaded on the Ipad. 

@Adrian:

Thanks for your suggestion, but I think that only applies when the image is uploaded and not the cropped image. Is that correct? 

[adrian]

Thanks for your suggestion, but I think that only applies when the image is uploaded and not the cropped image. Is that correct? 

 

 

That is basically correct, but the timestamp will also be included in the filename of the cropped version. Is it important that the timestamp is updated to match the exact time the image is actually cropped? The "Rename on Save" option might work - haven't tested.

[Peejay]

 

That is basically correct, but the timestamp will also be included in the filename of the cropped version. Is it important that the timestamp is updated to match the exact time the image is actually cropped? The "Rename on Save" option might work - haven't tested.

It isn't imported that the timestamp match the exact time, the "Rename on Save" function did the trick! Thanks a lot! 

[bernhard]

seems that pagetable got updated and now displays images in a new way:

the problem is that the id of the link is wrong (it uses the page id with the pagetable, not the item id where the actual field resides)

my quickfix was to hide the buttons via css:

table div.cropLinks {display: none;}

[doolak]

Hi there, I need to show a cropped image from another page, which is selected with a page-field.

I get the following error:

Error: Call to a member function getCrop() on a non-object 

here is the code I use:

<?php foreach ($page->selected_page as $portfolio_item) {
	echo "<article class='one-fourth'\n>";
	$image = $portfolio_item->foto->first()->getCrop('vorschau');
	echo "<a href='{$portfolio_item->url}' alt=''>\n";
	echo "<img src='{$image->url}' width='220' alt''>\n";
	echo "</a>\n";
	echo "<a href='{$portfolio_item->url}' class='project-meta'>\n";
	echo "<h5 class='title'>{$portfolio_item->title}</h5>\n"; 
	echo "<span class='categories'>Lorem ipsum dolor sit amet</span>\n";
	echo "</a>\n";
	echo "</article>\n";
}
?>			

On the portfolio page itself there is no error when showing the cropped image - anybody an idea what can be wrong?

[doolak]

Hey sorry, found the problem...

The error occured just because there where some pages without added images - everything is fine now!

[jacmaes]

Has anyone tried this module with the 3x branch?

I'm getting all sorts of errors after trying to upgrade to 3.05, such as "Exception: Method Pageimage::getThumb does not exist or is not callable in this context..." and "Error: Class 'ProcessWire\ProcessCroppableImage' not found (line 208 of /var/www/my-domain.com/site/assets/cache/FileCompiler/site/modules/CroppableImage/FieldtypeCroppableImage/FieldtypeCroppableImage.module)"

[Jason Huck]

FYI, we have observed that if the source image is a progressive JPEG, crops created by this module will always start at 0,0 (the top left corner), regardless of the position specified by the user when creating the crop. Re-exporting the source images as regular, non-progressive JPEGs allows them to be cropped correctly.

[noodles]

Has anyone tried this module with the 3x branch?

I'm getting all sorts of errors after trying to upgrade to 3.05, such as "Exception: Method Pageimage::getThumb does not exist or is not callable in this context..." and "Error: Class 'ProcessWire\ProcessCroppableImage' not found (line 208 of /var/www/my-domain.com/site/assets/cache/FileCompiler/site/modules/CroppableImage/FieldtypeCroppableImage/FieldtypeCroppableImage.module)"

Yep, sadly.

Does anyone know a fix?   I would like to use PW 3, but I need CroppableImage.

[horst]

Unfortunately not all dependency files (.php, .module) of the croppable images module are detected and compiled by the modules compiler of PW 3. I think this is already told to Ryan, but not sure. If you like, you can add an issue to the Github repo of the devns branch: https://github.com/ryancramerdesign/ProcessWire/blob/devns/wire/core/FileCompiler.php

[flydev]

Yep, sadly.

Does anyone know a fix?   I would like to use PW 3, but I need CroppableImage.

I dont know your exact needs but until the module is fixed, you might look at ProcessCropImage which is working with PW3. You will not get all the enhancement of CroppableImage but can be a good start or I am dumb ?