Boost: Compact logo in top nav bar is blurred

Boost: Compact logo in top nav bar is blurred

by Derek Chaplin -
Number of replies: 6

Images used for the Compact logo on the upper left of the nav bar appear blurred even when matched exactly to the CSS display size. It appears to be a Boost issue as the same thing happens with the latest Classic & Fordson themes. However, if I use the latest Moove theme, the logo image quality is much clearer. If I use the image in a the content area of a Page, Lesson, Book, etc, it looks clear and sharp.

Example: Image on the left is screenshot of logo with Moove theme. Same image using Boost is on the right. No matter whether I match the image size exactly to the CSS image height or using a 2 or 3 times larger image, the results are the same.

Running Moodle 3.8.2+

Average of ratings: -
In reply to Derek Chaplin

Re: Boost: Compact logo in top nav bar is blurred

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
I am not sure. I created a quick logo, popped it into my experimental Moodle, and things seem to look good. I am using Boost. I experimented with jpg and png files. I am not sure what your logo format is.

Here are some of the files that I used.

Average of ratings: -
In reply to Rick Jerz

Re: Boost: Compact logo in top nav bar is blurred

by Derek Chaplin -
Hi Rick,

Thanks for checking it. I get the same results as you when I use the images I sent you; it was actually a crop of the full logo (attached).
I think I know what is happening, although i haven't checked the PHP code. If you inspect the CSS of that compact logo it appears that  a 100x100 pixel image is expected. So I  opened by original 164x40 pixel logo image in an image editor resized it to 100px wide and then resized it to the display settings I was using (40 px high) and voila! the blurry image is duplicated.

So I think there must be some code that resizes the compact code to 100px wide when it is uploaded. I've seen this behavior in WordPress. 



I've attached the original image.

cheers,
Derek
Average of ratings: -
In reply to Derek Chaplin

Re: Boost: Compact logo in top nav bar is blurred

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Yep, seems a bit odd. I played around with this and find that Moodle is pretty fussy about this image. I am not sure what its logic is. I even tried doing some of this in Photoshop. So far, it's a challenge.
Average of ratings: -
In reply to Rick Jerz

Re: Boost: Compact logo in top nav bar is blurred

by Derek Chaplin -
I've tried it with a number of images, and get the same blurring if the image width significantly exceeds 100px.
Average of ratings: -
In reply to Derek Chaplin

Re: Boost: Compact logo in top nav bar is blurred

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
I wonder if it has something to do with as the text is made smaller, it just naturally has fewer pixels to work with. For example, if I take this image below and simply make it smaller, such as 100x25, it gets blurred. There just are not enough pixels to make it smooth.

Attachment derek450x114.png
Average of ratings: -