We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Resize Images in Posts - BBCode; adding new code to zetaboards
Topic Started: Aug 13 2010, 09:19 AM (35,167 Views)
ZenToR
Member Avatar
Member
[ *  * ]
I would like to suggest to integrate a Resize Images in Posts - BBCode to all Zetaboards forum.
What this Resize Images Code does, is to simply resize images that you want to include into posts by setting a specific wished size.
I know there is already a Resize Image Function integrated in zetaboards, but i am thinking of a more improved Code.
That new Resize Code should be able to resize images autmoatically while keeping their original aspect ratio.



Here is an example to show you what I mean.

This is the Original Image (394x296 pixels):

Posted Image


Now i would like to scale down the image to its half size.




First, I will resize this image with the usual resize images code that is already istalled in zetaboards. I set the resolution to 200x80 pixels with this code:

Code:
 
[img=200,80]http://z3.ifrm.com/197/123/0/f617252/deer1.jpg[/img]

Posted Image

Note how the image gets totally blurred, and doesnt look good anymore.
If I want the image to keep its original aspect ratio, then I would need a calculator first to calculate the correct width and height, or I could download the image, resize it properly in a image editing software, and upload it again.
Both ways would be pretty complicated.




Now comes the improved resize code. The new resize code would do this all automatically, so the original aspect ratio will be retained. You just need to set the wished height OR just the width OR just the percentge of the original image to resize it automatically.

So, now I reszie the image above by just typing a width of 200 pixels:

Code:
 
[img=w,200]http://z3.ifrm.com/197/123/0/f617252/deer1.jpg[/img]

Posted Image

The height now was automatically resized without defining it, so that the aspect ratio is the same as the original image.
Or another good way to resize images would be to set the wished percentage of the original image, for example 50%:

Code:
 
[img=50%]http://z3.ifrm.com/197/123/0/f617252/deer1.jpg[/img]

As a result, the height and width automatically get resized by 50 %





The Resize Code could work and be used like this:

[img=w,500] ..... [/img] that means: width = 500 pixels, and height will be resized automatically

[img=h,500] ...... [/img] that means: height = 500 pixels, and widtht will be resized automatically

[img=50%] ........ [/img] that means: image get resized (downscaled in this case) by 50 % of its original size. Height and width will be resized automatically.


I hope i could show you what I mean with the new Resize Image BB Code and how it should work.

So it would be really great if such an improved Resize Images BB Code could be added to all Zetaboard Forums in the future!


Overview
 
Here is a short overview of the features the improved Resize Code should contain:

  • Resize Image Button on posting page
  • Resize Image automatically while keeping the original aspect ratio of the image
  • Resize Image automatically by just enter the width (the height will be resized automatically then)
  • Resize Image automatically by just enter the heigth (the width will be resized automatically then)
  • Resize Image automatically by enter the percentage of the original image size (both, the width and the height will be automatically resized by the percentage value)



I have already requested such a code in the ZBCode Forums and RedBldSandman was so kind and created a very good code that automatically resizes images as described above.
Sadly, there appear some bugs in the code, which cause random images to be resized wrong. Instead, the resized images becomes suddenly VERY BIG or TINY.

So that's why I think it would be great if such an improved Resize Code could be implemented to Zetaboards, in the hope that it will work perfectly without any bugs.

If someone is interested in RedBldSandman Code, here is the link to his Resize Images Code:
http://zetascript.co.cc/single/?p=429502&t=3682354

Here are also some screenshots of RedBldSandman Resize Code to show you how it works:

Posted Image

Posted Image

Posted Image

Posted Image

Posted Image
Edited by ZenToR, Aug 17 2010, 08:22 AM.
Offline Profile Quote Post Goto Top
 
Moonface
Member Avatar


I like this suggestion. I've found it a pain to try getting the values correct for an image.
Offline Profile Quote Post Goto Top
 
Stephen
Member Avatar
Twilight is upon me, and soon night must fall.

This is a very well thought out request and a great presentation. Definitely would support it. :)
Offline Profile Quote Post Goto Top
 
ElementalAlchemist
Member Avatar


This is a very interesting, neat idea. :) I'll support it, as well.
The only point I'd like to make about it is that you can already set the width without the height: [img=200]http://url.to/image.png[/img] will proportionally resize the image automatically to a 200px width. However, the specified height and relative resizing are also both really good ideas that should be taken into consideration. :)
Online Profile Quote Post Goto Top
 
ZenToR
Member Avatar
Member
[ *  * ]
its great that you like it :)

@ElementalAlchemist

I just tried out the bbcode you posted, but it doesn't seems to work for me when I only enter the width to the IMG bbcode. The Image won't be resized, but is displayed in its original size. I tried it out with a value of 50:

Code:
 
[img=50]http://z3.ifrm.com/197/123/0/f617252/deer1.jpg[/img]
Posted Image
Offline Profile Quote Post Goto Top
 
ElementalAlchemist
Member Avatar


That's really weird, considering I swear it worked before. :P
The upgrade announcement about it wasn't very specific. :/
Online Profile Quote Post Goto Top
 
Pando-ZNS
Member Avatar
Member
[ *  *  *  * ]
CSS can be used to automatically resize posted images that are too big or small.
Code:
 
td.c_post img {
min-width:50px;
min-height:50px;
max-width:500px;
max-height:500px;
}


But the ability to resize images like that would be so nice. I really hate going into the calculator, especially when there are more than 1 image I need to resize because someone posts a giant image.
Offline Profile Quote Post Goto Top
 
ZenToR
Member Avatar
Member
[ *  * ]
if someone is interested in testing RedBldSandman Resize Images Code, here is a test forum i have set up:

http://s1.zetaboards.com/piano

you don't need to register, guests are allowed to create topics/posts there
Good News!

RedBldSandman has fixed the Resize Images Code, so it's working without any bugs and all images are resized properly now.

If you are interested in this code, here it is:
Resize Images code
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Service Discussion and Feedback · Next Topic »
Add Reply