using images with posts_nav_link (5 posts)

  1. AlyciaAnimation
    Posted 7 years ago #

    I'm having trouble getting images to work with the posts_nav_link function.

    I have it set up like this:

    <div class="arrowLeft"><?php posts_nav_link('','','<img src="images/arrowLeft" />Previous Entries'); ?></div>
    <div class="arrowRight"><?php posts_nav_link('','Next Entries<img src="images/arrowRight" />',''); ?></div>

    The problem is that the images won't show up. My images are in my template folder>images, but by looking at the source of my webpage it seems it's looking in the root directory of my site instead of my template folder.

    So then I tried adding the php code for getting the url of my template, like this:

    <div class="arrowLeft"><?php posts_nav_link('','','<img src="<?php bloginfo('template_url'); ?>/images/arrowLeft" />Previous Entries'); ?></div>

    But doing this gives me a syntax error, unexpected T_STRING. Does anyone know how I can get this to work? Thanks for your help.

  2. AlyciaAnimation
    Posted 7 years ago #

    Oh, I forgot to put the ".png" part at the end of the image, but adding that hasn't effected anything. It's still not working right.

  3. @mercime
    Volunteer Moderator
    Posted 7 years ago #

    Why not add the image in the background - the easy way :-) Here's how:

    In your template:

    <div class="pagenav">
    <span class="arrowLeft"><?php previous_post_link('%link') ?></span>
    <span class="arrowRight"><?php next_post_link('%link') ?></span>

    In your style.css:

    .pagenav { padding: 20px 20px 0 0; }
    .arrowLeft a { float: left; padding-left: 18px; background: url(images/arrow-left.gif) no-repeat left center; color: #whateveryouwant; }
    .arrowRight a { float: right; padding-right: 18px; background: url(images/arrow-right.gif) no-repeat right center; color: #whateveryouwant; }
  4. AlyciaAnimation
    Posted 7 years ago #

    Thanks mercime. That's actually what I tried to do first, because it did seem easier :) But the images are pictures of arrows and I want to be able to click on the arrow to take you back or forward. Can you make a background image a link?

  5. @mercime
    Volunteer Moderator
    Posted 7 years ago #

    With the CSS declarations given and HTML set up in template, the span of the link covers the text link and the transparent area above the image given by the padding. So when a visitor hovers over the arrow image and clicks on it, the visitor will be taken to the previous or next post.

Topic Closed

This topic has been closed to new replies.

About this Topic