Logo Size and Retina-Ready Logos

• 

  rwstonebeta · Member · Nov 20, 2015 at 4:12 am

  • Copy link
  • Add topic to favorites

  Hi, there.

  I’d like my logo to be crisp on retina screens.

  From what I understand, the general suggestion is to upload images at twice the resolution, assign image sizes in CSS, and let WP and the browser do the rest.

  Is there a way to set the size on a logo, while maintaining the connection to the high res version?

  I’m using the Sela theme right now. If I rely on the theme’s max logo size, the logo is too big on every device (415×380). However, if I scale the logo image, I lose the retina potential.

  Thanks for any help!

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Nov 20, 2015 at 4:03 pm

  • Copy link

  Hi there. Would you be willing to make your site public temporarily so I can check it on a retina iPhone and iPad? Is the current size of your logo (200 by 183) the size you would like it to appear?

• 

  rwstonebeta · Member · Nov 20, 2015 at 5:39 pm

  • Copy link

  Hi, Kathryn.

  My site is public temporarily.
  I set the logo width to 140. That’s about where I’d like it.

  The question is theoretical as much as practical.

  Thanks,
  Rebecca

• 

  kathrynwp · Staff · Nov 20, 2015 at 6:45 pm

  • Copy link

  Thanks for doing that. I double-checked with our developer and right now it’s not possible to upload a larger logo for retina but reduce its size on some devices without custom CSS, which is available with the Premium or Business plan.

  Allowing a more retina-friendly logo may be something altered in Sela in the future, but right now it’s not an option that’s available.

• 

  rwstonebeta · Member · Nov 20, 2015 at 7:05 pm

  • Copy link

  Hi, Kathryn.

  Not the answer I wanted, but I appreciate your help.

  It’s not a Sela-specific issue, but I’d love to see it as an option at some point.

  Thanks again,
  Rebecca

• 

  kathrynwp · Staff · Nov 20, 2015 at 7:21 pm

  • Copy link

  You’re welcome.

  It’s not a Sela-specific issue, but I’d love to see it as an option at some point.

  Some themes do allow you to upload a logo twice as large as what gets displayed on the front end, so this would need to be modified on a per-theme basis.

• 

  rwstonebeta · Member · Nov 20, 2015 at 7:30 pm

  • Copy link

  Do you know an example of a free wordpress.com theme that behaves that way?

  (Don’t do research: It just sounded like you might know off the top of your head.)

• 

  kathrynwp · Staff · Nov 23, 2015 at 5:58 pm

  • Copy link

  Gateway is a theme that works that way. The site logo upload size is 300 by 300px:

  add_image_size( 'gateway-site-logo', '300', '300' );

  …and then the CSS restricts the display to a maximum of 150px high:

  .site-logo {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
  }