Need help? Check out our Support site, then


WordPress.com Forums » Support

Multiple Hyperlinks in Header Image

  1. karinagaal
    Member

    I want to put multiple hyperlinks into my header image. Am I able to do that for free or do I need to buy an upgrade? I'm using the theme Andrea because I need a flexible header size. Ultimately I want just one image on my home page and only when the viewer clicks one of the hyperlinks in the header image will they be taken to other pages of my WordPress site.
    Is this even possible? I need to do it for an assignment for uni. Please help!! :/

    The blog I need help with is karinagaal2.wordpress.com.

  2. thistimethisspace
    Member

    You can't put any links in your header image.

  3. justpi
    Member

    It's possible but it's complicated.
    Why do you need a flexible header size?
    Did you notice that the flexible option in Andrea is semi-flexible (flexible within a minimum and a maximum width)? Did you notice that the header image you have added gets distorted if you drag the browser window to make it narrower?
    "Ultimately I want just one image on my home page": a) With or without a sidebar? b) Why should it be the header image and not an image in the content of a page?

  4. karinagaal
    Member

    @justpi, thanks so much for you're response!
    I only need a flexible heard so the entire image is visible. If there is another way of doing this, then I am happy to try a different theme. Which do you suggest?
    I never noticed the distortion until I tried changing the shape of the window, I don't like that at all!
    I'd prefer the single image without a side bar but if that's not possible I'm ok with having it there if necessary.
    I guess the main image doesn't have to be in the header, I just assumed it was the easiest way to do it. Do you have any suggestions?

  5. justpi
    Member

    1) "I only need a flexible [theme] so the entire image is visible."
    I don't understand this: most themes are designed to fit in most screens. And anyway if you want to have multiple links they have to be defined via specific points relative to the whole theme or the image, so the width needs to be fixed.

    2) As I implied in my previous reply, there are two ways you can do what you're looking for. Method one is to add links in front of the header image via elaborate coding in a Text widget. You can see an older case I helped with here:
    http://en.forums.wordpress.com/topic/image-map-for-my-header?replies=13#post-868465
    Check the result:
    http://hearinglosscentralma.wordpress.com/
    (Despite its look, the purplish section is the header image.)

    Method two is to add a full width image as the content of a static page, and use image mapping. You can do that here:
    http://www.isdntek.com/tagbot/imap.htm
    Method two is less of a headache, and you can do it yourself instead of waiting for me to devise the code.

  6. justpi
    Member

    Method one requires a Text widget, so if you don't want a sidebar you need a theme with bottom widgets. See here:
    http://wpbtips.wordpress.com/2011/02/26/sidebars-and-other-widget-areas/
    You can use one of the themes I list under "Bottom and/or header only", or one of the themes I list under "Sidebar(s) plus bottom and/or header" if it's also listed under "Sidebar optional" or under "No sidebar on static pages or single posts" (link).
    But it also has to be a theme that's listed under "Works perfectly in" or "Works well in" here:
    http://wpbtips.wordpress.com/2009/12/15/position-absolute-pt-2/
    (Enough of a headache already?)

    For method two you can use any of the themes I list under "Bottom and/or header only" or under "No sidebar on static pages or single posts".
    There are also some newer themes you could use, but I've stopped testing and listing (see the red note in my sidebar). You can check the newer themes here:
    http://theme.wordpress.com/

  7. karinagaal
    Member

    This is wonderful! Thank you. I'm going to go with option 2 as I am not very savvy when it comes to this sort of thing.
    I have changed my theme and have uploaded an image for the static page. I went to the Image Mapping site you suggested but it wont accept my image. Is there something I have to do to make that work? It says the image needs to be hosted prior to using on their site, I assumed that my image was, purely because it was already on my WordPress site, but maybe that's not the case?
    That's as far as I've got. Sorry to be such a newbie.

  8. justpi
    Member

    Assuming you're talking about this image:
    http://karinagaal2.files.wordpress.com/2012/12/title2.jpg
    it won't do because it's too large (it's 5184px wide while most users have screens no wider than 1200px and most themes are even narrower). For image mapping you need an image that will be used in its original size: can't be done if the image gets downsized by the theme.

    Bt first you need to select a different theme: Duotone works in a unique way that won't do (the image is showcased above the regular content area and cannot be manipulated).
    Once you select the theme, you need to use an image editing application to downsize the image to the right pixel width for that theme. (If you can't do that, I can do it for you.)

  9. karinagaal
    Member

    Yes, I am talking out that image. Too big, ok, I can easily change that in photoshop but I am having trouble choosing a theme. I haven't found one that seems to suit what I need. All I need is for the static page to be one big image as the whole page, no sidebars or headers or Facebook sharing buttons, just a photo. Is that even possible?
    Sorry to ask so many questions, you've been such a great help.

  10. karinagaal
    Member

    Also, I just resized the image to a width of 1024 pixels and the Image Mapper site still wouldn't take it. I'm beginning to think I could be a lost cause...

  11. justpi
    Member

    1) Ok I'll suggest appropriate themes. Does "no headers" mean no blog title?

    2) You can easily disable the sharing buttons and the Like button in Settings > Sharing (for the whole blog), or by editing the page and unchecking the options in the Shares and Likes module of the page editor (for that particular page).

    3) What do you mean by "the Image Mapper site still wouldn't take it"? How are you trying to make it take it?

  12. karinagaal
    Member

    Great!
    1) Umm, no header as in if there is a blog title I want it over the top of my big image so that the image can take up the entire window.

    2) Wonderful!

    3) Well I copy and paste the image URL into the site, press the button (like the very clear instructions tell me too) and no picture comes up, even once I've downsized the image.

  13. justpi
    Member

    So, appropriate themes (although by now you've found one of them): 'normal' themes that can give you the widest fixed-width results are Fusion, Modularity Lite, Nishita and Retro-fitted. In all of them you can eliminate the sidebar:
    Fusion - you select the fixed option and the no-sidebar layout in Appearance > Theme Options.
    Modularity Lite - you select the no-sidebar template in the page editor.
    Nishita - you select the photoblog layout in Appearance > Theme Options and you don't add any sidebar widgets in Appearance > Widgets.
    Retro-fitted - you simply don't add any sidebar widgets in Appearance > Widgets.

    The widths you get this way are:
    Nishita 1024px
    Fusion 964px
    Modularity Lite 950px
    Retro-fitted 930px

    Other things to note:
    In Modularity Lite and Nishita you can select dark or light color scheme (Appearance > Theme Options).
    In Modularity Lite, Nishita and Retro-fitted you can change the background color (Appearance > Background).
    In all four you can remove the top menu if you wish.

    And I suppose you don't want a comment box on the page. If so, Pages > All Pages: hover over page title, click Quick Edit, uncheck "Allow Comments", click Update.

  14. justpi
    Member

    Once you've settled on the theme, you resize a copy of the image to the exact pixel width I mention above, upload it to your blog via Media > Add New, copy the file URL, paste the URL in the Image Mapping webpage, work out the links/areas, get the code, paste the code in the Text (=code) editor of the page.

    The site is working fine (and even if it didn't, I could create the code for you). a) What's the URL you tried to use? b) What browser and version are you using?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.