0

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.

8
  • By "thumbnail," do you mean the Featured Image or an image that is added inside the content of the post? By your question and posted code, I would assume inside the content, but I just wanted to make sure. Mar 18, 2013 at 17:08
  • Well I set the size of the thumbnail in the Media Settings and I just want to able to add the images with the post. I thought I might be able to link the images to the post or something similar
    – user668499
    Mar 18, 2013 at 17:14
  • The image sizes in Media Settings only tells WordPress how to resize the images when you upload them. To add an image to the post, you either have to use the "Add Media" button above the content area when creating a new post OR the "Featured Image," which is usually on the right and down towards the bottom. Which of these methods are you using to add the image to the post? Mar 18, 2013 at 17:21
  • Add Media. Can I add more than one image with Featured Image
    – user668499
    Mar 18, 2013 at 17:25
  • One. I answered your question below for both methods. Don't forget to up-vote and click the check mark to accept an answer when it works for you... Looking at your profile, I notice you don't accept too many solutions to your questions. Mar 18, 2013 at 17:34

2 Answers 2

0

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.

Add link to image in WordPress

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

0

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.

2
  • I didn't even see the <!-- I would like to add the thumbnails here --> in the code... Must not have read the question fully. Mar 18, 2013 at 17:59
  • That happens to me too sometimes. :) Mar 18, 2013 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.