Support » Plugins » Hacks » Having a problem with relative path to /wp-content/uploads/ (( I think ))

  • Resolved frankjackson

    (@frankjackson)


    Howdy, can anyone see a problem with this code?

    I suspect I’m doing the relative url to the /wp-content/uploads/ wrong but can’t figure it out.

    <div class="image_wrap">
    <?php
    $posttags = get_the_tags(); // Get articles tags
    $home = get_bloginfo('url'); // Get homepage URL
    
    // Check if tag-slug.jpg exists and display it.
    if ($posttags) {
     foreach($posttags as $tag) {
           $image = "/wp-content/uploads/$tag->slug.jpg";
    
           if (file_exists("wp-content/uploads/$tag->slug.jpg")) {
             echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image . '" /></a>';
    
           // If no image found, output something else.
           } else { ?>
             <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="  image missing  " />
           <?php }
      }
    }
    ?>
    </div><!-- #image_wrap -->

    The output IS showing the default-author.jpg as it should if it can’t find an image in the folder with the same name as the tag slug … that’s why I suspect my relative url structure is wrong here … because the ‘uploads’ folder does have those images in it.

    For example:

    If the tag slug is ‘frank-jackson’ it should find and display the ‘frank-jackson.jpg’ image in the ‘wp-content/uploads’ folder, wrapped in a link pointing to that tag page.

    Note: I’m using a ‘no tag slugs in url’ plugin, so that’s why I don’t have /tags/ in that output/echo url.

    Earlier, before I added the ‘else show default image part’ it WAS outputting a <img> wrapped in a proper link to the tag page as it should, but just wasn’t showing the image.

    I think I’m just not sending it on the proper path the to wp-content/uploads directory because all the other parts seems to be working.

    Thanks

    [+

    ]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    I agree, there’s a relativity problem. Relative paths are dicey at best in WP because certain folders can be moved about such that any relative references will break. Even for code only intended only for your specific installation, it’s not always clear what the path is relative to. Even if you do eventually figure out the correct relation, your code will not be portable, and you can’t know what the future may hold for your code.

    Absolute paths are quite ugly, especially in shared hosting environments. (And completely not portable) Fortunately, WP has a few functions and constants available so you can build absolute paths without even knowing the absolute path yourself. For files in wp-content, you can use WP_CONTENT_DIR, for the uploads dir, one of the values returned by wp_upload_dir() can be used. If all else fails, use ABSPATH for the WP installation folder.

    More information can be found in Determining Plugin and Content Directories.

    Thank you sir. Based on your advice, I ended up with this. It’s just one of several variations that I can’t get to work.

    I’m certain you’re on the right path (pun) but I guess I just don’t know exactly how to write it all out properly.

    This is the last one I tried. Any obvious mistakes???

    <div class="image_wrap">
    <?php
    $posttags = get_the_tags(); // Get articles tags
    $home = get_bloginfo('url'); // Get homepage URL
    
    // Check if tag-slug.jpg exists and display it.
    if ($posttags) {
     foreach($posttags as $tag) {
    		$upload_dir = wp_upload_dir();
    		$image_relative_path = "/" . $tag->slug.jpg . "";
    		$image_path = $upload_dir['basedir'] . $image_relative_path;
    		$image_url = $upload_dir['baseurl'] . $image_relative_path;
    
    		if (file_exists($image_path)) {
    		echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_path . '" /></a>';
    
           // If no image found, output something else.
           } else { ?>
             <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="  image missing  " />
           <?php }
      }
    }
    ?>
    </div><!-- #image_wrap -->

    [+]

    Moderator bcworkz

    (@bcworkz)

    Yeah, your concatenations could be a bit confused. I believe the relative image path line might be more like this:
    $image_relative_path = "/" . $tag->slug .".jpg";

    There might be others, this sort of code is hard to “read”.

    Try outputting the paths without the if () conditional as a debugging technique to ensure you’re getting what you think you should. You’ll have to view the output in source view unless you also output everything inside a <pre> block. Unless you do this check on occasion, you’re basically coding blind.

    It’s easy to get lost in various quotes and dots with this stuff. Everyone develops their own preferred way to deal with it. The following is my preference, give it a try and see if it works for you.

    First assign all output returned from functions to variables. For me, having functions returning values in the middle of output strings just confuses the issue.

    Same goes for <?php ?> blocks. I generally avoid bouncing in and out of PHP. I prefer to just echo out everything. Instead of this:

    } else { ?>
             <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="  image missing  " />
           <?php }

    I might do this:

    } else {
             $template_dir = bloginfo('template_directory');
             echo '<img src="' . $template_dir . '/img/default-author.jpg" title="  image missing  " />';
           }

    Of course that last example still has confusing quote hierarchy. I like to take advantage of PHP’s automatic expansion of variables in double quoted strings, so I would rather do this for the echo statement
    echo "<img src='{$template_dir}/img/default-author.jpg' title=' image missing ' />";

    If you really like double quotes in the HTML output, you can escape them like so:
    echo "<img src=\"{$template_dir}/img/default-author.jpg\" title=\" image missing \" />";

    This touches on two very important coding skills that you’ll want to develop. One, productive debugging techniques that allow you to identify your own errors instead of having to ask for help. ( I don’t mind helping at all, but still…) Two, some people grossly underestimate the importance of organizing and neatly formatting their code, doing so makes finding errors much easier.

    I hope you don’t mind the little lecture. Even though it takes longer than simply doling out answers, I like to think it’s more helpful in the long run.

    Wow awesome… literally 10 second fix.

    I didn’t need to get rid of the else statement because after fixing this part as you pointed out.

    $image_relative_path = “/” . $tag->slug .”.jpg”;

    … instead of out-putting the default image, it output the tag name (the alt) linked to the tag page. At that point I knew it was close so I checked the source code of the page and saw a garbled mess in the img src=””.

    I knew the problem immediately (you probably noticed earlier):

    I had img src=”$image_path” … instead of img src=”$image_url” (easy spot/easy fix)…

    Fired it up, and yahooooooooooo!!!

    Works perfectly.

    This will save a ton of work. I was using a plugin where I had to manually upload and assign an image to each new tag individually.

    Now instead, I can just batch ftp a bunch of images into the uploads folder (named the same as their respective tag slugs [ tag-slug = tag-slug.jpg ]) and this thing will grab/associate the photos to the tags for me automatically.

    Thanks again brother, that was a real quick fix once you pointed out the $image_relative_path = “/” . $tag->slug .”.jpg”; mistake (and sending me that link earlier).

    This is the final WORKING code (all that’s left is to clean it up a little as you’ve pointed out). I’ll save that for tomorrow (it’s 4:15am here, I was on my way to bed and heard your email come in, and checked it, and had to give it a try… happy I did :)!

    Final WORKING code:

    <div class="image_wrap">
    <?php
    $posttags = get_the_tags(); // Get articles tags
    $home = get_bloginfo('url'); // Get homepage URL
    
    // Check if tag-slug.jpg exists and display it.
    if ($posttags) {
     foreach($posttags as $tag) {
    		$upload_dir = wp_upload_dir();
    		$image_relative_path = "/" . $tag->slug .".jpg";
    		$image_path = $upload_dir['basedir'] . $image_relative_path;
    		$image_url = $upload_dir['baseurl'] . $image_relative_path;
    
    		if (file_exists($image_path)) {
    		echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>';
    
           // If no image found, output something else.
           } else { ?>
             <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="  image missing  " />
           <?php }
      }
    }
    ?>
    </div><!-- #image_wrap -->
    Moderator bcworkz

    (@bcworkz)

    Awesome! Your happiness has made my day as well 😀

    Funny… thanx again man!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Having a problem with relative path to /wp-content/uploads/ (( I think ))’ is closed to new replies.