using images with posts_nav_link

  • alyciaanimation

    (@alyciaanimation)


    17 years, 7 months 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter alyciaanimation

    (@alyciaanimation)

    17 years, 7 months 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.

    @mercime

    (@mercime)

    17 years, 7 months 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>
</div>

    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; }

    Thread Starter alyciaanimation

    (@alyciaanimation)

    17 years, 7 months 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?

    @mercime

    (@mercime)

    17 years, 7 months 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.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘using images with posts_nav_link’ is closed to new replies.