permalink seems to break conditional display of image (9 posts)

  1. massagran
    Posted 7 years ago #

    Hello and thanks in advance for reading or any help.

    In my header.php file inside my wp-content/themes I added a bit of code that says,

    <?php if (is_front_page()) { ?>
      <img src="wp-content/themes/PeakOilTheme/images/PO_animation.gif" alt="Zenit del petroleo"/>
    <?php } else { ?>
    <img src="wp-content/themes/PeakOilTheme/images/PO_static.gif" alt="Zenit del petroleo"/>
    <?php } ?>

    That is, if you're in the front page (which is a page I wrote and called home) display an animation, if you are in any of the other pages (called, "saber más", "noticias", "acerca de") then display a static gif.

    This works while using page Ids. like,

    but fails to work when using permalinks like,
    (the page displays ok, but not the image)

    Thank you very much for any help provided,
    Cheers, Massagran.

  2. moshu
    Posted 7 years ago #

    Time to learn the basics about relative and absolute paths... (go ahead and google for it, read, learn)

    <img src="wp-content/...
    Hint: a path like that will always be added to the end of whatever URL you are on.

    Also, read the Docs about the bloginfo template tag.

  3. Zentode
    Posted 7 years ago #

    Same problem. Even when including a script in a template. The permalink interferes with the img src=... or script path.

    The image or script cannot be accessed. With an image, viewing properties on the placeholder of the missing image shows a path to the image including the permalink structure. Not the path to the image as hardcoded in a template.

    Sure I will find a solution soon but, I know what massagran is experiencing. I have obviously tried rel and abs path but, permalinks interfere with both.

  4. iridiax
    Posted 7 years ago #

    As moshu suggested, use the bloginfo tag:

    <img src="<?php bloginfo('template_url'); ?>/images/my-pic.jpg" alt="" />

  5. Zentode
    Posted 7 years ago #

    Thank you much, I know of all those functions but, my image is located in the uploads and/or other folders. That is my issue. I ended up using iframe (yech) for now which worked. I also used substr_replace referencing the the_permalink() tag to get rid of the permalink structure in the call in another area. Clunky but, effective until I find another solution. Thanks again though. That may help someone else.

    Usually, having the obvious staring me in the face and my missing it, I wish dropping a couple directories would work like:
    <img src="<?php bloginfo('template_url'); ?>../../uploads/my-pic.jpg" alt="" />
    But, that will not work.

  6. moshu
    Posted 7 years ago #

    You don't upload theme images in the uploads. You keep them in the theme folder, under /images. Most themes have such a subfolder. And then the solution offered by iridiax works perfectly.

  7. Zentode
    Posted 7 years ago #

    Ahhh, so sorry, my bad. My issue was not totally theme related. So mine was not the "same problem" as massagrans. My apologies.

    I was trying to display images that reside in uploads directories and are not always theme related. I did also use one in a page.php theme file pulling it in with a code snippet with that would display it under specific circumstances which created the same problems for me. Pretty specific to my application i guess. Now I can also place this simple image rotator anywhere. Reads a directory and rotates the images. The substr_replace was the key.

    Here is the whole script but, I broke it up and used require and called this "slideshow" where ever I needed it. Remains plugin independent.
    You can now see how permalinks combined with my limited coding ability created my issue. "But I am feeling better now." ;-)

    $imageDirectory = "wp-content/uploads/rotate-these/";
    $interval = 5;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slide Show</title>
    <script type="text/javascript">
    var picn=0;
    var picList = new Array;
    var actImg = new Image();
    if ($handle = @opendir($imageDirectory)) {
    $i = 0;
    while (false !== ($file = readdir($handle)))
    if ($file != "." && $file != "..")
    $path = $imageDirectory;
    if(is_file($path.DIRECTORY_SEPARATOR.$file)) {
    $info = $path_parts = pathinfo($file);
    if (   (strtolower($info['extension']) == 'jpg') || (strtolower($info['extension']) == 'jpeg'))  {
    $file = addslashes($file);
    echo "picList[$i] = '$path/$file';\r\n";
    function setCountDown ()
    actImg.src = picList[picn++];
    if (picn>=picList.length) picn=0;
    setTimeout ( "setCountDown()", <?php echo ($interval*1000); ?> );
    <!-- Below can be stripped out and used as a standalone via iframe, include or whatever means you desire. Many ways to use it little modification.  -->
    <body onload="setCountDown();" bgcolor="#efe6c5">
    <img src="<?php echo $path.'/'.$file; ?>" alt="" id="pic" border="0" width="468" height="60"/>
  8. moshu
    Posted 7 years ago #

    I have no idea what are you talking about... but no matter what, image or script... relative path like this:
    will always cause you troubles. A path like that is always "calculated" from where you are, e.g.
    example.com + the path above =
    but if you are on a single post view:
    the URL is calculated like

    That's what you need to understand. The rest is wasting time.

  9. jcapshaw
    Posted 7 years ago #


    I see your point. However, I am still having issues. The blog info trick doesn't seem to work.

    My wordpress installation is in one folder and my index file is in the main folder.

    so it goes:
    domain/wordpress(wordpress installation)

    When I update my permalinks structure and use:
    <img src="<?php bloginfo('template_url'); ?>/images/my-pic.jpg" alt="" />

    I get this img url:

    It Should Be:

    One other issue, when I set up the permalinks I simply use the /%postname%/.

    However, the permalink setting keeps adding the word "Atlanta" in the URL. I know that can be done through the "Category Base" in the permalinks settings, however mine is empty and I have never used it.

    Any suggestions?

Topic Closed

This topic has been closed to new replies.

About this Topic