Image Path not working if not hardcoded

  • I have a theme under devopment in MAMP and would like to return a simple image without having to hardcode the full path to it each time I use it, also because updating this path when the theme is online is just not the desired way.

    my code:

    <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url('/')); ?>" title="Brand">
                        <img style="max-width:30px; margin-top: -7px;"
                             src="https://localhost:8888/wordpress/wp-content/themes/minimax3/functions/Smile-success.png">
                    </a>

    That works.

    Now if I use:
    1. ../Smile-success.png (or whatever) the image is broken
    2. If I use get_template_directory_uri() the image is broken
    3. If I use img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/image.jpg” alt=”whatever”/>. is also broken

    Is it really possible that there is no possibility to return the image without hardcoding the entire URL?

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

  • Yes it is possible.
    You will find lots of examples in other themes. Either temporarily switch themes, or install another WordPress using a different theme so that you can see how it works.
    You need to use a browser inspector to examine your generated pages and hence fine tune your image code.

    Thread Starter beda69

    (@beda69)

    does not seem to be so.

    I checked 80% of theme 2014’s files and the only I found was:
    <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

    I use this:

    <img alt="Brand" src="./images/icon.png" style="max-width: 30px;">

    and if I use Brackets to code, and hover over that piece of code, correctly the image displays on hover

    However, if I load the page in Firefox, image is broken and the console tells me “Could not load image” and the ONLY that works in console is if I change the

    src="./images/icon.png"

    part to:

    <img alt="Brand" src="https://localhost:8888/mysite/wp-content/themes/mytheme/images/icon.png" style="max-width: 30px;">

    and this is for sure not the way it should be achieved.

    To you recommend to create a variable and then get it with a call to?

    like

    $imagepath = get_template_directory() . '/images/';

    and then echo it?

    I am not sure this is the good approach!

    thank you

    Thread Starter beda69

    (@beda69)

    The only way I get this to work (I tested online to be sure)

    <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                                    <img alt="Brand" src="<?php bloginfo('template_directory'); ?>/images/icon.png" style="max-width: 30px;">
                                </a>

    OR

    <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                                    <img alt="Brand" src="https://mysite.com/wp-content/themes/mytheme/images/icon.png" style="max-width: 30px;">
                                </a>

    OR

    <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                                    <img alt="Brand" src="./wp-content/themes/mytheme/images/icon.png" style="max-width: 30px;">
                                </a>

    According to all DOC i read, this should also work, but it does not

    Not sure if this works only in CSS field though

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image Path not working if not hardcoded’ is closed to new replies.