How to Put Multiple Graphics in Header?
At http://davidswanson.org I've put the cover images of books I've written into one big graphic as wide as the site in the header. Of course everyone suggests I make the books clickable links. But how can I do that?
I'm in version 6 with the theme Marinelli which has a graphics style sheet that includes this:
#header {background: #000033 url(img/banners/rotate.php) no-repeat 0px 0px; /*rotates images in the banners folder */}
I have a number of images in the banners folder along with the rotate php document, and they all take turns showing up. I don't much care about keeping that rotating image feature, although ideally it'd be nice.
What I want to know is how to either make separate areas of the images into links, or how to include multiple images in the header, so that each book is a separate image, and how to make those images into links.
Even pointing me in approximately the right direction would be very much appreciate.
Please post here and let me know that you did so at david at davidswanson dot org
THANKS
=-=
to make the books clickable links I think you will have to bypass css and hardcode them into the page.tpl.php file or use some php in some way at the theme layer to display the images and wrap them in a link.
thanks that's encouraging
in that it suggests there's a way to do it and somebody knows what it is, but i'm not sure i do
here's what's in the page.tpl.php file:
<div id="header">
<?php if ($site_name) : ?>
<?php if ($is_front) : /* if we are on the front page use <h1> for site title */ ?>
<h1 class="sitetitle">
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<?php print $site_name ?>
</a>
</h1>
<?php endif; ?>
<?php if (!$is_front) : /* otherwise use <p> and let node title use <h1> for SEO */ ?>
<p class="sitetitle">
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<?php print $site_name ?>
</a>
</p>
<?php endif; ?>
<?php endif; ?>
<?php if ($site_slogan){?>
<p class="slogan"><?php print $site_slogan ?></p>
<?php } ?>
</div>
http://davidswanson.org
http://afterdowningstreet.org
=-=
duplicate post removed, in future use code tags.
use standard HTML to pull in your images in the header div or create an entirely new div under header. Ultimately no one else can do this for you as they don't know the names of your images, or where they are located.
like this?
I can very easily post images somewhere or put them in a file on the server and write img src= with the location of the image, followed by another, and another with a href= links as well
But do I just write that line and stick it in here somewhere?
what confuses me is that I don't see any indication here to use the images that are currently used; if i write something new here will that simply override the current action that doesn't appear here?
Any chance I can take the folder of rotating banners and make them narrower, and add a second and third graphic to the right of them in the header?
http://davidswanson.org
http://afterdowningstreet.org
=-=
you can do what you wish. It's a theme and you can theme it any way you want.
therefore you can work within the confines of what is already there or rip it out and build your own.
rotating banners, see the marinelli theme and inspect how they've accomplished the task. employ in your theme.
with regards to images, if you want something dynmaic and not static you will have to look into using blocks or some php in some capacity. If you just want static images, then yes, you can simply uplad the image and write the proper HTML in your page.tpl.php
my suggestions is to create a test site, that is a duplicate of your production site.
after that is done, tear apart the theme, break it, learn from it, build it
thanks for the help
and i'm sure it would be helpful if I had the slightest idea how to do any of the things you suggest :-)
simply adding HTML code in the doc discussed above had no effect on the site
http://davidswanson.org
http://afterdowningstreet.org
=-=
did you refresh the cache?
what HTML did you use?
did you view the source of the rendered page to locate whatever it was that you added?
yes i refreshed cache if you mean in the browser
going to try to create one image with links in it and put it and the accompanying html doc in the folder where images now are, removing them
may be easier than attempting to figure out the other way
http://davidswanson.org
http://afterdowningstreet.org
=-=
administer -> performance
database cache is what I was referring to not browser cache.
I'll try that
I've managed to create an image with hotspots (links)
http://davidswanson.org/sites/default/themes/marinelli/img/hotbanner/hot...
and
http://davidswanson.org/sites/default/themes/marinelli/img/hotbanner/hot...
If I put this in the graphics.css doc:
#header {background: #000033 url(img/hotbanner/hotbanner.jpg)}
then I get the image with no links
If I put this:
#header {background: #000033 url(img/hotbanner/hotbanner.htm)}
then I get no image and no links
What should I put to get the image to show up accompanied by the links?
http://davidswanson.org
http://afterdowningstreet.org
Brushing up your "HTML image
Brushing up your "HTML image maps" knowledge would help with static pages. But I am not much of a PHP guy.
Good luck!
_
Why would you be duplicating the image map graphic with css? The image for an image map needs to be an img tag with the map attribute. There shouldn't be any css for the image (unless you want to style the img tag itself).
_
Don't be a Help Vampire - read and abide the forum guidelines.
If you find my assistance useful, please pay it forward to your fellow drupalers.
Remarkably
I don't think there's a single word in what you wrote that I understood, although some of them -- like "you" and "the" -- I can understand in isolation. Someone else has suggested that editing the page.tpl document is what's needed. I understand that, but of course not HOW to edit it.
http://davidswanson.org
http://afterdowningstreet.org
=-=
trial and error teaches you the most.
open page.tpl.php
above the header div , create your own. add the HTML to call an image
save the tpl.php
place it and the image back in your theme
pull up in a browser
take a look
play
its difficult to be explicit, because we don't know the name of your image. We don't know where they are stored. so on so forth.
google HTML Tutorials and arbitrairily add HTML to your theme see what it does
_
From what I can see in the source, your html looks ok-- you don't need to add ANY css (you mention adding css to graphics.css above at http://drupal.org/node/459488#comment-1581372).
Other than that, VM is correct as always-- it's almost impossible to be more specific without further details. And if you don't know what an 'image map' is, even though you're using one in your page.tpl.php file, it would seem you need to do some additional reading. That's not meant as a criticism but a simple fact-- it's really hard to assist someone when then they don't have at least a basic understanding of what they are trying to do.
_
Don't be a Help Vampire - read and abide the forum guidelines.
If you find my assistance useful, please pay it forward to your fellow drupalers.