Header Image link to custom URL

  • mbrettell · Member ·

    Hi,
    Our theme is twenty fourteen.
    I’d like our header image to point to a particular page within the site, not the home page.
    I tried following the instructions from https://en.forums.wordpress.com/topic/adding-a-link-to-my-header-image?replies=13.

    I’ve created the image, added it as a text widget to the footer, and added the custom CSS, but the text is still showing in the footer. Appreciate any help! :)

    Thanks
    Michael

    The blog I need help with is: (visible only to logged in users)

  • musicdoc1 · Member ·

    Hi,

    The topic you linked to is a bit old, so I don’t know if the advice currently applies. If it does, then thesacredpath’s comment

    You have to make a transparent PNG image with no background color the exact size of your header image, upload that to your media library, get the URL and insert it into a text widget linked to your home page in the bottom sidebar. Once you have done that, then we would use absolute positioning to move that text widget up and over the top of your header image thus making it clickable.

    indicates that assistance by WordPress.com staff is necessary to move the text widget to the proper place, using “absolute positioning.”

    Note also the following comment by thesacredpath:

    Oh and one other thing, please go to settings > general and temporarily turn off the snow. It generally messes me up when I’m trying to use Firebug to do these sorts of things and can even kill firefox before I get done.

    To call for staff attention, you may add a “modlook” tag to the sidebar of this topic.

  • mbrettell · Member ·

    I contacted WordPress.com support staff to start with – they said to come here because that’s where the CSS experts live.

    I don’t think I need assistance by WordPress.com staff to move the text widget. The thread I referenced suggests that the text widget can be moved using CSS… which makes sense to me, but isn’t working after I tried the CSS in that article.

    I don’t think I have ‘Snow’ turned on – I don’t even see an option for it.

    Can someone please suggest the CSS I should use, or if there’s something else I need to do?

  • musicdoc1 · Member ·

    Michael,

    You’re right. I’ve now read the topic at the link you provided more carefully. Evidently the “absolute positioning” I referred to above is accomplished with the CSS code provided by thesacredpath. However, the code would I think be theme dependent.

    I would still add a “modlook” tag to the sidebar if I were you. A staff member proficient in CSS might be more likely to know the proper code for the theme you are using than a member would.

    The snow option is, I believe, normally added sometime around the beginning of December. It’s not a factor at this time.

    Regards,
    doc

  • mbrettell · Member ·

    OK thanks – I’ve added the modlook tag. Also, the image doesn’t seem to take any notice of the width setting.

  • musicdoc1 · Member ·

    Also, the image doesn’t seem to take any notice of the width setting.

    The relevant instruction by thesacredpath says,

    You have to make a transparent PNG image with no background color the exact size of your header image, upload that to your media library, get the URL and insert it into a text widget linked to your home page in the bottom sidebar.

    If I understand correctly, there should be no width setting, or height setting, in the code. The text widget should contain the following image link code
    <a href="LINK URL"><img src="IMAGE URL" title="" alt="" /></a>
    where the LINK URL is the destination URL, and the IMAGE URL is the URL of the file image (PNG format) which has been made with the exact header image dimensions. In this case, the header image has the dimensions 1260 x 357 pixels. You must create or otherwise obtain an image of that precise size.

  • musicdoc1 · Member ·

    Correction:

    The height of the header image is evidently variable on the Twenty Fourteen theme. The Quick Specs section of the theme guide says,

    The header image size is 1260 wide and 240 [pixels] high.

    while your header image has a height of 357 pixels. So I presume that either of these or another height would work, as long as it is at least 240 pixels.

  • mbrettell · Member ·

    When I added the image, it added it as a small size at the footer. I know we need to get to be the same size as the header image, so I added the height and width attributes. The height seems to have grown, but the width didn’t change. If I remove them it will go back to the smaller size.

    But really, the positioning is the first thing to solve – do you have any thoughts on how to get that to work?

  • musicdoc1 · Member ·

    MIchael,

    But really, the positioning is the first thing to solve – do you have any thoughts on how to get that to work?

    When I first responded to this topic, I failed to notice that it was in the CSS Customization forum. Ordinarily I would skip such topics, because I have no knowledge in that area. Sorry, about that.

    While you’re waiting for staff to respond, you might be lucky enough to find someone with expertise in that realm respond here.

    When I added the image, it added it as a small size at the footer.

    Regardless of how the image may appear in the footer area widget, you should stick with the file size in the code, and the width should be 1260 pixels.

  • musicdoc1 · Member ·

    Have you tried the custom CSS code provided by staff in the topic Adding a Link to My Header Image? It might not work, because CSS is theme dependent.

  • musicdoc1 · Member ·

    If you intend to use the present header image, here is the URL you want to put in the code:
    https://gravitasgames.files.wordpress.com/2015/11/cropped-fusion-title-web-header4.jpg
    Add nothing to it.

  • mbrettell · Member ·

    The topic you reference IS the one I’ve tried to follow – its the one I reference in my first post.

    I’m sorry, but I don’t think you understand what I’m trying to achieve, and what that article is trying to assist with. That header image you just referenced is the header image on my site. However, when you click it, it always goes back to the home URL. There’s no configuration option to have it go to a different URL.

    To achieve linking to a different URL, the referenced article says to create a text widget containing an link item containing an <img> item with a transparent image, and the link hrefs to wherever you want to link to. Using positioning, we want to place that transparent image over the top of the header image. So that you can see the header image, but when you click on it, it is the transparent image that gets clicked and it follows the link in the text widget instead of the header image link.

  • musicdoc1 · Member ·

    The topic you reference IS the one I’ve tried to follow – its the one I reference in my first post.

    Yes, I’m aware of that. I just decided to use its title this time.

    I’m sorry, but I don’t think you understand what I’m trying to achieve, and what that article is trying to assist with.

    Perhaps you’re right. I think I understand the process in a general way, but not all of the details, and probably should have left this one alone. Have certainly made a few errors. The latest is that I forgot that the image was supposed to be in png format, so the URL I suggested was inappropriate.

    So that you can see the header image, but when you click on it, it is the transparent image that gets clicked and it follows the link in the text widget instead of the header image link.

    That’s pretty much what I thought you were trying to achieve.

    I don’t know how to create a transparent image, but I take it that you do, so I’ve ignored this element in my posts here.

    It is my understanding that the png format file image should have the width 1260 pixels, and that you should upload it to the media library, and then use its URL in the image link code
    <a href="LINK URL"><img src="IMAGE URL" title="" alt="" /></a>
    Have I got that right?

    Then, the CSS code would allow you to reposition that transparent image. The custom CSS code suggested by thesacredpath may or may not work. The reason why is that CSS is, as I understand it, theme dependent. The OP at that topic says the member was using the “Licorice” [Liquorice, I presume] theme.

  • musicdoc1 · Member ·

    The custom code provided by thesacredpath at the cited topic which worked in that case, with the Liquorice theme, was 

    #canvas {
position: relative;
}

#text-5 {
left: 50px;
position: absolute;
top: 100px;
}

    The code that will have the same result on the Edin theme might be different.

  • mbrettell · Member ·

    The code that will have the same result on the Edin theme might be different

    .

    Yes – and that is exactly what I’m hoping to get some help on – that’s why I created this thread. Can you help with that? The theme I’m using is twenty fourteen, though not Edin.

  • chrisrudzki · Member ·

    The transparent image method that’s been mentioned is fairly hacky. I’d recommend that you instead create a custom menu, containing an external link to the site you’re trying to direct people to.

    Part of building an effective site means anticipating how users expect to interact with your site. Most folks would expect the header image link to point to the home page of the existing site.

  • mbrettell · Member ·

    Believe it or not, that’s why I want to make this change. Normally I’d agree that the header image links to the home page.

    However, we’re pushing a particular product (our first), so we’ve changed the header to reflect that product rather than our company. Most board game companies have rotating banners for their recent products, and clicking on the banner takes you to that game’s page.

    I think people will come to our site, see the large game banner we have, and expect the same – it will take them to the detail of the game. The subtlety that this is not a rotating banner will not register with them.

    The destination is not external to the site – it is a particular page within our site that we want to direct them to.

  • chrisrudzki · Member ·

    Have you considered using a theme with a slider?
    https://theme.wordpress.com/themes/features/post-slider/

    That might be easier and work better for you.

    You can read more about sliders here:

    Make Your Blog More Dynamic with a Slider

  • mbrettell · Member ·

    The theme we have (twentyfourteen) does have a slider. I’ve changed the grid we had to a slider. Which achieves the idea of having a nice big image at the header, and clicking on it goes to somewhere other than the home. Only problem is that it only goes to a post, not a page.

    So it’s still not quite doing what we want. If I create another sticky post, the first item on the slider becomes that one instead of our main product. I guess maybe we just have the one sticky? But then we can’t showcase anything else on our slider.

    Is there maybe a better theme? What we want is
    – able to have a large hero image that goes through to a page.
    – showcase recent images and posts on our home page

    Or am I just confused about the whole thing and the purposes of pages vs posts? Maybe WordPress isn’t the best vehicle for this?

  • musicdoc1 · Member ·

    @mbrettell,

    Which achieves the idea of having a nice big image at the header, and clicking on it goes to somewhere other than the home. Only problem is that it only goes to a post, not a page.

    The Sketch theme has a featured content slider which appears on a page assigned to the Portfolio Page Template. The page can be set as the front page. The featured content in the slider may be posts, pages, or portfolio projects. I don’t know if any other theme which has an optional slider that may featured posts, pages, and projects.

    However, I think you might have to assign at least two articles as featured content for the slider to display.

1 2
  • The topic ‘Header Image link to custom URL’ is closed to new replies.