[TV-Input-Type] ImagePlus

49 Posts

AlanPich Reply #1, 12 years, 3 months ago

I have recently developed a custom tv input type for use in a recent news site being developed for a client. The aim is to speed up article deployment by offering an easy way to crop/resize images for use in the layout.

Quite often i find myself spending time producing several versions of an image to use as a header/sidebar/thumb/rollover/etc. PhpThumbOf does a good job of quickly creating thumbnails, but has to be hard-coded for crop areas and if left to its own devices often crops peoples heads off.

Usage as follows:

Create a new TV with input type 'imageplus'
Set TV options for image width & height
In resource/TVs pick your source image from the file browser
Click the 'Edit Image' button to launch the crop window & select your crop area
Use the tv tag in your template to output the url of your cropped image

This package has been submitted to the extras repository and is awaiting moderation (apologies if this was premature) but for the time being it is available on https://github.com/alanpich/Image-Plus.

I would gladly welcome any feedback, comments, suggestions or hatemail about this package, so please do get in touch.

81 Posts

MokoJumbie Reply #2, 12 years, 2 months ago

I'm looking forward to trying this out but the input field is not showing up beneath the TV title on the Resource editing Panel. I tried this on a fresh install on my local MAMP stack as well as on a LAMP-based shared host (Dreamhost). I'll file a bug on GitHub.

I am sure you have a lot of features in mind for implementation once it's out of beta. Here are some suggestions I have:
-support constraining of min and max width and height. minimum constraints would be most important to prevent ugly upscaling of images.
-support use of no dimensional constraints, aspect-ratio constraints, and pixel dimensional constraints as you currently have

It looks like jCrop supports these options, and I'd guess whichever ExtJs cropper you decide to replace it with would probably support them too.

49 Posts

AlanPich Reply #3, 12 years, 2 months ago

Hah... not a great start then. Cheers for the feedback Moko, could you possibly show me the (presumably) javascript errors that are firing on your site so I can narrow it down?

Currently the minimum size is limited to the source image size so that there wont be any upscaling of images, but I like the idea of making aspect-ratio limitations optional.

81 Posts

MokoJumbie Reply #4, 12 years, 2 months ago

The error was:

bits[1] is undefined

var vars = bits[1].split('&');

on ImagePlus.js (line 78)

i changed it to

var vars = bits[0].split('&');

and the TV input shows up, but I really couldn't explore further. I am pretty sure that's not an actual fix.

As for the scaling, I'm not sure I get you. Do you mean to say that, given a source image of 500x500px the minimum marquee size would be 500x500px? Or are you talking about the max marquee size?

To clarify what I meant, if the target image is to be 100x100px, then given a source image of 500x500px, the marquee could be anywhere from 500x500px to 100x100px, but no smaller.

I am sure that I can make more pointed comments when I see it working in its current state. Until then, it's all a bit abstract. :O

49 Posts

AlanPich Reply #5, 12 years, 2 months ago

Hmm... that sounds like an older bug caused when it tries to parse an empty input string (i.e. it will work once the TV has a value, not that that helps!) I thought i'd fixed that. Should be a relatively quick one, i'll take a look over the weekend.

As for the crop limits, given a source image 500x500 and target size 100x100, then cropping would be limited to a minimum of 100x100 to prevent upscaling, but will allow larger crops (of same aspect-ratio) to allow scaling the image down (i.e. if you crop a 200x200 area of the source, this area will be used, but still scaled down to the target 100x100)

49 Posts

AlanPich Reply #6, 12 years, 2 months ago

As a quick fix, it would probably work if you inserted

if(bits[0]==null){return;};

just before the split call

var vars = bits[0].split('&');

81 Posts

MokoJumbie Reply #7, 12 years, 2 months ago

Gotcha on the cropping. Yeah, that's what I figured. I was unclear on your original description. No worries.

The fix didn't seem to work for me. I get the same error. No hassle, but I'll look out for your update when you get around to it.

I should also mention, though, that I had another error in the console It was produced after I added a second imageplus TV on the page. Now the first TV has a value, but the second is empty. This is the handler script which gets output to the manager page source:

Ext.onReady(function(){
IP2 = new ImagePlus(2);
IP2.set({
targetWidth: ,
targetHeight: ,
siteUrl: 'http://cmstest.local:8888/modx/',
preview: document.getElementById('imagepluspreview2'),
tvInput: document.getElementById('tv2'),
});
ImagePlusReady2();
console.log(IP2);
});

The targetWidth and targetHeight have no values. Maybe this is just a symptom of the first bug, but I figured I'd record it here.

49 Posts

AlanPich Reply #8, 12 years, 2 months ago

Have you populated the input options fields on the TV in the manager?

81 Posts

MokoJumbie Reply #9, 12 years, 2 months ago

Not in the case of the second TV.

But even so, shouldn't the lines read:

targetWidth: '',
targetHeight: '',

In any case, not a critical error. Just thought I'd point it out in case it was indicative of another issue.

49 Posts

AlanPich Reply #10, 12 years, 2 months ago

Sounds like a safe fallback... The values are passed through as integers rather than strings at the moment. Strings would be safer though.
Set the values and it should run for you