Circumventing the normal image upload process

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(); ?>

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating

Answers:

Method 1

Related