? ? NPM Resource Changed Pending

User tests: Successful: Unsuccessful:

avatar RickR2H
RickR2H
24 Aug 2021

Pull Request for Issue #35314

Summary of Changes

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.

Testing Instructions

See Issue #35314 to reproduce the issue. after applying the PR the issue is fixes,

Actual result BEFORE applying this Pull Request

Custom logo is stretched if the banner image is smaller the the original Cassiopeia image.

Expected result AFTER applying this Pull Request

Custom logo has the correct size an scales nicely on mobile

Documentation Changes Required

No

avatar RickR2H RickR2H - open - 24 Aug 2021
avatar RickR2H RickR2H - change - 24 Aug 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 24 Aug 2021
Category Front End Templates (site) NPM Change
avatar mariantanase
mariantanase - comment - 24 Aug 2021

Unfortunately, I cannot see changes ...
The logo is a 75x75px PNG image.

Screenshot 2021-08-24 at 12-03-38 Joomla Patch Tester - Joomla 4 Demo - Administration

Screenshot 2021-08-24 at 12-07-03 Home

avatar alikon
alikon - comment - 24 Aug 2021

this cannot be tested with com_patchtester

you can use the Prebuilt packages
image

avatar mariantanase
mariantanase - comment - 24 Aug 2021

I don't know how to test patches with prebuild packages.

avatar PhilETaylor
PhilETaylor - comment - 24 Aug 2021

Click show all checks -> Click details next to "Download — Prebuilt packages are available for download."

Then download one of the zip files - and install it just like you would a fresh install of Joomla.

Screenshot 2021-08-24 at 11 32 54

avatar mariantanase
mariantanase - comment - 24 Aug 2021

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

Screenshot 2021-08-24 at 12-48-39 Home

avatar RickR2H
RickR2H - comment - 24 Aug 2021

@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

avatar mariantanase mariantanase - test_item - 24 Aug 2021 - Tested successfully
avatar mariantanase
mariantanase - comment - 24 Aug 2021

I have tested this item successfully on fdc5a13


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

avatar chmst chmst - test_item - 24 Aug 2021 - Tested successfully
avatar chmst
chmst - comment - 24 Aug 2021

I have tested this item successfully on fdc5a13


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

avatar chmst chmst - change - 24 Aug 2021
Status Pending Ready to Commit
avatar chmst
chmst - comment - 24 Aug 2021

RTC


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

avatar RickR2H
RickR2H - comment - 24 Aug 2021

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

avatar wilsonge
wilsonge - comment - 24 Aug 2021

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.

avatar RickR2H
RickR2H - comment - 24 Aug 2021

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.

avatar C-Lodder
C-Lodder - comment - 26 Aug 2021

Remove the width defined in the CSS, and use em (not rem) as a unit of measurement inside the SVG itself.

avatar RickR2H RickR2H - change - 26 Aug 2021
Labels Added: ? ?
avatar RickR2H
RickR2H - comment - 26 Aug 2021

@C-Lodder I converted the px to em units which is a good option I think.

avatar C-Lodder
C-Lodder - comment - 26 Aug 2021

Just a couple of things to take into consideration with this change:

  1. When using alternative image formats (PNG, JPG, etc), the user will need to ensure tthe image is the correct size when uploading. If you upload a 800x200px image, the template's CSS will NOT resize it for you.
  2. When using SVGs, the width will need to be set inside the SVG file priors to uploading.
avatar RickR2H
RickR2H - comment - 26 Aug 2021

Agree... a bit common sense is needed if you build a site ;)
We could set a max width if that's preferred? Setting a large (full width) banner image can be nice on some cases...

Banner image will respect the max width of 100%

header-image-scale

avatar RickR2H
RickR2H - comment - 26 Aug 2021

@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)?

avatar dgrammatiko
dgrammatiko - comment - 26 Aug 2021

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)

avatar RickR2H RickR2H - change - 26 Aug 2021
Labels Added: ? NPM Resource Changed
Removed: ?
avatar wilsonge
wilsonge - comment - 9 Sep 2021

Can someone retest this please

avatar brianteeman
brianteeman - comment - 9 Sep 2021

your wish is my command

avatar brianteeman brianteeman - test_item - 9 Sep 2021 - Tested successfully
avatar brianteeman
brianteeman - comment - 9 Sep 2021

I have tested this item successfully on 1746574


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

avatar RichardR2H RichardR2H - test_item - 9 Sep 2021 - Tested successfully
avatar RichardR2H
RichardR2H - comment - 9 Sep 2021

I have tested this item successfully on 1746574


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

avatar wilsonge
wilsonge - comment - 17 Oct 2021

@dgrammatiko is this right by you now?

avatar dgrammatiko
dgrammatiko - comment - 17 Oct 2021

It’s fine

avatar richard67 richard67 - change - 1 Nov 2021
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: ?
avatar richard67 richard67 - close - 1 Nov 2021
avatar richard67 richard67 - merge - 1 Nov 2021
avatar richard67
richard67 - comment - 1 Nov 2021

Thanks

Add a Comment

Login with GitHub to post a comment