High Res logo for retina display

Hello,

When I uploaded my png logo it looks fine on screen but looked fuzzy on an ipad with retina display. I uploaded a high res version (about 1000 pixels wide) and forced the size down to 245. I realize the filesize is a bit bigger but it looked great on an ipad.



After an update to 3.01 the logo reverted back to full size. It is 1000 pixels but cropped inside a 245x75 pixel container.

I've gone through every change log and style sheet and can't figure out how to get the logo resized.



Any advice?

Basically, I intentionally want a high res image to be used for my logo. 1000 pixels wide forced to fit within 245 pixel container.



David

Hardcode height and width values for the logo in your skins manifiest.ini. Why you would intentionally make your site slow, I don't know, but that's how I'd do it if I wanted to.

Here is what is showing in the manifest file:



[Customer_logo]

filename = “casefoundrylogo2x.png”

width = 245

height = 75



The actual logo measures 1000 x 307

http://www.casefoundry.com/skins/basic/customer/images/casefoundrylogo2x.png





Also, I understand the concern about file size. We spent time optimizing the logo and it is only 14k. Granted, a smaller 245 pixel wide logo would only be about 6k. We felt the tradeoff was acceptible for our logo. Our focus is on mobile cases so how the logo appears on retina screens is very important. Plus with local caching, it's not a big deal. We're not using high res images for anything other than our logo.



The thing is… I actually had this done correctly before and forgot how I did it. I know I didn't edit the manifest.ini file though as I've never looked at that file before.


[quote name='StellarBytes' timestamp='1358784379' post='153258']

Hardcode height and width values for the logo in your skins manifiest.ini. Why you would intentionally make your site slow, I don't know, but that's how I'd do it if I wanted to.

[/quote]

Finally figured it out… Spent all my time combing through stylesheets.

For anyone curious, I edited the skins/basic/customer/blocks/static_templates/logo.tpl



I changed this:

```php




```

to this:
```php



```

Basically, I added an attribute of background-size: 245px; (but I used the dynamic width parameter from the manifest file so that it would automatically match.
Then I had to clear the cache.

Thank you! This is just what I was looking for :)

[quote name='IdeaDirect' timestamp='1358790452' post='153266']

Finally figured it out… Spent all my time combing through stylesheets.

For anyone curious, I edited the skins/basic/customer/blocks/static_templates/logo.tpl



I changed this:

```php




```

to this:
```php



```

Basically, I added an attribute of background-size: 245px; (but I used the dynamic width parameter from the manifest file so that it would automatically match.
Then I had to clear the cache.
[/quote]

This code looks identical to the change, no?

[quote name='automatednow' timestamp='1410753552' post='192214']

This code looks identical to the change, no?

[/quote]



Look closely this is added to line of code: [QUOTE] [color=#000000][size=2]background[/size][/color][color=#666600][size=2]-[/size][/color][color=#000000][size=2]size[/size][/color][color=#666600][size=2]:{[/size][/color][color=#000000][size=2]$manifest[/size][/color][color=#666600][size=2].[/size][/color][color=#660066][size=2]Customer_logo[/size][/color][color=#666600][size=2].[/size][/color][color=#000000][size=2]width[/size][/color][color=#666600][size=2]}[/size][/color][color=#000000][size=2]px[/size][/color][color=#666600][size=2];[/size][/color][size=2] [/size][/QUOTE]