Image Map in Header « ThemeShaper Forums

ThemeShaper Forums » Thematic

[closed]

Image Map in Header

(9 posts)

Started 11 years ago by duckdog
Latest reply from ScottNix
This topic is resolved

Tags:

duckdog
Member
Hi, I'm using Thematic and have just created my first child theme. http://savepointreyeswilderness.org/

I found code that was helpful in allowing me to upload a header image as a foreground image rather than as a background. But since the image includes a facebook icon, I need to use an image map in order to have that part of the header image clickable to a facebook page. Which brings me to the brave new world (for me) of writing actions. I made an attempt, below, which I added to my child theme's functions.php file, but it didn't work. I don't write PHP, and am not sure how to proceed. Should I be trying to replace html or overwriting it, and if so, how do I communicate that through my action?

I would love help with this specific problem, and would also really appreciate a referral to a good source for educating myself in this area. In the past I've always hired people to help me through the "backend" but I'm excited about getting my hands dirty myself now!

Here's what I tried:
```
// ---------- Adding image map to the header STARTS HERE
add_action('wp_head', 'header_image_map');
function header_image_map() {

<div id="logo-image">
<a href="http://savepointreyeswilderness.org">
<img src="http://savepointreyeswilderness.org/wp-content/uploads/2011/09/header.jpg" usemap="#Map">
</a>
<map name="Map" id="Map"><area shape="rect" coords="904,5,986,122" href="http://www.facebook.com/savepointreyeswilderness" />
</map>
</div>
}
// ---------- Adding the image map to the header ENDS HERE
```
Posted 11 years ago #
ScottNix
Member
I wouldn't even know how to use a image map anymore, as far as I know they are kind of a dead way of doing things.

If it were me I would put a invisible box on top of the image.

Add to your functions.php
```
function childtheme_header_conatainer() {
	?>
	<span class="fb-link"><a href="facebooklink"></a></span>
	<?php
}
add_action('thematic_header', 'childtheme_header_conatainer', 6);
```
Once you have the span in there (inside the branding), you can position it on top of the image.

Add to your CSS
```
#branding { position: relative; }
.fb-link { position: absolute: top: 0; right: 0; }
.fb-link a { height: 50px; width 50px; display: block; background: #ccc; }
```
This is rough, as in I don't want to set it up just to find the 100% correct answer (as far as exact positioning). You will have to adjust the top and right on the .fb-link to fit the box over the bird, and then use adjust the .fb-link a to the correct height and width and remove the background, the background is just there so the box should show up. At the worst, just insert the code and we can help you adjust it if you still have any trouble.
Posted 11 years ago #
duckdog
Member

Thanks, that is a much nicer approach. I've added the code to the style sheet and the functions file, but the fb-link box is positioned underneath the header image, and stretches the entire length of the branding div.

http://savepointreyeswilderness.org/

Posted 11 years ago #
ScottNix
Member
Oh, balls.

There are 2 errors in my css formatting, use.
```
.fb-link { position: absolute; top: 0; right: 0; }
.fb-link a { height: 50px; width: 50px; display: block; background: #ccc; }
```
That will get the box in the top right, it should sit on the image now. ;P
Posted 11 years ago #
duckdog
Member

Thanks a million. That absolutely works! Do you have any suggestions for resources to help me learn enough PHP to dive into the world of writing actions? Or is there some atlas of known actions one can access?

thanks again,
Lisa

Posted 11 years ago #
ScottNix
Member

Starting with Thematic is a good way to pick up PHP, I am a newbie, but just doing things will teach you the most.

One of the most important tips is to pick up on terminology and what to "search" for. This isn't something easily taught, but in your Thematic Theme folder (the original files you aren't suppose to touch) the library/extensions folder you will find the heart of Thematic. If you get good with searching online and in that folder you can do relatively anything quick, most likely you won't be reinventing the wheel and someone else down the line has already needed or had your problem, so searching and knowing the terminology is key to starting out.

A few resources I would recommend are http://developing.thematic4you.com/thematic-development-release/ for the latest development release of Thematic, has quite a few fixes over the 9.7.7 version you get if you download through wordpres.

Also for structure, I find myself referencing http://www.bluemandala.com/thematic/thematic-structure.html quite often to find the name of hooks when trying to figure out the best way to place things.

A good way to learn is also downloading a few child themes and just picking through the functions.php and comparing them to the original Thematic Functions helps a ton too.

And the WordPress Codex has a ton of useful code snippets too.

Posted 11 years ago #
duckdog
Member

Thank you.

Posted 11 years ago #
Rinda Ajib
Member

Hi Scott and Lisa. I just use thematic not long ago and I'm very excited.
I also want to put an imagemap in the header section and already try your tips, but still confuse.
I know this is stupid question: where I put the codes in Lisa's first post? I got syntax error while putting it on functions.php and I don't know where to put on header.php.

Sorry for my english :))

Posted 11 years ago #
ScottNix
Member

Hello Rinda Ajib, don't worry about the English.

The code would go into the function.php inside a Thematic Child Themes folder, the code in the first post shouldn't be used, the solution was on the second post. Image maps are really no longer best practice (except for a few super rare occasions). You might be better off starting a post with what you are trying to achieve and being a little more descriptive.

Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.