Automatic image editor for output WYSIWYG Editor?

Question

A common problem when creating end-user content management systems using WYSIWYG editors such as CKEditor is that users can upload images within the editor, embed them, and then resize them.

After saving the content, the built-in (original) URLs of the images should be replaced by their correctly changed counterparts. Imagine a 3000 x 3000 photo uploaded by a user, manually changed in the WYSIWYG editor to 300 x 300 pixels - it needs to be automatically changed to prevent the huge source file from loading.

The task is quite simple, and I implemented it several times (although with regular expressions, so I'm looking for a replacement :)), go through the DOM, find the images, look, the size of the original image file is different from the size specified in the img tag, and if it so, replace the original image with an automatically resized image.

There are several small quirks along the way (some WYWSIYG editors prefer to use width="300" , others prefer the width: 300px CSS version, etc.).

My question is, is there a ready-made high-quality PHP solution that does this well and takes into account quirks?

Answer 1

Try using this image size: http://shiftingpixel.com/2008/03/03/smart-image-resizer/

I used this in my development, you can upload your image file and create a cache file based on any size or cropped part for optimal performance without actually changing the original image file.

Example:

 <img src="/image.php/coffee-bean.jpg?width=200&amp;height=200&amp;image=/wp-content/uploads/2008/03/coffee-bean.jpg" alt="Coffee Bean" /> 

you can upload the image.php file on the above site and transfer the name of the target image as parameters to the image.php file, and then it will generate a cache file for it, please make sure that the permission for the image folder is ready for execution and change .

Answer 2

as for me: I use the tinymce editor with the ImageManager plugin installed . so in config php you can adjust the size of the images of output thumbnails. and if the uploaded image is larger than this size, you will see a small thumb (css style for resizing, which you can customize so that you can use some jquery plugins to show a large image, for example, a thick box)