User login

Using Imagecache for a theme's user-provided logo

Searched words: 
drupal logo imagecache drupal best practice naming imagecache presets generic sitebuilding best practices define an imagecache in code imagecache exportable

Agaric considers it best practice (meaning we do it occasionally) to keep a logo (the user-uploaded logo), so that the site principal can have its logo swapped out by an administrator, and not only by a developer or themer. Practically, some designs will have the logo so integrated that it should not be swappable, but note that one additional advantage of having a clean and separate logo file is that people can swipe it and display their brand loyalty while linking to you. Or maybe add devil horns to it in MS Paint. Anyway, the point of this informative post is to describe how to use the image set in a theme's settings, but to scale it with imagecache to ensure basic consistency with the theme.

In page.tpl.php, modify the logo section to expect the logo to be a full image, and not just a path. This example is from a Zen subtheme:

      <?php if ($logo): ?>
        <a href="<?php print $front_page; ?>" title="<?php print t('OpenMedia home'); ?>" rel="home" id="logo"><?php print $logo; ?></a>
      <?php endif; ?>

In template.php, insert or add to your _preprocess_page() function a call to theme_imagecache().

<?php
function example_preprocess_page(&$vars, $hook) {
  /* Resize the logo with imagecache, and return image not just path. */
  if ($vars['logo']) {
    // Remove the leading slash, which can (?) break imagecache.
    $logo_path = substr($vars['logo'], 1);
    $vars['logo'] = theme('imagecache', 'examplelogo', $logo_path, 'Example');
  }
}
?>

Imagecache preset names: Use function and location, not size and look

The current recommended best practice is to name imagecache presets for the function they are intended to fulfill, rather than what they are supposed to look like.

Before determining this, i brought the question to the #drupal channel on IRC:

imagecache bikeshed question! Do you give imachecache presets place-where-they-will-be-used names (like feature_thumbnail), size-based names (200x300), or magically come up with a name that's neither place nor size based yet somehow descriptive?

Fox declared an opposition to size-based ones based on experience with designers who kept changing the preset size.

Conclusion: the best practice is to names based on where it will be used, and not try to make this overly generic. There's nothing at all wrong with having a blog_top and an article_top be the same size, or a front_page_list and archive_page_list being the same size. It doesn't waste any resources to have two different presets performing the same function; every image is cached individually anyway. But when we want images on one type of post to be cropped to a different size or shape than another kind of post -- or given a different border or watermark or anything -- or one listing page to have a different size than the other, we'll be glad we made allowance for this up front.

But back to the really important thing: Now a site admin can change the logo for holidays and special days like Google does!

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.