Rank Images

[Davyc]

For some reason when I upload a rank image it's size is being reduced by 30% is this by design or is there somewhere this can be changed?

Original image size that I upload is 201 x41 pixels but when uploaded it is reduced in size to 140 x 29 pixels - equivalent to a 30% reduction.

When looking at the CSS  there appears to be a margin/padding either side of the image, but there is no corresponding CSS and even if there were there is no explanation for the size change.

Anyone any idea what's happening here and why - and importantly for me where it's happening and can it be changed?

With thanks.

[steve00]

16 hours ago, Davyc said:

For some reason when I upload a rank image it's size is being reduced by 30% is this by design or is there somewhere this can be changed?

Original image size that I upload is 201 x41 pixels but when uploaded it is reduced in size to 140 x 29 pixels - equivalent to a 30% reduction.

When looking at the CSS  there appears to be a margin/padding either side of the image, but there is no corresponding CSS and even if there were there is no explanation for the size change.

Anyone any idea what's happening here and why - and importantly for me where it's happening and can it be changed?

With thanks.

width of the area is 200px less the padding/margin

I find best size is approx 180px wide (or less) if using an image

If really want to change the width of that area then in custom.css add

.cAuthorPane.ipsColumn_medium {
  width: 250px;
}

obviously change width to your own requirements (remember to also allow for the padding/margin

[Davyc]

Thanks @steve00 for your response, however it's not the userpane that's the issue - I added your CSS and this was the result, note the padding either side of the rank image compared to the original which is shown below; the padding area is increased.  However, that is not the issue, the images are being resized on upload and not when placed into the userpane.

 

Original below:

 

This is the size of the image before uploading:

and this is the size after uploading:

Which means that something is resizing the image, but where is an unknown to me.  Even the padding either side does not show up in the Chrome console.  It's a mystery lol.

Thanks for replying though, it is appreciated.

 

 

[bfarber]

$form->add( new \IPS\Helpers\Form\Upload( 'member_ranks_icon', $pip, FALSE, array( 'image' => array( 'maxWidth' => 140, 'maxHeight' => 140 ), 'storageExtension' => 'core_Theme' ), NULL, NULL, NULL, 'member_ranks_icon' ) );

The max width is set to 140px by the form helper, so any image uploaded will be downsized to 140px max width (and height, for that matter).

[Davyc]

Ahh thank you @bfarber that explains it all now; mystery solved.  Is it possible to change that setting in a template to a slightly larger size?  I don't want to mess anything up by tampering with such templates, but if it can be done I would do it.  

Thanks again for explaining this, it was driving me nuts lol.

😀

[steve00]

2 minutes ago, bfarber said:

$form->add( new \IPS\Helpers\Form\Upload( 'member_ranks_icon', $pip, FALSE, array( 'image' => array( 'maxWidth' => 140, 'maxHeight' => 140 ), 'storageExtension' => 'core_Theme' ), NULL, NULL, NULL, 'member_ranks_icon' ) );

The max width is set to 140px by the form helper, so any image uploaded will be downsized to 140px max width (and height, for that matter).

Now that would explain it

Try adding this into custom.css

.cAuthorPane .cAuthorGroupIcon {
    max-width: 200px;
}

as well as the code I posted above

[bfarber]

12 minutes ago, Davyc said:

Ahh thank you @bfarber that explains it all now; mystery solved.  Is it possible to change that setting in a template to a slightly larger size?  I don't want to mess anything up by tampering with such templates, but if it can be done I would do it.  

Thanks again for explaining this, it was driving me nuts lol.

😀

The form helper definition in the source file would need to be edited (so you'd need a plugin, or you would need to modify the source file).

[Davyc]

@bfarber  many thanks for that info.  It's much appreciated and I will sleep tonight lol.

[steve00]

22 minutes ago, bfarber said:

The form helper definition in the source file would need to be edited (so you'd need a plugin, or you would need to modify the source file).

Just tried my css above and seems to work for me