User tests: Successful: Unsuccessful:
Pull Request for Issue #35314
The logo has a fixed width which will resize custom banner images. Smaller images will be scaled up which results in blur images. This PR adds a size to the Cassiopeia logo image/svg and removes the fixed width of the logo in the CSS.
See Issue #35314 to reproduce the issue. after applying the PR the issue is fixes,
Custom logo is stretched if the banner image is smaller the the original Cassiopeia image.
Custom logo has the correct size an scales nicely on mobile
No
Status | New | ⇒ | Pending |
Category | ⇒ | Front End Templates (site) NPM Change |
I don't know how to test patches with prebuild packages.
Thanks @PhilETaylor
I have downloaded and installed the "Joomla_4.0.2-dev+pr.35337-Development-Full_Package" package on my localhost.
I can confirm that the problem with the size of the logo is now solved !
Thanks
@mariantanase Please go to https://issues.joomla.org/tracker/joomla-cms/35337
Login on the top right with your github account
Next click on "Test this" and check "Tested successfully" to mark the PR as tested
I have tested this item
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
@mariantanase It's now up to the release leads if they will merge this PR. Changes are likely that they will do this, but we have to wait till there is a new release. Hope you don't mind waiting. @bembelimen please consider merging
Can we not use rem on the width/height of the svg? fixing the width on the svg itself kinda defeats the purpose of it being an SVG.
As far as I know SVG doesn't support rem units as width and height attribute. Setting a width and a height in the SVG doesn't have impact on the scalability. The width ad height attributes in the SVG are just a default size, If no size is given, the SVG will always scale 100% of it's container width. With these attributes set, it will firstly respect these values. With CSS the SVG can be scaled up or down if needed.
Remove the width defined in the CSS, and use em
(not rem
) as a unit of measurement inside the SVG itself.
Labels |
Added:
?
?
|
Just a couple of things to take into consideration with this change:
You are DOING IT WRONG. Width and height are unitless: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions
Check https://www.youtube.com/watch?v=YM3KszYmn58 and/or https://speakerdeck.com/jensimmons/using-the-html-width-and-height-attributes-to-improve-web-page-loading
@dgrammatiko You are right! Thanks for checking! What would be the best option? width and height attributes with no units (will be used as px)?
What would be the best option? width and height attributes with no units (will be used as px)?
The width and height attributes are used by the browser to calculate the needed space (the aspect ratio basically) that the image will occupy once loaded. Defining them means that the browser will not jump when the image is downloaded and rendered. The styling is always done in the CSS, (eg img {width: 10em, height:auto}, or whatever). In short, the width and height attributes have nothing to do with the sizing of the displayed image. It is really worth spending the time and checking the links I posted above. There's a huge misconception in this topic (I also used to believe the wrong thing for way too long)
Labels |
Added:
?
NPM Resource Changed
Removed: ? |
Can someone retest this please
your wish is my command
I have tested this item
I have tested this item
@dgrammatiko is this right by you now?
It’s fine
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-11-01 13:23:16 |
Closed_By | ⇒ | richard67 | |
Labels |
Added:
?
Removed: ? |
Thanks
Unfortunately, I cannot see changes ...
The logo is a 75x75px PNG image.