By i15 on

Hey!

Have a question about logos for high resolution screen (Retina, for example)

I use Corolla theme and logo with size of 64x64 looks bad on Retina display. I upload that through LOGO IMAGE SETTINGS on the theme setting page. But if I upload a bigger logo (for example, 256x256), it just looks big on a half screen. It does not small and sharp :( It is just big.

I am just super confused. How can I upload a big logo (128x128 or 256x256) to make it looks good on high resolution display?

Thank you!

⋅ Categories: Drupal 7.x

Comments

Jaypan’s picture

Jaypan commented

Set the height and width attributes of the image tag to be half the actual height and width of the image.

So if your logo is 128x128, you would use:

<img src="/path/to/logo.png" height="64" width="64" alt="logo" />
i15’s picture

i15 commented

Can you please explain me that?

I have to add/replace that to some theme file?

Which one?..

Jaypan’s picture

Jaypan commented

You'll need to alter the existing code for the logo. It will be in your theme. Probably in a file called page.tpl.php, but maybe somewhere else.

i15’s picture

i15 commented

Yes, this file is.

I just don't really understand php :(

<div id="header-wrapper">
      <div class="container clearfix">

        <header class="clearfix<?php print $site_logo ? ' with-logo' : ''; ?>" role="banner">

          <?php if ($site_logo || $site_name || $site_slogan): ?>
            <div id="branding" class="branding-elements clearfix">

              <?php if ($site_logo): ?>
                <div id="logo">
                  <?php print $site_logo; ?>
                </div>
              <?php endif; ?>

              <?php if ($site_name || $site_slogan): ?>
                <div<?php print $hgroup_attributes; ?>>

                  <?php if ($site_name): ?>
                    <h1<?php print $site_name_attributes; ?>><?php print $site_name; ?></h1>
                  <?php endif; ?>

                  <?php if ($site_slogan): ?>
                    <h2<?php print $site_slogan_attributes; ?>><?php print $site_slogan; ?></h2>
                  <?php endif; ?>

                </div>
              <?php endif; ?>

            </div>
          <?php endif; ?>

          <?php print render($page['header']); ?>

        </header>

      </div>
    </div>

Probably, i need this part:

<?php if ($site_logo): ?>
<div id="logo">
<?php print $site_logo; ?>
</div>
<?php endif; ?>
i15’s picture

i15 commented

m?...