Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a page that I would like to work on little techniques and then show them off. I built a scrolling banner that uses images and then scrolls them in order. I have successfully built this with static HTML but I have never done so in Wordpress.

I have uploaded the images to my MAMP server and I call them in their respective s. It all works except the images don't load. Also, while troubleshooting I loaded an image by itself on the same page and it did not display either.

How can I load images in for an individual page? Techicnally, they aren't to be used outside of that page. Hmm.

-Josh

    <?php
    /*

    Template Name: scrolling headers


    */

    get_header(); ?>

    <div id="primary" class="site-content">
        <div id="primary" class="site-content" style="width:100%;">
    <!-- Each image is 350px by 233px -->
            <div class="photobanner">
                <img class="first" src="../converted_images/lebowoski-01.jpg" alt="lebowoski-01" width="350" height="197" />
                <img src="../converted_images/lebowoski-04.jpg" alt="lebowoski-04" width="350" height="197" />
                <img src="../converted_images/lebowoski-03.jpg" alt="lebowoski-03" width="330" height="233" />
                <img src="../converted_images/lebowoski-09.jpg" alt="lebowoski-09" width="350" height="224" />
                <img src="../converted_images/lebowoski-02.jpg" alt="lebowoski-02" width="350" height="197" />
                <img src="../converted_images/lebowoski-08.jpg" alt="lebowoski-08" width="350" height="197" />
                <img src="../converted_images/lebowoski-07.jpg" alt="lebowoski-07" width="350" height="197" />
                <img src="../converted_images/lebowoski-06.jpg" alt="lebowoski-06" width="350" height="210" />
                <img src="../converted_images/lebowoski-05.jpg" alt="lebowoski-05" width="350" height="210" />
            </div>
        </div><!-- #content -->
    </div><!-- #primary -->



    <?php get_footer(); ?>
share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

If the question is "Why don't my images load?" the answer is "Don't use relative URLs in a WordPress context."

Use functions like admin_url and these other related functions instead.

Relative URLs are relative to the URL of the page you are on, and are calculated by the browser. In other words, relative URLs are relative the URL as the (client-side) browser see it. With static HTML sites that more or less maps to the filesystem paths, and it works fine. With generated URL structures like WordPress creates that doesn't work.

Think about http://example.com/category/aciform. In WordPress, there is no file at that location, yet that is the base for calculating the relative URL. It makes them very unreliable.

Related

http://yoast.com/relative-urls-issues/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.