search

joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.77k stars 3.65k forks source link

[j4-admin] admin header logo size #34355

Open micker opened 3 years ago

micker commented 3 years ago

In RC1 for large brand logo

What needs to be fixed

hello actualy logo header have fixed size in css, but if user load a logo without same size its not clean i think we can remove fixed width for auto width

Actual result after load a logo image

Need result image

i try to check code in scss but seams $width ... what is the approach ?

dgrammatiko commented 3 years ago

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

micker commented 3 years ago

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)

dgrammatiko commented 3 years ago

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!

micker commented 3 years ago

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

TLWebdesign commented 3 years ago

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.

micker commented 3 years ago

:wink:

simbus82 commented 3 years ago

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.

dgrammatiko commented 3 years ago

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.

simbus82 commented 3 years ago

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.

brianteeman commented 3 years ago

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

You dont

micker commented 3 years ago

and solution can be ?

brianteeman commented 3 years ago

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.

TLWebdesign commented 3 years ago

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…

TLWebdesign commented 3 years ago

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

Bugdofe commented 3 years ago

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

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34355.

crystalenka commented 3 years ago

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.

crystalenka commented 3 years ago

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

object-fit: contain;
object-position: left center;
dgrammatiko commented 3 years ago

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

crystalenka commented 3 years ago

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.

brianteeman commented 3 years ago

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

image

dgrammatiko commented 3 years ago

@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...

crystalenka commented 3 years ago

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.

dgrammatiko commented 3 years ago

Do whatever you want.

Bye

crystalenka commented 3 years ago

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 ✌️

TLWebdesign commented 3 years ago

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.

crystalenka commented 3 years ago

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

TLWebdesign commented 3 years ago

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

crystalenka commented 3 years ago

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

wilsonge commented 3 years ago

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...

dgrammatiko commented 3 years ago

@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...