Support » Developing with WordPress » getting a correct link to an image

  • Resolved hyacinthus

    (@hyacinthus)


    I am trying to display an image from a post and when you click on that image you should go to another page with posts of the same category. I can get the name of the category displayed (the part inside the header) with the correct link (localhost/wordpress/ironwork/tables) as in the code below, but the link to the image insists on going back to the localhost/wordpress rather than localhost/wordpress/ironwork/tables.

    if(have_posts()){
        foreach($posts as $post){
            $category = get_the_category();
            $cats = $category[0]->cat_ID;
    
    <!--  set up to display in boxes --> 
    <div class="item">
             
        <header>
           
            <h2><?php $my_link = get_category_link($cats);
                       $my_cat = get_the_category_by_ID($cats); ?>
                
                <a href="<?php echo get_category_link($cats); ?>">
        <?php echo get_the_category_by_id($cats); ?> </a>
            </h2>
        </header>
        
            <?php if(has_post_thumbnail()){ 
            $imgage_url = wp_get_attachment_image_src(get_post_thumbnail_id()
            ,'medium');   ?>
                <a href="<?php get_category_link($cats);  ?> "
                   title="<?php the_title_attribute(); ?>">
                   <?php echo the_post_thumbnail('medium'); ?> </a> 
            <?php } ?>
      </div> <!-- class=item -->

    I have tried replacing the line <?php echo the_post_thumbnail('medium'); ?>
    with <img src='$image_url[0]' ></img> without success. Is what I’m trying to do not possible? Does WP do something behind my back to insist that the link to the post thumbnail be what it wants or am I doing something stupid which is also possible?

    • This topic was modified 3 years, 7 months ago by hyacinthus.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Your loop doesn’t look like a normal loop.

    foreach ( $posts as $post ) ...

    Should be:

    
    while ( have_posts() ) { 
        the_post();
    }
    

    Without using a proper loop, I’m pretty sure the_post_thumbnail will not work unless you have set the proper globals.

    More info on how to make a proper loop – https://codex.wordpress.org/The_Loop

    I understand what you’re saying, I think. But I am getting the correct information such as the link for the category, and ( I did find a spelling error where I had spelled image as imgage) even when I used
    <img src ="<?php echo esc_url( $image ); ?>" alt="table">
    I got the correct image, but the link when I hover over the image is still incorrect. As far as I can tell from looking at documentation on W3schools my html is correct for specifying the link as localhost/wordpress/ironwork/tables (I’m working on my computer using Xampp) but the link remains localhost/wordpress and I end up back in index.php.
    I am asking first
    if(have_posts()) and everything works as I desire except that the link for the pic is wrong and I can’t see why that would be. I’m able to debug and set breakpoints, step through and look at variables, so I know I’m getting information such as I should or think I should.

    Moderator bcworkz

    (@bcworkz)

    Hello again!

    While your loop may mostly be working, Jerry is correct, you are not running a proper WP loop where template tags will work reliably. That is the trap one falls into when using $post as the current foreach instance. Most template tags that rely only on $post will work fine, but others that rely on other globals set by the_post() will not work. The loop mostly works but not reliably so. It’s an insidious problem if you are unaware.

    You don’t need to completely revise your code to run a traditional while have posts loop. You can use setup_postdata() to set the necessary loop variables. Start your loop like so:

    global $post;
    foreach ( $posts as $post ) {
       setup_postdata( $post );

    Maybe this will not solve your problem, but at least you know it’s not because you setup the loop incorrectly.

    • This reply was modified 3 years, 7 months ago by bcworkz. Reason: copy pasta goof

    Using setup_postdata($post); did not help things. But I did get it working by changing the href in the link. Here’s what I ended up with

    <?php
    if(have_posts()){
        foreach($posts as $post){
            setup_postdata($post);
            $category = get_the_category();
            $cats = $category[0]->cat_ID;
            //$cats = array_flip($cats); ?>
    
    <!--  set up to display in boxes --> 
    <div class="item">
             
        <header>
           
            <h2><?php $my_link = get_category_link($cats);
                       $my_cat = get_the_category_by_ID($cats); ?>
                
                <a href="<?php echo get_category_link($cats); ?>">
        <?php echo get_the_category_by_id($cats); ?> </a>
            </h2>
        </header>
        
            <?php if(has_post_thumbnail()){ 
            $image_url = wp_get_attachment_image_src(get_post_thumbnail_id()
            ,'medium',true);   
            $image = $image_url[0];?>
                <a href="<?php echo esc_url($my_link); ?> "
                   >
                    <img src ="<?php echo esc_url( $image ); ?>" alt="table">
                   </a> 
            <?php } ?>
      </div> <!-- class=item -->
    <!-- end set display boxes -->
    <?php } //end foreach
     } //end if have posts  

    Using
    href="<?php echo esc_url($my_link); ?> "
    `seemed to be the trick although I’m not sure why. If you know please explain.
    you wrote

    Most template tags that rely only on $post will work fine, but others that rely on other globals set by the_post() will not work. The loop mostly works but not reliably so. It’s an insidious problem if you are unaware.

    I agree that is an insidious problem. I keep wishing there was a good book that goes into detail on the innards of WP. The only one I know of is Smashing WordPress and it gives me lots of information but only goes so far. I keep thinking that I need to bite the bullet and study how to access the data base and make my own loops. Been too busy trying to get my basic theme going, but I’m getting very close.

    Moderator bcworkz

    (@bcworkz)

    Good find!! Typically the change shouldn’t make any difference. The esc_url() function does try to correct some common URL problems like using a semi-colon instead of colon. esc_url() will place a proper colon when a semi-colon is encountered in front of a double slash. There’s many similar corrective actions it can take.

    The thing is, the URL returned by get_category_link() shouldn’t be malformed in the first place. If you echo out the return of get_category_link($cats), before it’s run through esc_url(), maybe the cause will be apparent.

    I think the number of people that fully understand all the inner workings are quite rare. Not to say that a team of people couldn’t produce a comprehensive book. Details on how a request URL ends up with related page output is covered in Query Overview. The humanshell.net reference there is even more detailed. (apologies if I already told you about this, I recently told someone, but cannot recall whom)

    Still, the query is only one part of the inner workings. A lot more remains undocumented, other than as source code. Source code doesn’t make for easy reading 🙂

    Thanks for your help and for pointing out Query Overview. I like to understand what I’m doing. Yeah, I’ve found much source code hard sledding especially since a lot of it is not commented. I really appreciate the forum for that reason.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘getting a correct link to an image’ is closed to new replies.