Link images to post

Question

Link images to post.

Hi all

I'm sure this is simple but I can't see how to do it.

I know how to add images to a post - Click in the post, Add Media, choose thumbnail.

This gives me an thumbnail in the post.

I think what I want to do is link thumbnails to the post so I can control where the thumbnails appear on the page.

I have a template like this.

    <div class="content_div">
        <?php

            $car_args = array(
                'post_type' => 'post',
                'category_name' => 'car',
                'order' => 'asc'
            );

            $cars = new WP_Query($car_args);

            if($cars->have_posts()):
                while($cars->have_posts()):
                    $cars->the_post();
        ?>

            <article class="service">

              <div class="right_col">

                  <h4><?php the_title(); ?></h4>

                  <?php the_content(); ?>

              </div><!--right_col-->

              <aside class="side_bar">
                <ul>

                <!-- I would like to add the thumbnails here -->

                </ul>
              </aside>

          </article><!-- service-->

            <?php endwhile; endif; ?>
            <?php wp_reset_postdata(); ?>

        </div><!--content_div-->

I have posts about car's with category name 'car', I'm using the category name in the WP_Query.

Some of these posts have images. If there are images with the post I would like to add them as a list in the aside.

Answer 1

If you're adding an image to your post via "Add Media," you can simply set where you would like the image to link by setting it in the "Link to" field.

If you're adding an image to your post with "Featured Image," you can add this to your template:

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
 <?php endif; ?>

This can be more complex depending on your specific needs. Visit the WordPress Codex for Function Reference/the post thumbnail

Answer 2

There is a plugin for defining multiple featured images

You could also show each post's attachments (images that you uploaded to a post are then considered "Attached" to that post. Because that involves another query, and probably doesn't change all that often I developed a function that gets the attachments and saves them using the Transient API.

//Get attachments array for specific post/page

function kia_get_attachments($post_id = NULL){
    global $post;

    $post_id = ( NULL === $post_id) ? $post->ID : $post_id;

    if ( false === ( $attachments_array = get_transient( 'kia_post_attachments' ) ) || !isset($attachments_array[$post_id] )  ) {  

        $args = array(
            'post_type' => 'attachment',
            'numberposts' => -1,
            'post_parent' => $post_id,
            'orderby' => 'menu_order',
            'order' => 'ASC',
            'post_mime_type' => array('image'),
        );
        $attachments = get_children($args);
        $attachments_array[$post_id] = $attachments;
        set_transient( 'kia_post_attachments', $attachments_array );
    } 

    return $attachments_array[$post_id]; 

}

// refresh transient on save
function kia_delete_attachment_transient($post_id) {

    $attachments_array = get_transient( 'kia_post_attachments' );

    if(!isset($attachments_array[$post_id])) return $post_id;

    //if this post was in the transient, then delete it from the transient
    unset($attachments_array[$post_id]);
    set_transient( 'kia_post_attachments', $attachments_array );

}
add_action( 'save_post', 'kia_delete_attachment_transient' );

Then in your above code you'd replace the entire <aside class="side_bar"> part of your loop with the following:

$attachments = kia_get_attachments(); 

if( !empty ($attachments) ) : ?>

<aside class="side_bar">
    <ul>


<?php
   foreach ( $attachments as $attachment ) :

    echo '<li>' . wp_get_attachment_image( $attachment->ID ) . '</li>';

    endforeach; 
?>
    </ul>
</aside>

<?php endif;

I hate "Attachments" and the handling of how images are attached to a post, but this is currently the best way that I know of.