User login

How to do graphics in a sidebar not the Drupal way

Note the title said NOT the Drupal way. That means this is a cautionary tale of how NOT to add changing promotional graphics to your site.

In a local checkout of the repository:

cd themes/example/images/home/
svn add example_graphic_one.gif
svn add example_graphic_two.gif
sudo svn commit -m "new graphics for front and story pages"

Note that this site is incorrectly putting its custom theme in /themes, rather than /sites/default/themes (or /sites/something/themes).

On production:

cd httpdocs/themes/example/images/home/
svn status -u
svn update

... where the svn status -u check politely showed just the two graphic files we cared about, and nothing unexpected and potentially site breaking.

Now this is the scary part, and wherein the use of either the theme layer or a content management system is destroyed by combining the two for one display purpose:

<p><a href="/earthkeepers" id="earthkeeper_hero_contest"><img src="/themes/example/images/home/old_graphic_1.jpg"></a><br />  <br /><a href="/rippledemo" id="learn_about_the_ripple"><img src="/themes/example/images/home/ripple.jpg"></a></p><p>&nbsp;</p>

<p><a id="earthkeeper_hero_contest" href="/earthkeepers-int"><img src="/themes/example/images/home/old_graphic_2.jpg" alt="" /></a><br />  <br /><a id="learn_about_the_ripple" href="/rippledemo"><img src="/themes/example/images/home/ripple.jpg" alt="" /></a></p><p>&nbsp;</p>

So these are the images being changed.

It's just a matter of changing the paths, the names, from old_graphic_1.jpg to example_graphic_one.gif

Users, administrators, editors really should not be in a place of editing something where they can change a CSS id or class, and of course committing changing graphics to the theme section of the repository makes no sense if you really want to manage them through the UI.

Dan will write soon about a method that leverages Drupal to allow you to add and change promotional graphics without editing a custom block or writing any HTML, let alone committing to the repository, and allows the styling of the graphic (the assigning of the id and the definition) to be done by the theme. Because that's the way it should be.

UPDATE: Dan's approach

Here's what I propose,

Basically a system to administer the block area graphics and where they link to using drupal. This is really drupal's bread and butter in the way it let's you do things like this.

So, for block graphics like the "Got [Drupal]" one in the right sidebar. I propose adding a new content type called something like "sidebar block graphic". The process to add or change would be as simple as logging in, going to 'Create new sidebar block graphic', and once there uploading a picture through the form (which would resize, crop as necessary to fit the space in the sidebar automatically) and setting the link destination to allow for it to be a link to another page. That's all!

There are many advantages to this, beyond how easy it makes editing the site structure. With this method you could even have 3 or 4 images with links that could be set to show up in that block, either randomly, or on certain pages. We could even set it up so that they fade in and out from one to the next, and cycle through a few that you set. There are many possibilities, the point is really to have the proper framework in place that will let you do it the drupal way! or is that the agaric way? :P

Under the hood, I think that means a View set to show the latest "sidebar block graphic", themed to include a link and whatever else is necessary.



Coming Soon!

How to do sidebar graphics the Drupal way!

In a nutshell:
- new content type
- maybe a new block region
- some imagecache config
- some views config
- possibly innerfade and/or nodequeue
- some css

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>
  • Lines and paragraphs break automatically.

More information about formatting options

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