Jump to content
Sign in to follow this  
rpacker

place image with image map inside Site Branding section

Recommended Posts

rpacker

Is there a straightforward way to place an image with image mapping inside a Site Branding section for placement in the header. I have already successfully worked with image mapping in Wordpress, so I just need to do this, I imagine, inside the child theme. I am not a wizard at coding so I would appreciate some help! Thanks.


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Since this will involve child theming (and you're just starting to learn about it), please refer to the last topic you posted if you haven't already. I responded there with a brief explanation about what the child theme (PlatformBase) is for and what you're planning on doing is exactly what activating PlatformBase is for. In order to add the image map inside the site branding section, you need to be familiar with hooks (explained in a tutorial here: www.pagelines.com/docs/base-child-theme). Basically, a hook is implemented in one of the child theme files using various parameters to specify where in the layout you want your image map to be. Once you've created the hook, the image map can be put inside it. This is a very short way of explaining it to help you get a general idea, but the video tutorial in the base child theme doc I linked here earlier goes into specifics.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rpacker
Thanks for the background info, I understand the concept and theory but not the practice. I can generate the html in dreamweaver, I have it working inside the Wordpress editor, but I don't know where I would place the html inside the child theme code. The hooks still seem very abstract to me and I just need more specific advice.

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker
I have noticed there are some genius programmers on this forum. Can anyone push this along for me?

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Where in the WordPress editor do you have it working? If you would much rather have a Pro implement the hook with the image map you've generated, please contact one of the developers here: http://pagelines.com/pros. If you're willing to take a stab at it, I can provide more specific instructions and another reference for info.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rpacker
We have two threads going! I have it working in a default template page, and it works great, here is the code again:

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker
Catrina, if you can help me with this I will be forever grateful. I am sure I can do it if I know where to place the code in Platform Base.

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker
Here is the page where I have it working. In the image of the film slate in the main content area, if you click on "The Post Reality," it goes to one URL, and if click on "Scene" it goes to another. http://www.thepostreality.com/test/image-map/ Please excuse the look of the site, I am still in testing mode and am just learning all the various sections and have the layout wildly color coded so I can learn where everything is. Thanks!

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
The first step is determining which hook you need to use. There's a list of hooks located in PlatformPro (on the left side) > Template Setup on your Dashboard. Depending on where you want a site element to be, you want the right hook to use so that it's positioned in the right place. Basically, hooks determine where a site element is placed. You already know that you want this image map to appear in the site branding section, so the hook should be [b]pagelines_inside_top_branding[/b] in the Site Branding section. I found this hook by selecting the "Site Header" template area from the dropdown menu in Template Setup and clicking "Advanced Setup" in the "Site Branding" section. Does that make sense so far?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Danny
@rpacker I've accepted Catrina's answer, until you need further assistance.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rpacker
Thank you, I can see how you would find the appropriate hook, what do I do with it? I thought I might find it in functions.php, but I don't see it. What is the next step? PS: I don't think I need an explanation of every detail, but a list of all the steps required to do this would be much appreciated.

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker
@Danny, I see you are online, can you help me with constructing an image map in the Site Branding section as per this thread? Thanks! Randall

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Kate
Hooks can be found on Settings->Template Setup, in the section you want to modify. For instance, if you were to choose "Post Content Area", you'll notice there's a button that says "Advanced Setup". If you click that, you'll find a list of hooks.

Share this post


Link to post
Share on other sites
rpacker
Thanks Kate, I have already found the list of hooks in the Site Branding section: pagelines_inside_top_branding, but I have no idea how to proceed, I have never used a hook. My understanding is I need to place the image mapping html code somewhere inside a php document located in the Base CSS files accessing it through the Wordpress editor. Where and how is what eludes me at this point.

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Jenny
I am not a programmer by any means, but I [i]believe[/i] you place the code inside the functions.php in PlatformBase. I think there are general instructions in the file itself that tell you have to perform different actions.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rpacker
Thanks, but this is exactly where I am stuck. I don't know how to implement the correct hook or action or whatever comes next. I think if I had one experience doing this I would have no problem. I have looked at the examples, but I don't know how they relate to what I am trying to do. This is what I get for being an artist and trying to avoid programming...

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
kastelic
Here's an example of using a hook. This must go in platformbase/functions.php (anywhere in that file). [code] add_action('pagelines_inside_top_branding','myhook'); function myhook(){ echo "findme"; } [/code] The "myhook" is the name of the function and can be anything you choose. The pagelines_inside_top_branding is the hook you are using, and determines where on your site the function can appear. Inside the function (echo "findme";) you can have anything at all written in php. If you want to display HTML close the php tag, write your HTML and then open the php tag again like this: [code] add_action('pagelines_inside_top_branding','myhook'); function myhook(){ ?>

This had better work!

I don't see why it wouldn't

Share this post


Link to post
Share on other sites
rpacker
Brilliant! That's all I needed, it worked perfectly. Once you see how simple it is to place a hook, anything is possible. Thanks!!

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×