Jump to content

CroppableImage


horst

Recommended Posts

 

--------------------------------------------------------------------------------------------------------------------------------

                             for PW 3.0+ please follow this link!

--------------------------------------------------------------------------------------------------------------------------------

Croppable Image

Module for PW >= 2.5.11 and PW <= 2.7.3

Version 0.8.3 alpha


Hey, today I can announce an early (alpha) release of CroppableImage, what was forked from Anttis Thumbnails module.

Until now there was a lot of work done by owzim, Martijn Geerts and me.

We have solved the issues regarding the list from here:

  • The modules are bundled together so that you only can and have to use FieldtypeCroppableImage for install, uninstall & configure.
     
  • It uses new naming scheme that was introduced with PW 2.5.0 that supports suffixes.
     
  • The complete image rendering is delegated to the core ImageSizer, or to any optional hooked in rendering engine.
     
  • Template-settings are now fully supported, including removing variations when settings have changed.
     
  • It fully respects settings for upscaling. If upscaling is set to false, you cannot select rectangles smaller than the crop setting.
     

We implemented these enhancements:

  • The GridView now is very nice and compact, and also benefits from the lately introduced setting for $config->adminThumbOptions.
     
  • Permanent storage of the crop coordinates, quality and sharpening settings are now implemented native. No need to use PiM for this anymore.
     
  • The usage/display of the Quality and Sharpening DropDown-Selects can be globally disabled/allowed in the modules Configpage. (additionally to that a setting on a 'per field base' is planned.)

And the most wanted feature by the community: It gives back a pageimage and not the URL-string. This way you can use it like this:

// get the first image instance of crop setting 'portrait'
$image = $page->images->first()->getCrop('portrait');

You can further use every pageimage property like 'url', 'description', 'width' & 'height' with it:

// get the first image instance of crop setting 'portrait'
$image = $page->images->first()->getCrop('portrait');
echo "<img src='{$image->url}' alt='{$image->description}' />";

And you can proceed further image rendering with it:

// get the first image instance of crop setting 'portrait' and proceed a resize with imagesizer
$image = $page->images->first()->getCrop('portrait');
$thumb = $image->width(200);

// or like this:
$thumb = $page->images->first()->getCrop('portrait')->width(200);

// and if you have installed Pia, you can use it here too:
$thumb = $page->images->first()->getCrop('portrait')->crop("square=120");

The only downside with this is that when you (as the site developer) have enabled the usage of DropDown-Selects in the images editor, you do not know the values the editors have chosen for the images.

As a workaround for this you can use the getCrop() method with a second param. This is a PW selector string. It can contain as many of the known pageimage options like 'quality', 'sharpening', 'cropping', etc, as you need, but none of them is required. But required is at least one setting for 'width' or 'height':

$image = $page->images->first()->getCrop('portrait', "width=200");
$image = $page->images->first()->getCrop('portrait', "width=200, height=200, quality=80");
$image = $page->images->first()->getCrop('portrait', "height=400, sharpening=medium, quality=75");

.

.

You can get the module from GitHub: https://github.com/horst-n/CroppableImage

(Better Docs are coming soon)


Screenshots

croppable-image_screens-01.jpg

croppable-image_screens-02.jpg
croppable-image_screens-03.jpg



Related Infos

A good setting in site/config.php for the AdminThumbs are: (height=>200 and scale=>0.5 !)

 

$config->adminThumbOptions = array(
  'width' => 0,
  'height' => 200,
  'scale' => 0.5,
  'imageSizer' => array(
    'upscaling' => false,
    'cropping' => true,
    'autoRotation' => true,
    'sharpening' => 'soft',
    'quality' => 90,
    'suffix' => array(),
  )
);
Edited by horst
added link to new PW 3 version
  • Like 33
Link to comment
Share on other sites

Hey guys - I have just started using this and have a couple of issue:

Notice the way the image is transparent over the grey info bar?

post-985-0-96098200-1421094173_thumb.png

In thumbnail view, the crop button is not showing.

Also I have two croppable image fields and toggling the thumb/list view buttons on one change the view on the other - not sure if this is related to croppable image or not though.

post-985-0-94478100-1421094099_thumb.png

One more thing - might just be me, but I'd prefer to see the crop buttons just below the image - ie, above the description and tags fields.

Thanks!

Link to comment
Share on other sites

Hey @adrian, just to clarify:

1) in grid view (thumbnail view) you need to hover over the little headline (width x height), than this changes to "Edit" and you need to  click this to get into a little modal window that holds all crop buttons and all the text inputfields, for e.g. description, tags, etc. Does this not work for you? If not, what browser version you are using?

2) what admin theme are you using?

3)

One more thing - might just be me, but I'd prefer to see the crop buttons just below the image - ie, above the description and tags fields.

Is this related to the list view or the grid view, or both?

Link to comment
Share on other sites

1) in grid view (thumbnail view) you need to hover over the little headline (width x height), than this changes to "Edit" and you need to  click this to get into a little modal window that holds all crop buttons and all the text inputfields, for e.g. description, tags, etc. Does this not work for you? If not, what browser version you are using?

Good point - sorry I had seen that - I was confusing list view with thumbnails displayed vs grid/thumbnails view. I think it works as you have it, but I think things look a little ugly in list view when you don't have the field set to use thumbnails, but rather the full sized version - maybe that is why I am getting the image centered and overlapping the info bar above?

2) what admin theme are you using?

I am just using the standard default theme - PW 2.5.13

Is this related to the list view or the grid view, or both?

Probably doesn't matter in the popup for the grid view, but in the list view I think it would be more obvious for users, but not a big deal.

Link to comment
Share on other sites

Ah, I always use Thumbnails in Listview, have tried the fullsize images in Listview a while ago.

Yes, the (unhovered) titlebar is transparent and overlaps the image. Maybe we simply should make it opaque? Or do you think this few lines can be important enough to not get covered?

But anyways, I have to hand this over to @Martijn !

------

One more thing - might just be me, but I'd prefer to see the crop buttons just below the image - ie, above the description and tags fields. ( <= Related to Listview with fullsize images)

Probably doesn't matter in the popup for the grid view, but in the list view I think it would be more obvious for users, but not a big deal.

In Listview with thumbnails I like it as it is now, but in Listview with centered fullsize images it may look a bit better if the buttons are appear directly under the image and centered too, followed by the text inputfields. But I have to give this to @Martijn too :)

  • Like 1
Link to comment
Share on other sites

Or do you think this few lines can be important enough to not get covered?

I guess I don't understand why the look is different to a standard PW images field - ie opaque and not covering the image - I think it is important to see all the image.

Thanks for looking into these things Martijn!

Link to comment
Share on other sites

Notice the way the image is transparent over the grey info bar?

 

That's not a bug, it's meant to be like that. This wil result in more visual image and less UI (margin/paddings), it'll save you at least 45px height per image. Making it totally transparent can be an option, but i'm a little bit afraid text and buttons in the header will be hard to read.

 

One more thing - might just be me, but I'd prefer to see the crop buttons just below the image - ie, above the description and tags fields.

Problem is amount of crop variations, the length of the crop text (especially in European languages) and extra vertical space the crop should take due to repetitive buttons. In most cases it'll double the vertical space (I started this way), IMHO it's not an option.

  • Like 1
Link to comment
Share on other sites

@Martijn: ah, for me this makes sense: saving space with full images.

And with a lot of images so boringly showing repetitive cropnames throws away the focus from the thumbnails.

And that it is visually different from default images field is a plus.

@Martijn: have you also read that if you have two or more croppable fields on one page, toggling the viewmode (list/grid) always affects all fields?

  • Like 1
Link to comment
Share on other sites

Is there any particular feature from PHP 5.4 you are using? I think many are using Ubuntu's release cycle (5 year LTS from 2012), where there will be PHP 5.3. for two more years (of course possible to update to 14.04).

  • Like 2
Link to comment
Share on other sites

I can't remember why it was set to PHP >= 5.4.0.  (@owzim: can you remember it?)

I also have no server with PHP 5.3 at hand. Maybe you (or someone other) can edit the three *.info.json files to point to PHP>=5.3.8 and try if it runs or throws any error?

If not it will take a while for me to get ready testing this. But it is noted on my ToDo now.

Link to comment
Share on other sites

I could quickly set a shared host account via its config panel to run under PHP 5.3.28 cgi.

The CroppableImage Editor worked, - but I could not test all functions in depth. If you want use it in a none productional site with PHP < 5.4.0, simply change the values in the 3 *.info.json files

// from this
	"requires": "ProcessWire>=2.5.11, PHP>=5.4.0, FieldtypeCroppableImage>=82",

// to this
	"requires": "ProcessWire>=2.5.11, PHP>=5.3.8, FieldtypeCroppableImage>=82",
  • modules/CroppableImage/FieldtypeCroppableImage/FieldtypeCroppableImage.info.json
  • modules/CroppableImage/InputfieldCroppableImage/InputfieldCroppableImage.info.json
  • modules/CroppableImage/ProcessCroppableImage/ProcessCroppableImage.info.json
Link to comment
Share on other sites

Looks very good guys! Its very good to see that finally the cropping module gets an upgrade!

I would love to be able to add some more (very simple) text fields to the images, in the likes of http://modules.processwire.com/modules/fieldtype-image-extra/ This is something that I think the regular image fieldtype should also include, but maybe you take a lead here :)

(My reason is that right now I'm working on a very media-rich site, with artworks needing titles, descriptions, and 3 distinct handmade crops. Separate pages aren't an option because the drag&drop is so much better. I currently tackled this by splitting the description string, but that seems counter intuitive.)

Link to comment
Share on other sites

Hey,

actually there is no time, even not for thinking in depth about this request. But maybe this suites your needs better: https://processwire.com/talk/topic/8079-imagefocusarea/

Reading the description it does look like this one does not have any ratio option either though.

Nevertheless thank u very much for the tipp!  I might install it and check it out anyways.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...