gpEasy Feedback

19 votes
Vote Up

Automatic resizing of images

Follow This IdeaBy Benjamin3 years ago16 CommentsCompleted 1 year ago

Add an automatic resizing for images to the target size. That way you can upload your 3 megapixel photos to the site and they are still displayed in a resonable resolution.

The nessecity to resize images beforehand stands against the concept of simplicity that makes gp|easy uinique.

Comments

Yes this would be a fantastic feature. I've seen this in action elsewhere and it works really well. It can't be that different to the automatic thumbnail generation already in operation when uploading images?

I thought a little more on this, and one major difference from database-driven CMS's is that those usually use a cache to save the generated images. That might be a little "overkill" for gpEasy. But a suitable alternative might be to define one or two standard-sizes that are generated (when needed?) and the editor chooses the smallest fitting size and scales it down to the needed size. That way you would not need to generate and save a new image every time the image is changed, and still reduce the image size considerably.

It would be nice if gpEasy sized the embedded pictures to the dimensions of the element holding the picture. That way we can get rid of the thumbnail directory and cache all the pictures in a temporary folder. When editing you just choose to embed the source picture. Don't know if this is possible and how much work that would be...

2 years agoAdd Comment

A flat file CMS can benefit from caching as much as a database systems. You only want to resize an image once, instead of every time it's called.

Most of the necessary code appears to already be in tool/Images.php which is used to generate the 100px square pixel. So it's essentially a matter of feeding that script the sizes you want, the destination folder, and naming scheme.

The hard part is to design a system that works for most people. Many systems resize to a max width, which makes vertical images larger than horizontal image (if you have 4x3 images and a max width of 400 pixels, a horizontal image would be 400x300 ad a vertical image would be 400x533). An interface that lets the user enter the size would be nice for some, but adds an extra step. A system that resizes based on image area would be great for me ($new_x = √($old_x / $old_y) * $new_area and $new_y = √($old_y / $old_x) * $new_area).

So the issue is more with user interface design than a technical issue.

2 years agoAdd Comment

So I may have thought this idea was more complicated than I thought...

A system that resizes based on image area would be great for me

gpEasy actually already does this! Take a look at the configuration setting labeled "Maximum Image Area" (under the "Performance" heading). Any images uploaded with areas larger than the value defined in this field will be resized.

So those "3 megapixel photos" uploaded to your gpEasy installation will automatically be resized.

It would be nice if gpEasy sized the embedded pictures to the dimensions of the element holding the picture.

This is actually how I've been approaching the idea the whole time.

2 years agoAdd Comment

But when I insert a picture like this:

<img src="/data/_uploaded/image/P1150562.JPG" style="width: 160px; height: 127px;"/>

Its not resized to 160x127. It looks hard to implement right, but would be awesome!

Edited: 2 years agoAdd Comment

Josh,

I saw the image area code in the Images.php file. I didn't see where gpEasy was using it. This is great.

Jogai, 

This would be awesome, but harder to implement. The thumbnails are currently created when the file is uploaded. The resizing you want would happen after upload and within the CKeditor framework.

Since you may be trying different sizes before deciding on the perfect, it would be better to keep the original image in place while you're designing. Then click a button named "optimize image" that would read your sizes, call the image processor, create a new file named P1150562_160x127.jpg, and replace the image on the page with the new one (keeping the original intact in case you need it somewhere else).

I'm dreaming but it should be possible.

2 years agoAdd Comment

It looks hard to implement right, but would be awesome!

Creating the 160x127 image isn't too bad, the challenge is managing all the resized images.

Consider this: If someone starts with 160x127, and later decides to change it to 150x117, and later again changes it to 170x137. gpEasy could fairly easily create those three images each time a user saves the page, but how does gpEasy know when to delete a resized image? If there are two pages using the 160x127 image, we can't delete it when one of the pages stops using it.

2 years agoAdd Comment

I agree. The hard part is to get an intuitive user interface and image management. And once you get it right, people will want more advanced image manipulation tools (cropping, etc.). You can't win! ;-)

If you use my suggestion of having the image resized only when triggered manually, you should not have a tremendous amount of images. The user can figure out the layout with a browser-resized image, and only optimize the image when he is satisfied with the layout. My inclination would be to add an "optimize" button to the Image Properties window.

I would not auto delete any images. The user can do some housecleaning  when necessary. At some point, the user has to take ownership of the site. If a site is slow because 1 megapixel images are browser-resized, that's the user's problem as well. All i'd like is for gpEasy to offer the tool to optimize the images. Whether the user takes advantage this tool or not is less of an issue. Some may disagree on that and prefer an automated approach. I prefer the added control of doing it manually.

I don't know if gpEasy tracks which images are used. If it does, it would be nice to have a view in the file browser that identifies that. If not, no big deal.

As for file management, I'd start with appending the size to the file name of any resized file and storing them in an "optimized" folder next to the original. It would be nice to be able to select which image variation to use from the sizes already available, but once again, no big deal (most users will resize once and forget it). Plus they could navigate to the "optimized" folder and select the size they want.

There could be an issue If someone replaces an image with another one with the same name (expecting it to be replaced throughout the site). gpEasy could check for file names on upload and offer to recreate the resized images based on the new ones. A file name check or an "optimization log" file could be used to identify the files that need to be redone. 

An advanced system would analyze the entire site and compare the <img> size values, compare them to the file's size and offer to resize and relink the images that don't match. That would be really nice, but is overkill and is way down on my wish list.

2 years agoAdd Comment

I've been talking about this with a partner, and he suggested using a simple cache:

The image is called via a php wrapper that checks if the needed size is available and generates it automaticaly if not. For that you might only need an array with the available image sizes and maybe a timestamp. If you log access-times, you can wipe unused images after a certain time.

 

Edit: Well, we just had a look at the code and see you have the code for exactly that already in 3.01. So, just tell us when it's finished ;)

Edited: 2 years agoAdd Comment

 

This idea needs only a single file timthumb.php
 
additional option of an image the size of this code specify
 
media / timthumb.php? src = media/bilder-bg/2012-06-09-g1x-iceland-0824_cms_thumb.jpg & w = 100 & h = 100 & zc = 1
 
her the quelle-link:
 
http://www.binarymoon.co.uk/projects/timthumb/

2 years agoAdd Comment

I like it!

One concern. This would open up the possibility for a malicious user to create any number of images on the server by changing the parameters:

  • timthumb.php?src=image_path.jpg&w=100&h=100
  • timthumb.php?src=image_path.jpg&w=100&h=90
  • timthumb.php?src=image_path.jpg&w=100&h=80
  • timthumb.php?src=image_path.jpg&w=100&h=70
  • timthumb.php?src=image_path.jpg&w=100&h=60
  • etc...

2 years agoAdd Comment

My inclination would be to add an "optimize" button to the Image Properties window.

When this suggestion from Eric is used you could prevent non-authorized users to generate resized images.

An other method is to set a maximum cache size for all the resized images. When this limit is crossed the oldest generated images can be thrown away. There is still a possibility to generate a bunch of images (taking much cpu-resources) but the server disk or the hosting quota isn't reachtd if that setting is correct.

Another way is only allowing localhost to do this operation. When the page is parsed the images will be generated on the server (accessing timthumb via localhost). That way no one can generate an image, only the right images are generated for certain img tags. I think this would have my preference.

And finally you could parse the new content when its posted, and only then call timthumb, but this requires some extra checks in other plugins like contact form because posting is possible there too.

 

Edited: 2 years agoAdd Comment

I think the CMS is the image size ImpressPages statement released super easy

Over + / - you can adjust the image with the mouse you can move the clipping of the image.

http://www.impresspages.org/

 

2 years agoAdd Comment

Here is a nice component for image manipulation in PHP: http://www.verot.net/php_class_upload.htm

I dont know what the status is but I saw in the svn log that you ditched the jCrop approach.

2 years agoAdd Comment

Here are 2 another alternatives to Ben Gillbank's timthumb.  - PHP THUMB, guckst du hier:  http://phpthumb.gxdlabs.com/    

And the basic Usage of PHP THUMB on github:  https://github.com/masterexploder/PHPThumb/wiki/Basic-Usage

The second alternative is maybe the most effectful image manipulating class in the Net with more than 45 effects,  - Easy Php Thumbnail:  http://www.mywebmymail.com/?q=content/easyphpthumbnail-class

Edited: 2 years agoAdd Comment

New Comment

You must be logged in to comment on an idea.

gpEasy News

4.3.2
2/18/2014

The final release of gpEasy 4.3.2 is now available. This is primarily a third-party package ... Read More

4.3 Final
11/4/2013

The wait is over. The final release of gpEasy 4.3 brings some exciting new features ... Read More

More News

Communics Communication Designers

We convert your static HTML website to gp|Easy with ease. We are specialised in small websites build with the latest web technologies and design trends. O yeah, and responsive of c...

Find out more about gpEasy's Provider Spotlight

Log In

  Register