Image resizing

Image resizing, a forum discussion on Jojo CMS. Join us for more discussions on Image resizing on our Suggestions & Feedback forum.

Back to Forum Index : Back to Suggestions & Feedback   RSS
Rick Rick

24 Mar 2011
Posts: 336

I'm looking to as the ability to choose where the images are cropped. Eg top, bottom, left, right, top left etc. Giving you the ability to crop am image but keep the to etc, useful for screen shots.

I was thinking of t, r, b, l our combinations there-of, eg t300x200. But this conflicts with the "fit" function.

I'm thinking use the letters at the end to avoid conflict, eg fit300x200t, s150bl etc. This keeps it readable and less confusing but moves away from the current standard of having most "options" at the start of the string.

I'm open to feedback on what's easiest for everyone.

Rick
tom

Developer

tom

24 Mar 2011
Posts: 379

at the end makes sense to me - especially if it can be used in combo with the existing pre otions
Harvey

Core Developer

Harvey

24 Mar 2011
Posts: 327

Keep in mind that it's only the "300x200" format which are actually cropped - if you specify "w200" or "fit300x200" it doesn't crop, it just resizes.

I have given some thought to this idea in the past - and my conclusing was that top-cropping isn't much more helpful than center cropping in most cases. Generally cropping issues arise from the script being dumb and blindly cropping in the same place regardless of image content.

In my mind, the proper solution is to provide a UI for the user to pinpoint the 'center of focus' in the image, and save that X,Y coordinate somewhere. Then whenever that image is cropped, it's done so that the pixels furtherest away from the focal centre are cropped off.

So scroll to the bottom of this post and let's use the top-right example (depicting a handsome individual standing on a hill) for the purposes of discussion. At the moment, any cropping script is likely to get it wrong as the subject isn't in the middle (unless the cropping script is uber-awesome and uses facial recognition etc).

The user needs to mark the image with a spot (Example bottom left) showing where the subject or focal point is.

When cropping is done (Examples top-left and bottom-right) the cropping script discards pixels furtherest away from the focal point.

So the question is really where to store the focal point data?

There are a few options. In the exif tag (if that's practical, I don't know). In a database table, although that presents issues if the file moves. Or perhaps Jojo renames the image file itself to incorporate cropping instructions.

Eg handsome-fella.crop-30-80.jpg

The "30-80" means the focal point is 30% along the X axis and 80% down the Y axis. I would probably want to present the image to the browser as handsome-fella.jpg and use mod_rewrite and regex trickery to look for filenames with the crop data attached. This way the user could update the focal point later on without breaking links to the file.
So the browser would request images/300x300/handsome-fella.jpg - The Jojo image script would look in the various places where image live for handsome-fella.jpg or handsome-fella.crop([\d]+)-([\d]+).jpg as a regex match. If it finds a regex match, the returned information is used for the crop calculations.

Anyway - the above is a bit complicated, which is why I haven't done it yet. But seeing as we are talking about cropping, that was my master plan.
Rick Rick

24 Mar 2011
Posts: 336

Cool, I've written up the ability to grab the top, left, bottom or right of the image when using either 800x600 or s800 formats.

I like your ideas of basing it round a focal point, gives a more flexibility. PivotX provides a GUI for cropping (standard crop interface) images when inserting them, and I've looked into that before too.

I feel that having the focal point as part of the image path (same portion as the dimensions) would be best. That's where all the other image manipulation (not just resizing) occurs anyway, and it saves pushing the data somewhere else. There are bound to be flaws in this method though.

Having a image plugin for the html editor that leverages Jojo's image scaling/cropping abilities would be awesome. Making one is on my long "todo when I have time" list. I haven't even looked into this yet.
Harvey

Core Developer

Harvey

24 Mar 2011
Posts: 327

Yeah, the flaw you mention with putting the cropping information into the path, is that this is defined at the template level.

The person writing the template doesn't know what images are going to be inserted, all they know is that they need a 950x250 banner image. So somehow - the metadata needs to be attached to the image, and be applied automatically whenever cropping is done to that image.
Rick Rick

24 Mar 2011
Posts: 336

Very good point. I wrote the functionality while thinking of the portfolio on my site (wanting to use the tops of images but still be able to crop).

Meanwhile while in the meeting I was just at tonight, I realised exactly what you meant. And also while all the images in my portfolio would be set to top, the images in a gallery would need to be configured per image to focus the best parts. My idea of using the focus point in the dimensions segment of the path would fall apart when showing a gallery or any set of images using the same template. They'd all end up with the same focus point. Ideal for my initial intention, but not ideal compared to what you proposed.

What about a new image/file manager? A three pane file manager (tree/thumbs/preview+details). This could let you set or clear the focus point of the image, as well as rename/resize/move the original and show you where it's used.

Combine that with a plugin for Xinha that leverages Jojo's imaging capabilities and we should be set.

Now just to find the time to do it :(
Harvey

Core Developer

Harvey

25 Mar 2011
Posts: 327

The other thing to consider is that cropping info could be added after the image is inserted, like a housekeeping thing.

The focal point concept requires user input on every image, which is pointless if images aren't being cropped like on many sites, or if it's just the header banner images or a particular gallery being cropped.

It might be cool to setup an admin page which looks in the cache for images that have been cropped (100x100 or s100 formats only), and gives a UI for setting the focal point on those images only. So the page would list only the images that are being cropped and haven't already had a focal point set. Store the focal point data in a DB for later use by the image resizing script, clear the cached image, and done deal. The user would need to visit this page periodically, or when they notice a particularly shonky cropping job done by Jojo.

While it's not ideal to have to visit a maintenance page as opposed to doing the focal point thing when the image is uploaded, this is a lot easier to implement and avoids the need to edit both Xinha and the Jojo file upload widget.
Rick Rick

25 Mar 2011
Posts: 336

I thought of modifying the upload field to let you pick the focal point, but didn't think about Xinha. Would be nice to have this as people upload the image but that'd mean working with the Xinha uploader too.

What if we just use jQuery to detect clicking a thumbnail (from image field or Xinha) and them throw an ajax call and a confirmation message? Should be reasonably easily modified for other wysiwyg editors.

To future proof (incase a template gets changed from v40000 to s200) do we need to allow adding a focal point to any image?
Harvey

Core Developer

Harvey

15 Jul 2011
Posts: 327

OK, so I have done an implementation of this, just committed.

This only applies presently to the images uploaded via the fileupload field type - not images in the WYSIWYG or elsewhere. However the concept can be extended to include those images as needed.

In order to use this functionality, focal points need to be set manually for each image - or more likely, just the specific images that are giving grief. From any Jojo admin screen that has an image upload field - try the following...

Select an image to upload, save, then click on the image where you want the focal point to be. You should see a square box appear. Save again. Then try viewing a cropped version of the image and see how it behaves - remember to use CTRL-F5 to get around Jojo's caching.

Cool huh?

Internally the focal point data is stored in a database - basically an x,y coordinate. The co-ordinate is set in percent, not pixels, so a value of "50,50" means the center of the image and a value of "100,100" means the bottom right corner. This makes the data more resistant to image resizing than storing pixel-based values.

The primary key of the database is the hash of the file contents, not the filename. This ensures that the focal point data is not lost when a file is renamed, or moved to a different location. If the exact same file is used in 2 places, you won't need to set the focal point for each copy. This may be a little performance heavy, reading the file and taking a hash, so this may need reviewing. I'll take advice on that.

I have included the filename in the database also, for no purpose other than making it human readable.

My next changes will to cache the contents of the database to avoid a database query on each image load - although the query only happens on cropped images that aren't being served from cache so it's not a biggie.

Realistically, this is going to be a prick of a job to build into the Xinha editor. I don't think this is a important though, as most of the cropping is done by the templates where the template specifies square cropping so images fit a certain space. I think the file upload field implementation will cover most cases, and I think should also apply to Gallery3 images and any banner image plugins which also use this system.
Rick Rick

16 Jul 2011
Posts: 336

You sir, have just made my day. And it's my birthday. I can't wait to try this out.
tom

Developer

tom

30 Jul 2011
Posts: 379

Brilliant! Intuitive and painless. - solved a major issue with a site cropping images of fashion models top and bottom to create an unfortunate focal point ..
Thanks Harvey.
Rick Rick

30 Jul 2011
Posts: 336

Oh, and thanks Harvey :D
Back to Forum Index : Back to Suggestions & Feedback   RSS
You must be logged in to post a reply



You need to Register or Log In before posting on these forums.