Jump to content

Croppable Image 3


Recommended Posts

Thanks a lot for your reply.  This is the result:

  count: 2

The error was probably because I had never before created a new field with the fieldtyp CroppableImage3. Because I already had some images fields, I have only changed the input field type of the existing fields and not created a new one. After I had created a test field with the fieldtyp CroppableImage3, the other fields now work as desired.


  • Like 1
Link to comment
Share on other sites

On 19/10/2016 at 2:26 PM, horst said:

If you want to give the user the possibility to choose from different formats for one single place, you need a special setup with e.g. pagetable or the ProFields Repeater Matrix wrapped around the image field.

Hi Horst,

I've wrapped a repeater around my image and bullet selection (The user can thus choose which cropping to use). It works when I upload an image for the first time, it creates 4 standard croppings (panorama, portrait, etc.). However, if I make a custom cropping it doesn't save it. I'd actually want the custom cropping to overwrite other files, but that doesn't work either. 

Is there a known issue between croppable image 3 and repeaters? Should i use ProFields Repeater Matrix (haven't tried it so far). Pagetable is also a possibility, but not as intuitive and fast as a repeater.

Thanks for your help!


Link to comment
Share on other sites

I'm not aware of any issues with repeaters or repeater-matrix. (Repeater-Matrix would do no change, I believe, as it somehow extends repeater)

Custom cropping is made for which user / role. Does he have the right permission added to his role?

Link to comment
Share on other sites

23 hours ago, horst said:

I'm not aware of any issues with repeaters or repeater-matrix. (Repeater-Matrix would do no change, I believe, as it somehow extends repeater)

Custom cropping is made for which user / role. Does he have the right permission added to his role?

I tested even without the repeater and I get similar errors. So I think we can leave the repeaters out of it. Permissions are OK.

I tried to recreate the issue (can't tell yet exactly when it works and when not). 

I created 4 cropping-presets. These create the 4 croppings automatically. So far ok. When the user (whichever) creates a custom cropping, the new cropping doesn't overwrite the old one. Or I should rather say, sometimes it does, but most of the times it doesn't.

Workaround is to delete the generated croppings in the "variations" window prior to creating a custom one. This works, but it's not a nice solution for the end user.

Am I the first one reporting this bug?


Link to comment
Share on other sites

2 hours ago, lenoir said:

Am I the first one reporting this bug?

I wouldn't consider it a bug of the croppable image module, as this seems to be only at your server (setup).

Please provide the exact reproducable steps you have done, incl. installing and configuring the module. (You may try this by yourself in a test account, and if this behaves as you described, tell us the steps here, so that we will be able to reproduce it.)

What does "Permisions ar OK" mean, exactly?

Link to comment
Share on other sites

On 9/3/2016 at 7:59 PM, horst said:

Or directly use the markup srcset module from @tpr and only pass the master to it!

Just tried this and it works:

<img <?php echo $page->portfolio_images->first()->getCrop('portfolio-item')->srcset('portfolio-item'); ?> class="lazyload" alt="">

This was the first time I added CroppableImage to a project and it seems great. Some UI facelift here and there could be beneficial though :)

  • Like 3
Link to comment
Share on other sites

10 minutes ago, tpr said:

Could it be that for square image crops, only width to add, and use that for the height too?



What is the intention of the question? Lesser to write? Or something other?

Link to comment
Share on other sites

No, it should work with whatever PW accepts via installed ImageRenderingEngine-Modules.

Your Image is black. How work this image out with api rendered image variations? What is the source image type(s)? Is it with all images, regardless of type / format?

Link to comment
Share on other sites


Has anyone encountered quality issues with the croppable module? 

I know I'm very picky when it comes to image quality, but I'm getting pretty bad results and I'm wondering what i can do about it. I've tried no sharpening, sharpening soft, quality 90 and 80, but the images still look "pixelated", specially in the diagonals. 

See screenshot attached. Original left, cropping on the right.


Link to comment
Share on other sites

CroppableImages uses the core images rendering engines. So there is no special "Croppable image rendering".

Your original image left is very blurry, and the one on the right site is much to much sharpened. Please try a variation with sharpening soft or none.

  • Like 1
Link to comment
Share on other sites

2 minutes ago, horst said:

Your original image left is very blurry, and the one on the right site is much to much sharpened. Please try a variation with sharpening soft or none.

Yes, I'm aware of that. That's my issue. That's what I get with sharpening set on SOFT. 

Are the core rendering engines just not that good? 

Link to comment
Share on other sites

22 hours ago, lenoir said:

Are the core rendering engines just not that good? 

Based on my experiences with

  • several thousand images of mine,
  • several thousand images of my customers
  • and many image variations from many sites around the world (from the showcase directory),

I can say: The core rendering engines seem to do a pretty good job !  ^-^:lol::ph34r:

But that are just my experiences. ;)

  • Like 2
Link to comment
Share on other sites

Just upgraded to PW 3.043 dev and getCrop() doesn't seem to work (returns NULL). Downgraded to 3.042 and no issues.

I've downloaded a fresh copy of both PW versions so 3.043 should contain Ryan's fix too.

Anyone having the same issue?

Link to comment
Share on other sites

I'm not sure if this is the intended functionality: 

When I click to edit a crop under 'predefined Crops', the overlaid 'marquee' always reverts to the far top left of the image, even when I move it around and click 'Crop and go'.

I know the crop has saved correctly because I can hover the button and see a thumbnail appear.

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By monollonom
      (once again I was surprised to see a work of mine pop up in the newsletter, this time without even listing the module on PW modules website 😅. Thx @teppo !)
      Github: https://github.com/romaincazier/FieldtypeQRCode
      Modules directory: https://processwire.com/modules/fieldtype-qrcode/
      A simple fieldtype generating a QR Code from the public URL of the page, and more.
      Using the PHP library QR Code Generator by Kazuhiko Arase.

      In the field’s Details tab you can change between .gif or .svg formats. If you select .svg you will have the option to directly output the markup instead of a base64 image. SVG is the default.
      You can also change what is used to generate the QR code and even have several sources. The accepted sources (separated by a comma) are: httpUrl, editUrl, or the name of any text/URL/file/image field.
      If LanguageSupport is installed the compatible sources (httpUrl, text field, ...) will return as many QR codes as there are languages. Note however that when outputting on the front-end, only the languages visible to the user will be generated.
      Unformatted value
      When using $page->getUnformatted("qrcode_field") it returns an array with the following structure:
      [ [ "label" => string, // label used in the admin "qr" => string, // the qrcode image "source" => string, // the source, as defined in the configuration "text" => string // and the text used to generate the qrcode ], ... ] Formatted value
      The formatted value is an <img>/<svg> (or several right next to each other). There is no other markup.
      Should you need the same markup as in the admin you could use:
      $field = $fields->get("qrcode_field"); $field->type->markupValue($page, $field, $page->getUnformatted("qrcode_field")); But it’s a bit cumbersome, plus you need to import the FieldtypeQRCode's css/js. Best is to make your own markup using the unformatted value.
      Static QR code generator
      You can call FieldtypeQRCode::generateQRCode to generate any QR code you want. Its arguments are:
      string $text bool $svg Generate the QR code as svg instead of gif ? (default=true) bool $markup If svg, output its markup instead of a base64 ? (default=false) Hooks
      Please have a look at the source code for more details about the hookable functions.
      $wire->addHookAfter("FieldtypeQRCode::getQRText", function($event) { $page = $event->arguments("page"); $event->return = $page->title; // or could be: $event->return = "Your custom text"; }) $wire->addHookAfter("FieldtypeQRCode::generateQRCodes", function($event) { $qrcodes = $event->return; // keep everything except the QR codes generated from editUrl foreach($qrcodes as $key => &$qrcode) { if($qrcode["source"] === "editUrl") { unset($qrcodes[$key]); } } unset($qrcode); $event->return = $qrcodes; })
    • By Sebi
      AppApiFile adds the /file endpoint to the AppApi routes definition. Makes it possible to query files via the api. 
      This module relies on the base module AppApi, which must be installed before AppApiFile can do its work.
      You can access all files that are uploaded at any ProcessWire page. Call api/file/route/in/pagetree?file=test.jpg to access a page via its route in the page tree. Alternatively you can call api/file/4242?file=test.jpg (e.g.,) to access a page by its id. The module will make sure that the page is accessible by the active user.
      The GET-param "file" defines the basename of the file which you want to get.
      The following GET-params (optional) can be used to manipulate an image:
      width height maxwidth maxheight cropX cropY Use GET-Param format=base64 to receive the file in base64 format.
    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.

      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

  • Create New...