Just check the dimensions of the original images. You cannot insert whatever size you want there, it's dictated by the design!

but you can oblige user to rebuild logo in order to have good display
a simple css change = all logo will be display good (in some cas to small but not diform)

but you can oblige user to rebuild logo in order to have good display

Expected that people that want to put their own images there to upload the correctly sized images. This is also mandatory for performace!

yes i understand ...
maybe need to add recommanded size in field descritption ?

I don't see how having to adjust my logo that is 30x30px to be 30x150px to be displayed properly is a performance issue? Seems adjusting that to width auto is the right thing to do here.

😉

but you can oblige user to rebuild logo in order to have good display

Expected that people that want to put their own images there to upload the correctly sized images. This is also mandatory for performace!

Sorry but using a fixed height&width in CSS is simply wrong. There are many and many method to obtain this.
For example if i want to use a svg i want only a limit in height. So a logo in a horizontal bar with fixed height need to be set with a "fixed" height and auto-width. For vertical expanding assets, the opposite.

For me it is a bug too, i customise every time this logo in our customer admin backend.

Sorry but using a fixed height&width in CSS is simply wrong

Guys, the size of the images derives from the size specified by the designer of the template. Allowing oversized images to render correctly in a smaller container is simply wrong. Do your work properly and upload the correctly sized image or if you cannot do that then leave the original image there. Simple as that.

Sorry but using a fixed height&width in CSS is simply wrong

Guys, the size of the images derives from the size specified by the designer of the template. Allowing oversized images to render correctly in a smaller container is simply wrong. Do your work properly and upload the correctly sized image or if you cannot do that then leave the original image there. Simple as that.

We are speaking about proportions, not sizes.

Did you see the real problem exposed here? Why i need to made resized or distorted, retouched version of brand logo?

This isn't a personal dedicated template, it's a backofffice for a CMS that must adapt to customers needs.
For example it's ABSURD that this CMS doesn't have a "on the fly php image resizing&cache" like ALL CMSes in the world.

Ex:
<?php echo $adminlogo->getResizedImage($logourl,135,135,keep_proportions,no_crop); ?>

This is how a successful web solution is made.

Why i need to made o resized a distorted, retouched version of brand logo?

You dont

and solution can be ?

Do your work properly and upload the correctly sized image or if you cannot do that then leave the original image there. Simple as that.

Do your work properly and upload the correctly sized image or if you cannot do that then leave the original image there. Simple as that.

Very user friendly indeed…

So basically to have my logo that is 30x30px ot be displayed correctly i need to create a version that is 30x150?

That's if you can do it, but if not, leave the original version.
https://buzzword.digital/services/

This is such an easy CSS fix that the fact that it's even a point of contention astonishes me.

img {object-fit:contain;}

People aren't going to inspect the Joomla logo, find the dimensions, and make a custom version of their logo to the exact dimensions. (Not to mention, that's kind of small and arbitrary.) They're just not. Forcing them to (or warping their logo) is obnoxious and awful UX. It looks like a bug or a remnant of the CMS from 2006. The performance impact would be fractions of a second - not even noticeable.

Why not include a single line of CSS that makes their full logo display in the limited space available, however small that may be? Let's bring Joomla 4 into 2021 properly.

Actually, sorry, two-line fix to position the image correctly:

object-fit: contain;
object-position: left center;

People aren't going to inspect the Joomla logo, find the dimensions, and make a custom version of their logo to the exact dimensions.

That why we code, so people don't have to do things manually, it's so easy to upload and crop to the right dimensions with just a click...

The performance impact would be fractions of a second - not even noticeable.

Yeah, some fractions of a second make here some there and you have an awfully slow site. Fix the root of the problem: provide a way for click-only users to complete the task...

Let's bring Joomla 4 into 2021 properly.

And that is by using antipatterns? wow

That why we code, so people don't have to do things manually, it's so easy to upload and crop to the right dimensions with just a click...

That's adding completely unnecessary steps and complication for something that is not an issue literally anywhere else on the web.

Yeah, some fractions of a second make here some there and you have an awfully slow site.

Please provide the benchmarking tests you have done to show the significance of the performance "impact" this change would have.

Fix the root of the problem: provide a way for click-only users to complete the task...

No, the root of the problem is that this should not be a task to begin with. It's absolutely unnecessary.

And that is by using antipatterns? wow

Please explain in detail how simplifying uploading a custom logo is an "antipattern", and how exactly you define antipattern.

I, personally, would use "forcing people to create custom versions of their brand (whether in a web interface or not) in order to upload it to a CMS" as an exemplary antipattern.

Fix the root of the problem: provide a way for click-only users to complete the task...

So we are providing the image crop and resize tools for them but they still need

to inspect the Joomla logo, find the dimensions,

Could we not just do something like this

@brianteeman my concern is that monkey patching the css so that any image will fit will eventually allow people to upload a 500kb (or more) for something that shouldn't be more than 5kb...

Except it's not just recommended, it's forced. As shown above, providing an even smaller logo file at different proportions gets stretched out. Warping a brand or forcing dimensions, which for many companies and organizations has very stringent usage guidelines, is the wrong way to go about this for a .00001 second performance increase.

Do whatever you want.

Bye

my concern is that monkey patching the css so that any image will fit will eventually allow people to upload a 500kb (or more) for something that shouldn't be more than 5kb...

Fun fact: if you upload a 3MB logo that happens to be the correct proportions, it will display just fine. There's nothing limiting upload size, which would be a more realistic, effective, and understood method for limiting performance impact of large images. (Though, in this case, an info box like Brian showed letting users know about the upload limit would be good.)

Do whatever you want.

Bye

Cheers ✌️

Wow seems not everyone gets ignored here... Seems every time i came with a valid question. It got ignored. Good to see there's more people that care about this.

There are lots of people who care about things like this. We are just usually a bit quieter. :)

Good to know! 😄 I actually had given up on this already since every decent argument i made had been conveniently ignored.

That's a shame. No one should feel ignored when contributing to open source.

Probably the correct thing to address @dgrammatiko 's concern would be to add a warning if a user uploads a logo bigger than a certain size (say 1MB or whatever - the absolute size we can debate until the end :) ) that we give a warning in javascript asking if they are sure they want to upload a file that big and it can affect site performance. If they choose to override they can - but they can't say they haven't been warned...

@wilsonge it's 2021, having an uploader convert anything selected to the correct size is a newbie's task to code it. You can have it all but instead ppl just asking for the wrong thing... You can't fix...