Can you set a max width / height for images uploaded with the editor

SeanBallast

The editor seems with images to upload them in their native resolution. Is it possible to specify a max width / height? So that if it is bigger than either 800w or 600h it resizes the image to be smaller and keeps its aspect ratio?

Also is it possible to make the thumbnail image larger?

Is there a list of all options somewhere? I'm sure this wheel has already been invented but I couldn't see it in the documentation and a search did not find anything.

whu606

For max width/height, you can add this to your custom theme (or use the CSSEdit plugin if you don't have a custom theme)

.Message img {
max-width: 800px!important;
max-height: 600px!important;
}

vrijvlinder

If you want to keep the aspect ratio do not fill in the max height. That will make it auto with respect to the width.

to keep aspect ratio

max-width:90%;
height:auto;

Also is it possible to make the thumbnail image larger?

yes you can by adding this config which makes the thumbnail that size.

$Configuration['Garden']['Thumbnail']['Size'] = 40;

If you want the thumbnail container a different size when you hover it, then you need css to change that depending on your theme.

div.FileHover{
width: 100px;
}

SeanBallast

Thanks, but that is just CSS and what I would like to do is actually re-size the image that is uploaded.

So if an image is uploaded that is 8000 pixels wide dont store this 8000 image on the server. Re-size it down to 800px wide. Is this possible?

vrijvlinder

It does resize it already but you can affect how much you allow in weight of bytes

$Configuration['Garden']['Upload']['MaxFileSize']= '50M';

$Configuration['Garden']['Picture']['MaxHeight'] = 1000;
$Configuration['Garden']['Picture']['MaxWidth']  = 600;

SeanBallast

@vrijvlinder said:
It does resize it already but you can affect how much you allow in weight of bytes

$Configuration['Garden']['Upload']['MaxFileSize']= '50M';

$Configuration['Garden']['Picture']['MaxHeight'] = 1000;
$Configuration['Garden']['Picture']['MaxWidth']  = 600;

Would that stop people uploading images bigger than that?

I want to allow them to upload any size, but for the forum to resize the larger ones

vrijvlinder

I want to allow them to upload any size

One thing is weight and another thing are dimensions. Something can be huge but without resolution or can be small and weigh a lot like gifs can do.

If you want to allow people to upload images that weighs say 5megabytes you would be able to do so with the MaxFileSize configuration by allowing even more. However, your host is the one who will place limitations on the ultimate allowance which might be 64M
which still allows for huge files to be uploaded.

Is there a reason to upload such huge files if they will only be shown in the discussion ? Yes, you can opt to not insert the image in the post and people would be able to see the large image when they click the thumbnail.

If you do not care about the weight of images but do about their Dimensions, then you can control that using javascript or css.

SeanBallast

@vrijvlinder said:

I want to allow them to upload any size

One thing is weight and another thing are dimensions. Something can be huge but without resolution or can be small and weigh a lot like gifs can do.

If you want to allow people to upload images that weighs say 5megabytes you would be able to do so with the MaxFileSize configuration by allowing even more. However, your host is the one who will place limitations on the ultimate allowance which might be 64M
which still allows for huge files to be uploaded.

Is there a reason to upload such huge files if they will only be shown in the discussion ? Yes, you can opt to not insert the image in the post and people would be able to see the large image when they click the thumbnail.

If you do not care about the weight of images but do about their Dimensions, then you can control that using javascript or css.

What I mean is I don't care about the size when people upload in the original (I've got the max as 50mb)

What I do care about is the size of the image displayed in both dimensions and storage.

So when the file is uploaded it's resized to a max given.

Controlling it via CSS is not good enough as mobile users could still have to download massive files and resizing large images just using CSS does cause other problems.

nonce

you said: What I do care about is the size of the image displayed in both dimensions and storage.

yes you could do that. via the crop command when calling the saveimageas in the editor plugin.

Do the picture configuration statements work when you try them?? I'd love to know, because I still believe they are not functional. But I love being wrong.

SeanBallast

@nonce said:
you said: What I do care about is the size of the image displayed in both dimensions and storage.

yes you could do that. via the crop command when calling the saveimage in the editor plugin.

Do the picture configuration statements work?? I'd love to know.

Won't crop crop the image? I don't want it cropped just resized

nonce

then add a resize command, similar to a thumbnail.
Did the picture configuration statements work?? I'd love to know.

look at the watermark plugin and replace with imagecopyresampled if you desire.

SeanBallast

Do you know how that resize is done? I'd like to change the resize on the thumbnail but there doest seem to be any options.

What picture config statements? The ones above don't as when the image is loaded by itself after the thumbnail is clicked no CSS is loaded.

nonce

https://vanillaforums.org/discussion/31839/adding-a-watermark-to-uploaded-images

there are configuration options for the thumbnail but it will affect all thumbnails.

nonce

you said: What picture config statements? The ones above don't

thats what I thought.

iirc

where N is your number.

$Configuration['Garden']['Thumbnail']['Size'] = N;

There may be a tutorial for this in the Tutorials category.

where x and y are the height or width.

also with the garden method SaveImageAs($TmpImage,$TargetImage, x, y);

nonce

FYI, if it helps you.

/**

• Saves the specified image at $Target in the specified format with the
• specified dimensions (or the existing dimensions if height/width are not provided.

• @param string The path to the source image. Typically this is the tmp file name returned by $this->ValidateUpload();

• @param string The full path to where the image should be saved, including image name.

• @param int An integer value indicating the maximum allowed height of the image (in pixels).
• @param int An integer value indicating the maximum allowed width of the image (in pixels).
• @param array Options additional options for saving the image.
• • Crop: Image proportions will always remain constrained. The Crop parameter is a boolean value indicating if the image should be cropped when one dimension (height or width) goes beyond the constrained proportions.
• • OutputType: The format in which the output image should be saved. Options are: jpg, png, and gif. Default is jpg.
• • ImageQuality: An integer value representing the qualityof the saved image. Ranging from 0 (worst quality, smaller file) to 100 (best quality, biggest file).
• • SourceX, SourceY: If you want to create a thumbnail that is a crop of the image these are the coordinates of the thumbnail.
• • SourceHeight. SourceWidth: If you want to create a thumbnail that is a crop of the image these are it's dimensions.
    */
    public static function saveImageAs($Source, $Target, $Height = '', $Width = '', $Options = array()) {

vrijvlinder

$Configuration['Garden']['UploadImage']['Quality'] = 50; //100 is full quality,this affects the resolution and the weight in percentages 50=50%

SeanBallast

@nonce said:
you said: What picture config statements? The ones above don't

thats what I thought.

iirc

where N is your number.

$Configuration['Garden']['Thumbnail']['Size'] = N;

There may be a tutorial for this in the Tutorials category.

where x and y are the height or width.

also with the garden method SaveImageAs($TmpImage,$TargetImage, x, y);

Cheers I will look for a tutorial for the save image as

SeanBallast

@vrijvlinder said:
$Configuration['Garden']['UploadImage']['Quality'] = 50; //100 is full quality,this affects the resolution and the weight in percentages 50=50%

Will this shink all images by half if set at 50?

I only want to shrink large ones, normal sized and small ones I want to keep in the size they were uploaded.

nonce

No. the quality is defaulted to 75 for jpg files already and often any manipulation actually makes the file bigger than than the files you may already have because the compression technique is not that great unless you are shrinking them by alot. for png files similar but different scaling and reversed.

much better to prevent uploads larger than a certain mb and having users scale and optimize - regarding quality.

if you want scaling, use scaling, if you want different image quality, the quality may suffer and the image may not be shrunk to what you want.

vrijvlinder

Will this shink all images by half if set at 50?

You still don't understand the difference between weight in bytes and dimensions in height and width.

This will make the images weigh less by reducing the resolution. Not the width or height. As I said before, an image can be small in width and height but weigh 10mb. It can also be huge and weigh only 900k max.

The reason why you want to make the images weigh less is because you don't want to host heavy images ? or is it because they take too long to load and take up too much space? Or because they are so big they take up an entire page and you can't see the discussions ?

nonce

just for clarification purposes.
I think this "Will this shink all images by half if set at 50?" was a rhetorical question out of disbelief because the config statement although an option was off target. My guess based on title and initial discussion - the person does know what they want - scaled images They did not bring up imagequality, it was an apparent digression. Feel free to call me wrong. Learning from my technical and reading comprehension mistakes make me technically better in both interpretation of questions as well as answering them. I am wrong alot, so one more wrong thing won't hurt my ego. Technical corrections are important to me, at least.

I keep on seeing these config statements offered

$Configuration['Garden']['Picture']['MaxHeight'] = 1000;
$Configuration['Garden']['Picture']['MaxWidth'] = 600;

Can anyone in the world tell me where they are used? and where they work.
they only appear in the core in config-defaults.php but I have not seen any doe or plugins where it is used.

Can someone please explain why they think these command work and where, or is this one of those urban myths.
but because for the life of me I can't see where they are used.