Jump to content
horst

Croppable Image 3

Recommended Posts

15 hours ago, PWaddict said:

@horst I fixed the cache problem on cropping by replacing the 145 line on ProcessCroppableImage3.module with this:


'imageUrl' => $imageUrl . "?nc=" . $img->mtime,

 

I added the timestamp to the url. So I wasn't able to reproduce this issue, but cannot see any harm by adding the timestamp to the url.

If you think this should be added to the core Variations Page, please make an issue at Github.

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, tpr said:

@horst Could you add this JS fix too?

 

 

Using this js fix or not when I press "Accept Crop" and the modal closes the icon-size thumb disappears. I'm getting this error on console: Failed to load resource: the server responded with a status of 404 () testing.-thumbnailn.jpg. This issue happens only after you saved the page.

It should load the file as testing.-thumbnail.0x48n.jpg. The timestamp also must be used on that too in order to get always the last modified thumb and not the very first cached one.

Share this post


Link to post
Share on other sites
1 hour ago, PWaddict said:

It should load the file as testing.-thumbnail.0x48n.jpg

No. After you make a crop and close the modal (Accept), no 0x48 image is generated (perhaps the module should do this?). That's why I load the original thumb instead (this is fast because it's cached by the browser). On next crops I toggle the "?v=1" "?v=2" params, in my tests it was enough to bypass the browser cache.

It's hard to tell what goes wrong for you until I can duplicate the issue. Could you share your settings and workflow exactly? (PM is ok too)

  • Like 1

Share this post


Link to post
Share on other sites
56 minutes ago, tpr said:

No. After you make a crop and close the modal (Accept), no 0x48 image is generated (perhaps the module should do this?). That's why I load the original thumb instead (this is fast because it's cached by the browser). On next crops I toggle the "?v=1" "?v=2" params, in my tests it was enough to bypass the browser cache.

It's hard to tell what goes wrong for you until I can duplicate the issue. Could you share your settings and workflow exactly? (PM is ok too)

I'm currently testing it on localhost. It doesn't load the original thumb. It loads an image that doesn't exists.

Original thumb
testing.-thumbnail.jpg

Currently loads this non available image
testing.-thumbnailn.jpg

You have to modify the js code to remove the cropping values too. I'm using cropping = north. That's why the "n".

Share this post


Link to post
Share on other sites

@tpr if this is right, (I haven't tested it), we would need something that works with all possible variation names. On weekend I can setup a test system, (also online), and check all combinations. (and give you access to it if you like).

Share this post


Link to post
Share on other sites

Yes, crop orientation is the culprit (added via $config->imageSizerOptions array, at least that's how I could see it).

I've made the fixes here, please try:

https://github.com/rolandtoth/CroppableImage3

This should be a generic fix, I pass the image url from the crop review modal to the js. Additionally, only the current preview btn image is refreshed and not all (unlike before).

  • Like 2

Share this post


Link to post
Share on other sites
46 minutes ago, tpr said:

Yes, crop orientation is the culprit (added via $config->imageSizerOptions array, at least that's how I could see it).

I've made the fixes here, please try:

https://github.com/rolandtoth/CroppableImage3

This should be a generic fix, I pass the image url from the crop review modal to the js. Additionally, only the current preview btn image is refreshed and not all (unlike before).

Works great. One small fix from me. After saving the page or revisiting it I'm seeing a previous cached icon-size thumb. This happening even on localhost. So, I fixed it by replacing the 155 line on InputfieldCroppableImage3.module with this:

$out .= $warning ? '' : " <img src='{$pagefile->getCrop($suffix)->height(48)->url}?nc={$pagefile->mtime}' alt='' />";  // added a small indicator thumb to each crop-button

 

  • Like 2

Share this post


Link to post
Share on other sites

@horst @tpr After closing the modal the hover tooltip appears and it feels like a glitch cause it also half-cover the button preview.

I fixed it by replacing the 34 line on InputfieldCroppableImage3.js with this:

items: 'a:hover'

Thank you very much guys for your work :)

  • Like 1

Share this post


Link to post
Share on other sites

Yes, please do. will merge it later today and do a more indepth test on weekend.

Thanks you both. :)

Share this post


Link to post
Share on other sites

I've made a few CSS changes, now preview buttons look the same in all 3 image grid modes and I've fixed some other glitches too. The CSS file was a bit overcomplicated, I could eliminate large blocks so I hope I haven't broken anything :) 

I also checked the preview images with more than one crop setting (multiple buttons) and it's working fine here. All is in the PR.

  • Like 4

Share this post


Link to post
Share on other sites

Hi, I have a problem with the automatic cropping of pictures which are in other orientations. The automatic correction of pw works like a charm and the manual cropping works also fine. But the automatic cropping gives me the other orientation in which the picture was uploaded. Is there any fix for this?

Share this post


Link to post
Share on other sites
On 29.5.2017 at 3:06 PM, noodles said:

Anyone else experiencing this issue with the UiKit backend? :-( Any fixes?

 

Just in time with the new AdminThemeUiKit and RenoSkin, there is a fixed version of CroppableImage3 pushed to the repo today.

Many thanks for his help goes to @tpr !! ^-^

 

screen_cai3_uikit.png.711b59c9bd51986ebcd0a0317ac86aa5.png

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites
On 12.9.2017 at 5:26 PM, hheyne said:

Hi, I have a problem with the automatic cropping of pictures which are in other orientations. The automatic correction of pw works like a charm and the manual cropping works also fine. But the automatic cropping gives me the other orientation in which the picture was uploaded. Is there any fix for this?

@hheyne the orientation problem is core related. Whereas it is no problem in all core related api image handling, it is one in CAI3. But there is no simple fix known atm. Maybe one should hook into upload and save those images rotated (with quality 100 and sharpening 'none') as original replacement?! At least as workaround until there is found a system wide solution for the orientation problem.

Share this post


Link to post
Share on other sites

Hi Horst, I saw from a screenshot you posted earlier that you found a way to remove the PW Crop button (next to the Variations button).

(My users get confused by the cropping the module requires and they need to do -  and the additional generic PW cropping button.)

How did you hide that generic PW crop button? Did I miss a setting somewhere?

Share this post


Link to post
Share on other sites
38 minutes ago, ceberlin said:

Hi Horst, I saw from a screenshot you posted earlier that you found a way to remove the PW Crop button (next to the Variations button).

(My users get confused by the cropping the module requires and they need to do -  and the additional generic PW cropping button.)

How did you hide that generic PW crop button? Did I miss a setting somewhere?

Install the Admin Custom Files module. On site/templates/AdminCustomFiles folder create a css file named ProcessPageEdit.css and add the following code:

.InputfieldImageButtonCrop {
	display: none !important;
}

Then on the Admin Custom Files module settings at the "Activate for process" section select ProcessPageEdit, (Page Edit).

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
21 hours ago, ceberlin said:

Hi Horst, I saw from a screenshot you posted earlier that you found a way to remove the PW Crop button (next to the Variations button).

(My users get confused by the cropping the module requires and they need to do -  and the additional generic PW cropping button.)

How did you hide that generic PW crop button? Did I miss a setting somewhere?

I used this line, (uncommented), to hide them. But maybe this will have side-efects if you use it together with core imagefields in your pages.

Better to use it the way @PWaddict said!

  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks for this great module! I am finding responsive image solutions and then I luckily come here.

I have encountered an issue after I install the module. I tried to change the inputfield type of an existing image field to croppable image3. The croppable image3 specific crop setting is not there after switching. So, in the edit, it is just look the same as the normal image field. Sorry if it has been reported before as I did not read all replies one by one.

Share this post


Link to post
Share on other sites

I know this behave. You need to save it 2 - 3 times during the switch process. I believe this has to do with pw core, not only that module.

  • Thanks 1

Share this post


Link to post
Share on other sites

Hi there. I have encounter another issue that what ever I change the sharpen and quality during cropping, the sharpen and quality are always showing soft and 90 respectively after confirm the crop. The resulting images are the same too, so it is simply not a display issue.

Share this post


Link to post
Share on other sites

Bump. I confirm the same issue in a fresh installed latest PW3. I want to debug but TracyDebugger is not loading in this module.

Share this post


Link to post
Share on other sites

please can you describe a bit precise:

wich version are you using

what are you doing exactly (how do you do it)

what is the desired output / behave

and what is the real output / behave

Share this post


Link to post
Share on other sites

The module is installed by module installer using module name. The module version is 1.1.10. PW version 3.0.83.

Step1: Change the seting and hit "Crop And Go".

step1.jpg.242c70b00358733e6971f93513b3a555.jpg

Step2: Jump to the confirmation. The quality and sharpening remain unchanged. (Should be changed to 75 and none as above here)

step2.jpg.21170f339552b6fe410a0cb68aafead0.jpg

Step3: Repeat above steps with default setting(soft, 90).

Step4: Check the image cropped by changed setting and default setting. They have the same file size.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Gadgetto
      Status update links (inside this thread) for SnipWire development will be always posted here:
      2019-10-18
      2019-08-08
      2019-06-15
      2019-06-02
      2019-05-25
      If you are interested, you can test the current state of development:
      https://github.com/gadgetto/SnipWire
      Please note that the software is not yet intended for use in a production system (alpha version).
      If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests.
      ---- INITIAL POST FROM 2019-05-25 ----
      I wanted to let you know that I am currently working on a new ProcessWire module that fully integrates the Snipcart Shopping Cart System into ProcessWire. (this is a customer project, so I had to postpone the development of my other module GroupMailer).
      The new module SnipWire offers full integration of the Snipcart Shopping Cart System into ProcessWire.
      Here are some highlights:
      simple setup with (optional) pre-installed templates, product fields, sample products (quasi a complete shop system to get started immediately) store dashboard with all data from the snipcart system (no change to the snipcart dashboard itself required) Integrated REST API for controlling and querying snipcart data webhooks to trigger events from Snipcart (new order, new customer, etc.) multi currency support self-defined/configurable tax rates etc. Development is already well advanced and I plan to release the module in the next 2-3 months.
      I'm not sure yet if this will be a "Pro" module or if it will be made available for free.
      I would be grateful for suggestions and hints!
      (please have a look at the screenshots to get an idea what I'm talking about)
       




    • By eelkenet
      Hi! I've created a small Inputfield module called InputfieldFloatRange which allows you to use an HTML5 <input type="range" ../> slider as an InputField. I needed something like this for a project where the client needs to be able to tweak this value more based on 'a feeling' than just entering a boring old number. Maybe more people can use this so I'm hereby releasing it into the wild.  
       
      What is it?
      The missing range slider Inputfield for Processwire. 
      What does it do?
      This module extends InputfieldFloat and allows you to use HTML5 range sliders for number fields in your templates.
      It includes a visible and editable value field, to override/tweak the value if required.  
      Features
      Min/max values Precision (number of decimals) Steps (Read more) Manual override of the selected value (will still adhere to the rules above) Usage
      Clone / zip repo Install FieldtypeFloatRange, this automatically installs the Inputfield Create new field of type `Float (range)` or convert an existing `Float`, `Integer` or `Text` field. To render the field's value simply echo `$page->field` Demo
      A field with Min=0, Max=1, Step=0.2, Precision=2

      Field with settings Min=0, Max=200, Step=0.25, Precision=2

       
      Todo
      Make the display-field's size configurable (will use the Input Size field setting)  Hopefully become redundant If it's usable for others I'll add it to the Modules list  
      Changelog
      v002
      - Fix issue where setting the step value to an empty value created problem with validation
      - Make the display-field optional 
      v001
      - Initial release
       
      Thanks!
       
       
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. Field widths entered into the Template Field Widths inputfield are only applied if the Edit Template form is submitted with the Template Field Widths inputfield in an opened state. "Collapsed" is the recommended setting if you think you might also use core inputs for setting field widths in a template context. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
    • By adrian
      Tracy Debugger for ProcessWire
      The ultimate “swiss army knife” debugging and development tool for the ProcessWire CMF/CMS

       
      Integrates and extends Nette's Tracy debugging tool and adds 35+ custom tools designed for effective ProcessWire debugging and lightning fast development
      The most comprehensive set of instructions and examples is available at: https://adrianbj.github.io/TracyDebugger
      Modules Directory: http://modules.processwire.com/modules/tracy-debugger/
      Github: https://github.com/adrianbj/TracyDebugger
      A big thanks to @tpr for introducing me to Tracy and for the idea for this module and for significant feedback, testing, and feature suggestions.
×
×
  • Create New...